Dự Án Tính Tiền Boa - Lập Trình Kotlin trong Android Studio | Môn công nghệ máy tính - Trường Cao đẳng Kinh tế - Kỹ thuật Công thương

lOMoAR cPSD| 58097008
DỰ ÁN TÍNH TIỀN BOA
Tạo dự án Hoạt động trống
1. Để bắt đầu, hãy tạo một dự án Kotlin mới trong Android Studio bằng mẫu Empty
Activity (Hoạt động trống).
2. Đặt tên ứng dụng là "Tính tiền boa", với cấp độ API tối thiểu là 19 (KitKat). Tên gói là com.example.tiptime. lOMoAR cPSD| 58097008
3. Nhấp vào Finish (Hoàn tất) để tạo ứng dụng. Xây dựng bố cục trong XML
1. Vẫn trong tệp activity_main.xml, hãy chuyển sang chế độ xem màn hình Split (Phân tách) để
xem mã XML bên cạnh Design Editor (Trình chỉnh sửa thiết kế). Design Editor (Trình chỉnh
sửa thiết kế) cho phép bạn xem trước bố cục giao diện người dùng.
2. Bạn có thể chọn chế độ xem theo sở thích cá nhân. Tuy nhiên, đối với lớp học lập trình này,
bạn hãy sử dụng chế độ xem Split (Phân tách) để có thể thấy cả phần XML bạn chỉnh sửa và
tác động của những chỉnh sửa đó trong Design Editor (Trình chỉnh sửa thiết kế).
3. Hãy thử nhấp vào các dòng lệnh khác nhau, dòng bên dưới ConstraintLayout và tiếp đó là
dòng bên dưới TextView. Bạn sẽ thấy rằng thành phần hiển thị tương ứng sẽ được chọn trong
chế độ xem Design Editor (Trình chỉnh sửa thiết kế). Kết quả sẽ tương tự khi làm điều ngược
lại, ví dụ: nếu bạn nhấp vào TextView trong Design Editor (Trình chỉnh sửa thiết kế), đoạn
mã XML tương ứng được làm nổi bật. lOMoAR cPSD| 58097008 Xoá TextView
1. Bây giờ bạn không cần đến TextView nữa nên có thể xoá thành phần hiển thị này. Hãy nhớ
xoá toàn bộ nội dung từ thẻ mở < TextView đến hết thẻ đóng /> . < TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Phần nội dung còn lại trong tệp là về ConstraintLayout:
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
2. Thêm khoảng đệm 16 dp vào ConstraintLayout để giao diện người dùng không bị tràn vào cạnh màn hình.
Khoảng đệm cũng tương tự như lề trang nhưng sẽ bổ sung thêm khoảng trống vào bên trong
ConstraintLayout, thay vì thêm khoảng trống ở bên ngoài. ... lOMoAR cPSD| 58097008
android:layout_width="match_parent"
android:layout_height="match_parent" android:padding="16dp"
tools:context=".MainActivity">
Lưu ý: Không phải tất cả đoạn mã trong lớp học lập trình này sẽ được hiển thị vắn tắt. Mã
không thay đổi hoặc không phù hợp cho bước hiện tại sẽ được biểu thị bằng dấu ba chấm (3
dấu chấm liên tiếp ...). Nhờ vậy, bạn có thể tập trung vào các phần quan trọng nhất của đoạn mã này.
Thêm trường văn bản phí dịch vụ
Ở bước này, bạn sẽ thêm thành phần giao diện người dùng để cho phép người dùng nhập phí
dịch vụ vào ứng dụng. Bạn sẽ sử dụng phần tử EditText để cho phép người dùng nhập hoặc
chỉnh sửa văn bản trong ứng dụng.
1. Tìm một khoảng trống giữa các thẻ mở và đóng của ConstraintLayout.
2. Sao chép và dán XML trong tài liệu này vào khoảng trống đó trong bố cục của bạn trên Android Studio.
Tệp bố cục của bạn sẽ có dạng như sau:
<?xml version="1.0" encoding="utf-8"?>
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp" tools:context=".MainActivity">
android:id="@+id/plain_text_input"
android:layout_height="wrap_content"
android:layout_width="match_parent" android:inputType="text"/>
Có thể bạn chưa hiểu rõ toàn bộ nội dung này. Các bước sau sẽ giải thích chi tiết giúp bạn.
4. Chú ý rằng EditText đang được gạch chân màu đỏ.
5. Di chuột qua đó bạn sẽ thấy lỗi "thành phần hiển thị chưa được ràng buộc". Các lỗi này bạn
đã quen thuộc trong các lớp học lập trình trước đó. Hãy nhớ, cần thiết lập các điều kiện ràng
buộc lên thành phần con của ConstraintLayout để bố cục biết cách sắp xếp các thành phần này. lOMoAR cPSD| 58097008
6. Thêm các điều kiện ràng buộc này vào EditText để neo thành phần hiển thị này vào góc trên
cùng bên trái của thành phần mẹ.
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
Nếu bạn đang viết bằng tiếng Anh hoặc một ngôn ngữ khác được viết từ trái sang phải (LTR),
thì cạnh bắt đầu là phía bên trái. Nhưng một số ngôn ngữ như tiếng Ả Rập được viết từ phải
sang trái (RTL). Vì thế, cạnh bắt đầu là phía bên phải. Đó là lý do tại sao điều kiện ràng buộc
sử dụng từ "bắt đầu" để có thể phù hợp với các ngôn ngữ LTR hoặc RTL. Tương tự, các điều
kiện ràng buộc sử dụng từ "kết thúc" thay vì bên phải.
Lưu ý: Tên của các điều kiện ràng buộc phải tuân theo mẫu định dạng
layout_constraint_toOf, trong đó đề cập đến thành phần hiển thị
hiện tại. đề cập đến cạnh của khung hiển thị đích mà khung hiển thị hiện tại đang bị
ràng buộc vào vùng chứa mẹ hoặc một khung hiển thị khác.
Khi thêm vào các điều kiện ràng buộc mới, phần tử EditText sẽ có dạng như sau:
android:id="@+id/plain_text_input"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" android:inputType="text"/>
Xem lại các thuộc tính EditText
Kiểm tra cẩn thận tất cả thuộc tính EditText bạn đã dán vào nhằm đảm bảo những thuộc tính
này sẽ hoạt động đúng như dự kiến trong ứng dụng của bạn.
1. Tìm thuộc tính id, đang được gán thành @+id/plain_text_input.
2. Hãy thay đổi tên thuộc tính id thành tên phù hợp hơn, @+id/cost_of_service.
Lưu ý: Mã nhận dạng tài nguyên là tên tài nguyên duy nhất cho phần tử này. Khi bạn thêm
một View hoặc tài nguyên khác vào Layout Editor (Trình chỉnh sửa bố cục), Android Studio
sẽ tự động gán mã nhận dạng tài nguyên cho những tài nguyên đó. Khi nhập mã XML theo
cách thủ công, bạn cần tự khai báo rõ ràng mã nhận dạng tài nguyên này. Bạn phải định nghĩa
mã nhận dạng thành phần hiển thị mới trong tệp XML của mình bằng tiền tố @+id. Tiền tố
này sẽ yêu cầu Android Studio thêm mã nhận dạng đó làm mã nhận dạng tài nguyên mới.
Chọn tên gợi tả cho tài nguyên để bạn có thể biết được những tài nguyên đó đang đề cập đến
điều gì. Tuy nhiên, các tên này phải viết bằng chữ thường và các từ phải được phân tách bằng dấu gạch dưới.
Khi bạn tham chiếu đến mã nhận dạng tài nguyên trong mã ứng dụng, hãy sử dụng
R..; ví dụ: R.string.roll. Đối với mã nhận dạng View, là id, ví dụ: R.id.button. lOMoAR cPSD| 58097008
3. Xem thuộc tính layout_height. Thuộc tính này được thiết lập thành wrap_content, nghĩa là
chiều cao sẽ cao bằng phần nội dung bên trong. Điều này sẽ không có vấn đề gì vì chỉ có 1 dòng văn bản.
4. Xem thuộc tính layout_widt . Thuộc tính này được thiết lập thành h
match_paren trên thành phần con của t match_parent, nhưng bạn không thể thiết lập
ConstraintLayout. Hơn nữa, trường
văn bản không cần hiển thị quá rộng. Hãy thiết lập chiều rộng cố định cho trường văn bản là
160dp, như thế sẽ có nhiều không gian cho người dùng nhập phí dịch vụ.
5. Hãy lưu ý thuộc tính mới inputType. Giá trị của thuộc tính là "text", nghĩa là người dùng có
thể nhập bất kỳ ký tự văn bản nào vào trường này trên màn hình (ký tự bảng chữ cái, ký hiệu, v.v.) android:inputType="text"
Tuy nhiên, bạn chỉ muốn người dùng nhập ký tự số vào EditText vì trường này thể hiện giá trị tiền tệ.
6. Xoá từ text nhưng để lại dấu ngoặc kép.
7. Bắt đầu nhập number vào đúng vị trí của nó. Sau khi nhập "n", Android Studio sẽ hiển thị một
danh sách các nội dung có thể điền vào, trong đó có chứa ký tự "n".
8. Hãy chọn numberDecimal để yêu cầu người dùng nhập vào chữ số thập phân.
android:inputType="numberDecimal"
Sẽ rất hữu ích khi hiển thị cho người dùng một số gợi ý về nội dung cần nhập vào trường này.
Bạn sẽ cần thay đổi thêm một chút như bên dưới.
9. Thêm thuộc tính hint vào EditText để mô tả những nội dung người dùng nên nhập cho trường này.
android:hint="Cost of Service"
Bạn cũng sẽ thấy phần thay đổi được cập nhật trong chế độ xem Design Editor (Trình chỉnh sửa thiết kế).
10. Chạy ứng dụng của bạn trong trình mô phỏng. Phần khai báo sẽ có dạng như sau: lOMoAR cPSD| 58097008
Tốt lắm! Mặc dù chưa làm gì nhiều nhưng bạn đã có một khởi đầu tốt đẹp và đã chỉnh sửa
một số thành phần trong XML. Mã XML cho bố cục của bạn sẽ có dạng như sau.
<?xml version="1.0" encoding="utf-8"?>
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp" tools:context=".MainActivity">
android:id="@+id/cost_of_service" android:layout_width="160dp"
android:layout_height="wrap_content"
android:hint="Cost of Service"
android:inputType="numberDecimal"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" /> lOMoAR cPSD| 58097008
Thêm câu hỏi về chất lượng dịch vụ
Ở bước này, bạn sẽ thêm một TextView cho phần câu hỏi "Bạn đánh giá thế nào về chất lượng
dịch vụ?" Hãy thử nhập thành phần hiển thị này trong XML mà không cần sao chép/dán.
Android Studio sẽ hiển thị các đề xuất giúp bạn.
1. Sau khi đóng thẻ EditText, />, hãy thêm một dòng mới và bắt đầu nhập 2. Chọn TextView trong số các đề xuất và Android Studio sẽ tự động thêm thuộc tính
layout_width và layout_height cho TextView này.
3. Chọn wrap_content cho cả hai vì bạn chỉ cần TextView lớn bằng phần nội dung văn bản bên trong.
4. Thêm thuộc tính text bằng "How was the service?"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="How was the service?" 5. Đóng thẻ bằng />.
6. Lưu ý trong Design Editor (Trình chỉnh sửa thiết kế), TextView sẽ chồng chéo với EditText.
Điều này có vẻ không ổn, vì vậy bạn sẽ thêm các điều kiện ràng buộc vào TextView trong
bước tiếp theo. Hãy suy nghĩ về những ràng buộc bạn cần thực hiện. TextView nên được đặt
theo chiều ngang và chiều dọc ở đâu? Bạn có thể kiểm tra ảnh chụp màn hình của ứng dụng để tham khảo. lOMoAR cPSD| 58097008
Theo chiều dọc, bạn muốn TextView đặt bên dưới trường văn bản phí dịch vụ. Theo chiều
ngang, bạn muốn TextView được căn chỉnh theo cạnh bắt đầu của thành phần mẹ.
7. Thêm một điều kiện ràng buộc theo chiều ngang vào TextView để ràng buộc cạnh bắt đầu của
TextView này với cạnh bắt đầu của thành phần mẹ.
app:layout_constraintStart_toStartOf="parent"
8. Thêm một điều kiện ràng theo chiều dọc vào TextView để ràng buộc cạnh trên của TextView
với cạnh dưới cùng của thành phần hiển thị chi phí dịch vụ View.
app:layout_constraintTop_toBottomOf="@id/cost_of_service"
Lưu ý rằng không có dấu cộng trong @id/cost_of_service vì mã nhận dạng đã được định nghĩa. lOMoAR cPSD| 58097008
Tại thời điểm này, ứng dụng vẫn còn rất sơ khai nhưng bạn đừng lo lắng về điều đó. Chỉ cần
đảm bảo tất cả thông tin cần thiết đều hiển thị trên màn hình và các chức năng đều hoạt động.
Bạn sẽ khắc phục phần nhìn của ứng dụng trong các lớp học lập trình sau.
9. Thêm mã nhận dạng tài nguyên vào TextView. Bạn sẽ cần tham chiếu đến thành phần hiển thị
này về sau khi bổ sung các thành phần hiển thị khác cũng như các điều kiện ràng buộc trên
các thành phần hiển thị này.
android:id="@+id/service_question"
Tại thời điểm này, tệp XML của bạn sẽ như bên dưới.
<?xml version="1.0" encoding="utf-8"?>
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp" tools:context=".MainActivity">
android:id="@+id/cost_of_service"
android:hint="Cost of Service"
android:layout_height="wrap_content" android:layout_width="160dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:inputType="numberDecimal"/>
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="How was
the service?" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/cost_of_service"/>
Thêm các tuỳ chọn tính tiền boa
Tiếp theo, bạn sẽ thêm các nút chọn cho phép người dùng lựa chọn tỷ lệ tính tiền boa khác nhau.
Bạn cần có 3 tuỳ chọn: • Amazing (Tuyệt vời) (20%) • Good (Tốt) (18%) • Okay (Ổn) (15%)
1. Quay lại với phần bố cục trong Android Studio để thêm RadioGroup và RadioButton vào ứng dụng.
2. Sau phần tử TextView nhưng vẫn ở trong ConstraintLayout, hãy bắt đầu nhập Android Studio sẽ cung cấp các đề xuất hữu ích, giúp bạn hoàn thành mã XML của mình. lOMoAR cPSD| 58097008
3. Đặt layout_width và layout_height của RadioGroup thành wrap_content.
4. Thêm tập mã nhận dạng tài nguyên vào @+id/tip_options.
5. Đóng thẻ mở bằng >.
6. Android Studio sẽ thêm . Tương tự như ConstraintLayout, thành phần
RadioGroup cũng chứa các thành phần khác bên trong. Vì vậy, bạn nên di chuyển thành phần này vào một dòng riêng.
7. Thiết lập ràng buộc để RadioGroup nằm bên dưới câu hỏi về chất lượng dịch vụ (theo chiều
dọc) và đến cạnh bắt đầu của thành phần mẹ (theo chiều ngang).
8. Đặt thuộc tính android:orientation thành vertical. Nếu muốn RadioButtons hiển thị trên một
dòng, bạn nên thiết lập thuộc tính này thành horizontal.
XML cho RadioGroup sẽ có dạng như sau:
android:id="@+id/tip_options"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/service_question"> Thêm nút chọn
1. Sau thuộc tính cuối cùng của RadioGroup, nhưng trước thẻ đóng , hãy thêm một RadioButton.
android:id="@+id/tip_options"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/service_question">
2. Đặt layout_width và layout_height thành wrap_content.
3. Gán mã nhận dạng tài nguyên cho RadioButton là @+id/option_twenty_percent.
4. Đặt phần văn bản thành Amazing (20%). 5. Đóng thẻ bằng />. lOMoAR cPSD| 58097008
android:id="@+id/tip_options"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/service_question"
app:layout_constraintStart_toStartOf="parent"
android:orientation="vertical">
android:id="@+id/option_twenty_percent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Amazing (20%)" /> Giờ đây một
RadioButton được đã thêm vào, bạn có thể sửa đổi XML để thêm 2 nút chọn cho
các tuỳ chọn Okay (15%) không? Good (18%) và XML của
RadioGroup và RadioButtons sẽ hiển thị như sau:
android:id="@+id/tip_options"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/service_question"
app:layout_constraintStart_toStartOf="parent"
android:orientation="vertical">
android:id="@+id/option_twenty_percent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Amazing (20%)" />
android:id="@+id/option_eighteen_percent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Good (18%)" />
android:id="@+id/option_fifteen_percent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Okay (15%)" /> lOMoAR cPSD| 58097008
Thêm lựa chọn mặc định
Hiện tại, chưa có tuỳ chọn tính tiền boa nào được chọn. Tốt nhất bạn nên thiết lập một trong
các nút chọn làm lựa chọn mặc định.
RadioGroup có một thuộc tính cho phép bạn chỉ định nút chọn nào sẽ được đánh dấu khi khởi
tạo. Đó là thuộc tính checkedButton và bạn sẽ thiết lập thuộc tính này thành mã nhận dạng tài
nguyên cho nút chọn mặc định bạn muốn.
1. Trên RadioGroup này, hãy đặt thuộc tính
android:checkedButton thành @id/option_twenty_percent.
android:id="@+id/tip_options"
android:checkedButton="@id/option_twenty_percent" ...
Chú ý, phần bố cục trong Design Editor (Trình chỉnh sửa thiết kế) đã được cập nhật. Tuỳ
chọn tính tiền boa 20% được thiết lập thành lựa chọn mặc định — thật tuyệt! Bây giờ, ứng
dụng đã bắt đầu giống một máy tính tiền boa!
Đây là giao diện của XML cho đến nay:
<?xml version="1.0" encoding="utf-8"?>
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent" android:layout_height="match_parent"
android:padding="16dp" tools:context=".MainActivity"> lOMoAR cPSD| 58097008
android:id="@+id/cost_of_service"
android:hint="Cost of Service"
android:layout_height="wrap_content" android:layout_width="160dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:inputType="numberDecimal"/>
android:id="@+id/service_question"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="How was the service?"
app:layout_constraintTop_toBottomOf="@id/cost_of_service"
app:layout_constraintStart_toStartOf="parent" />
android:id="@+id/tip_options"
android:checkedButton="@id/option_twenty_percent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/service_question"
app:layout_constraintStart_toStartOf="parent"
android:orientation="vertical">
android:id="@+id/option_twenty_percent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Amazing (20%)" />
android:id="@+id/option_eighteen_percent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Good (18%)" />
android:id="@+id/option_fifteen_percent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Okay (15%)" />
Hoàn thành những phần còn lại của bố cục
Hiện tại, bạn đang hoàn thiện phần cuối cùng của bố cục. Bạn sẽ thêm
Switch, Button và TextView để hiển thị số tiền boa. lOMoAR cPSD| 58097008
Thêm Nút chuyển để làm tròn số tiền boa
Tiếp theo, bạn sẽ dùng tiện ích Switch để cho phép người dùng chọn làm tròn hoặc không làm tròn số tiền boa.
Bạn muốn Switch này rộng bằng với thành phần mẹ. Bạn có thể cho rằng nên thiết lập chiều
rộng này thành match_parent. Như đã lưu ý trước đó, bạn không thể thiết lập giá trị thuộc tính
cho các thành phần giao diện người dùng trong ConstraintLayout thành match_parent. Thay
vào đó, bạn cần ràng buộc cạnh bắt đầu và cạnh kết thúc của thành phần hiển thị này, đồng
thời đặt chiều rộng thành 0dp. Khi đặt chiều rộng thành 0dp, hệ thống sẽ không tính chiều
rộng này mà chỉ cần đáp ứng các điều kiện ràng buộc đang thiết lập trên thành phần hiển thị này.
Lưu ý: Bạn không thể sử dụng match_parent cho bất kỳ thành phần hiển thị nào trong
ConstraintLayout. Thay vào đó, hãy sử dụng 0dp, nghĩa là đáp ứng các điều kiện ràng buộc.
1. Thêm phần tử Switch sau phần XML cho RadioGroup.
2. Như đã lưu ý ở trên, hãy đặt layout_width thành 0dp
3. Đặt layout_height thành wrap_content. Điều này sẽ làm cho thành phần hiển thị Switch cao
bằng phần nội dung bên trong.
4. Đặt thuộc tính id thành @+id/round_up_switch. lOMoAR cPSD| 58097008
5. Đặt thuộc tính text thành Round up tip?. Giá trị này sẽ được dùng làm nhãn cho Switch.
6. Cố định cạnh bắt đầu của Switch với cạnh bắt đầu của tip_options và cạnh kết thúc của nút
chuyển này với cạnh kết thúc của thành phần mẹ.
7. Cố định phần đỉnh của Switch với phần đáy của tip_options. 8. Đóng thẻ bằng />.
Sẽ tốt hơn nếu nút chuyển này được bật theo mặc định. Bạn có thể sử dụng thuộc
tính android:checked để làm việc này, trong đó các giá trị có thể sẽ là true (bật) hoặc false (tắt).
9. Đặt thuộc tính android:checked thành true.
Kết hợp tất cả lại với nhau, mã XML cho phần tử Switch sẽ có dạng như sau:
android:id="@+id/round_up_switch" android:layout_width="0dp"
android:layout_height="wrap_content" android:checked="true" android:text="Round up tip?"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@id/tip_options"
app:layout_constraintTop_toBottomOf="@id/tip_options" />
Lưu ý: Nếu di chuột qua phần tử Switch trong bố cục XML, bạn sẽ thấy một gợi ý trong
Android Studio cho biết: "Sử dụng SwitchCompat từ AppCompat hoặc SwitchMaterial từ
Thư viện Material". Bạn sẽ triển khai phần gợi ý này trong lớp học lập trình sau về cách tạo
ứng dụng tính tiền boa, vì vậy bạn có thể bỏ qua cảnh báo. Thêm nút Tính tiền
Tiếp theo, bạn sẽ thêm một Button để người dùng có thể yêu cầu tính tiền boa. Bạn muốn nút
này rộng bằng kích thước thành phần mẹ. Vì vậy, các điều kiện ràng buộc theo chiều ngang
và chiều rộng sẽ giống như nút chuyển Switch.
1. Thêm một Button sau Switch.
2. Đặt chiều rộng thành 0dp, như bạn đã làm cho Switch.
3. Đặt chiều cao thành wrap_content.
4. Gán mã nhận dạng tài nguyên @+id/calculate_button cho nút này và thiết lập phần văn bản thành "Calculate". lOMoAR cPSD| 58097008
5. Cố định cạnh trên của Button với cạnh dưới cùng của nút chuyển Round up tip? (Làm tròn tiền boa?) Switch.
6. Cố định cạnh bắt đầu với cạnh bắt đầu của thành phần mẹ và cạnh kết thúc với cạnh kết thúc của thành phần mẹ. 7. Đóng thẻ bằng />.
Dưới đây là toàn bộ mã XML cho tính năng Button Calculate (Tính tiền):
android:id="@+id/calculate_button" android:layout_width="0dp"
android:layout_height="wrap_content" android:text="Calculate"
app:layout_constraintTop_toBottomOf="@id/round_up_switch"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
Thêm kết quả tính tiền boa
Bạn sắp hoàn thành phần bố cục ứng dụng! Trong bước này, bạn sẽ thêm một TextView để
hiển thị kết quả tính tiền boa. Đặt thành phần hiển thị này bên dưới nút Calculate (Tính tiền)
và căn chỉnh dựa trên điểm kết thúc hay vì điểm bắt đầu như các thành phần giao diện người dùng khác.
1. Thêm một TextView kèm theo mã nhận dạng tài nguyên có tên tip_result và phần văn bản tương ứng là Tip Amount.
2. Cố định cạnh kết thúc của TextView với cạnh kết thúc của thành phần mẹ.
3. Cố định cạnh trên cùng với cạnh đáy của nút Calculate (Tính tiền). android:id="@+id/tip_result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/calculate_button"
android:text="Tip Amount" /> lOMoAR cPSD| 58097008
4. Chạy ứng dụng. Nó sẽ trông giống như ảnh chụp màn hình này.
Thật tuyệt vời! Một trải nghiệm đặc biệt nếu đây là lần đầu tiên bạn làm việc với XML!
Lưu ý rằng ứng dụng có thể không giống hoàn toàn như ảnh chụp màn hình vì các mẫu thiết
kế có thể đã thay đổi trong phiên bản Android Studio sau này. Nút Calculate (Tính tiền) hiện
vẫn chưa có tác dụng gì. Tuy nhiên, bạn có thể nhập chi phí, chọn tỷ lệ phần trăm tiền boa và
bật/tắt tuỳ chọn làm tròn tiền boa. Bạn sẽ bổ sung chức năng hoạt động cho nút Calculate
(Tính tiền) trong lớp học lập trình tiếp theo. Chúng ta sẽ quay lại với nút này sau! lOMoAR cPSD| 58097008
Áp dụng các phương pháp lập trình hay
Trích xuất các chuỗi
Bạn có thể nhìn thấy các cảnh báo về các chuỗi được mã hoá cứng. Hãy nhớ lại các lớp học
lập trình trước đây khi bạn trích xuất các chuỗi sang một tệp tài nguyên. Việc này sẽ giúp bạn
dễ dàng dịch ứng dụng sang các ngôn ngữ khác cũng như sử dụng lại chuỗi đó trong ứng
dụng. Kiểm tra lại activity_main.xml và trích xuất tất cả tài nguyên chuỗi.
1. Nhấp vào một chuỗi; di chuột qua biểu tượng bóng đèn màu vàng xuất hiện, sau đó nhấp vào
hình tam giác bên cạnh biểu tượng đó; chọn Extract String Resource (Trích xuất tài nguyên
chuỗi). Có thể sử dụng tên mặc định cho các tài nguyên chuỗi. Nếu muốn, bạn có thể sử dụng
các tên gợi tả hơn như amazing_service, good_service và ok_servicecho các tuỳ chọn tiền boa.
Bây giờ, hãy kiểm tra các tài nguyên chuỗi bạn vừa thêm.
2. Nếu cửa sổ Project (Dự án) không hiển thị, hãy nhấp vào thẻ Project (Dự án) ở phía bên trái cửa sổ.
3. Mở app > res > values > strings.xml để xem tất cả tài nguyên chuỗi của giao diện người dùng. Tip Time Cost of Service How was the service? Amazing (20%) Good (18%) Okay (15%) Round up tip? Calculate Tip Amount Định dạng lại XML
Android Studio cung cấp nhiều công cụ giúp bạn dọn dẹp mã và đảm bảo mã của bạn tuân
theo các quy ước lập trình được đề xuất.
1. Trong activity_main.xml, chọn Edit > Select All (Chỉnh sửa > Chọn tất cả).
2. Chọn Code > Reformat Code (Mã > Định dạng lại mã).
Thao tác này sẽ đảm bảo căn lề nhất quán và có thể sắp xếp lại mã XML của các thành phần
giao diện người dùng để gom nhóm mọi thứ với nhau. Chẳng hạn như đặt tất cả thuộc tính
android: của một phần tử lại với nhau.