Chúng tôi chỉ cho bạn cách tạo một ứng dụng tính tiền boa đơn giản trong Kotlin. Nói chính xác hơn là Kotlin 1.3.21, Android 4, Android Studio 3. Trước hết, bài viết sẽ rất thú vị đối với những ai bắt đầu hành trình phát triển ứng dụng Android. Nó cho phép bạn hiểu những gì và cách thức hoạt động bên trong ứng dụng.
Một máy tính như vậy rất hữu ích khi bạn cần tính toán số tiền boa từ một công ty quyết định dành thời gian ở nhà hàng hoặc quán cà phê. Tất nhiên, không phải tất cả mọi người và không phải lúc nào cũng pha trà cho người phục vụ, đây là truyền thống của phương Tây hơn, nhưng quá trình phát triển một ứng dụng như vậy trong mọi trường hợp đều rất thú vị.
Chúng tôi nhắc nhở: cho tất cả độc giả của "Habr" - giảm giá 10 rúp khi đăng ký bất kỳ khóa học Skillbox nào bằng mã khuyến mại "Habr".
Hộp kỹ năng khuyến nghị: khóa học thực hành .
Đây là giao diện của ứng dụng khi nó đang chạy:
Bạn nhập tỷ lệ phần trăm mong muốn của tổng số tiền, số lượng người tham gia cuộc họp và nhận được kết quả - số tiền boa đáng để lại.
Bắt đầu
Giao diện đầy đủ của ứng dụng trông như thế này:
Hành động đầu tiên - . Mở nó trong Android Studio 3.0 trở lên. Chúng tôi xây dựng và chạy dự án và thấy một màn hình trắng. Mọi thứ đều ổn, như nó phải vậy.
Các hành động của người dùng được viết trong dự án theo trình tự thời gian để mọi thứ đều rõ ràng. Để xem nó, mở View -> Tool Windows -> TODO.
Chúng tôi nghiên cứu dự án và mở tệp colors.xml để đánh giá bảng màu. strings.xml chứa dữ liệu văn bản (chú thích) và styles.xml chứa một số mẫu phông chữ.
Phát triển phần chi phí
Mở activity_main.xml và thêm mã bên dưới vào LinearLayout (#1):
<TextView
android_id="@+id/expensePerPersonTextView"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_paddingTop="30dp"
style="@style/h1Bold"
android_textColor="@color/colorAccent"
android_text="0"/>
<TextView
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_paddingBottom="25dp"
style="@style/h2"
android_textColor="@color/colorAccent"
android_text="@string/perPersonStaticText"/>Giờ đây, bạn có thể tạo kiểu cho thư mục giá trị hoặc chơi với màu bằng cách sử dụng .
Bây giờ dự án trông như thế này:
Như bạn có thể thấy, việc tính toán chi phí dựa trên dữ liệu do người dùng nhập vào.
Phát triển phần tài khoản
Thêm mã bên dưới vào LinearLayout sau Phần Chi phí (#2):
<LinearLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_orientation="vertical"
android_background="@color/colorAccent">
<! — TODO #3: Build Bill Section →
…
</LinearLayout>Đóng LinearLayout sau danh sách TODOs, sau đó thêm mã mới, đặt nó bên trong LinearLayout (#3):
<TextView
android_layout_margin="15dp"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_textColor="@color/colorWhite"
style="@style/h4"
android_text="@string/billStaticText"/>
<EditText
android_id="@+id/billEditText"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_textColor="@color/colorWhite"
android_inputType="numberDecimal"
android_maxLines="1"
style="@style/h2Bold"
android_text="0"/>Vì nhiệm vụ chính của ứng dụng là tính toán chi phí cá nhân cho từng người tham gia các cuộc tụ họp trong nhà hàng, nên costPerPersonTextView đóng vai trò chính.
EditText giới hạn đầu vào ở một dòng, tham số này phải được đặt thành Kiểu đầu vào NumberDecimal.
Chúng tôi bắt đầu dự án để thử nghiệm và nhập các thông số về tổng thiệt hại (chén, đĩa vỡ, v.v.)
Phát triển phần "Mọi người và Mẹo"
Để thêm bộ chọn số tiền boa, hãy dán mã bên dưới vào phần LinearLayout mới (#4):
<TextView
android_layout_margin="15dp"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_textColor="@color/colorWhite"
style="@style/h4"
android_text="@string/tipStaticText"/>
<LinearLayout
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_orientation="horizontal">
<ImageButton
android_id="@+id/subtractTipButton"
style="@style/operationButton"
android_layout_marginLeft="20dp"
android_layout_marginStart="20dp"
android_src="@drawable/subtract"/>
<TextView
android_id="@+id/tipTextView"
android_layout_margin="15dp"
android_layout_width="0dp"
android_layout_height="wrap_content"
android_textColor="@color/colorWhite"
android_layout_weight="1"
style="@style/h2Bold"
android_text="20%"/>
<ImageButton
android_id="@+id/addTipButton"
style="@style/operationButton"
android_layout_marginEnd="20dp"
android_layout_marginRight="20dp"
android_src="@drawable/add"/>
</LinearLayout>Đoạn mã này là bắt buộc để tính toán chính xác số tiền boa. Giá trị văn bản mặc định là 20. ImageButtons được cung cấp các biểu tượng trong một thư mục có quyền ghi.
Sao chép toàn bộ phần và thêm phần sau (#5):
- Id ImageButton (trừPeopleButton, addPeopleButton)
- Id TextView (numberOfPeopleStaticText, numberOfPeopleTextView)
- Văn bản mặc định cho numberOfPeopleTextView (nên là 4).
Bây giờ, khi bắt đầu ứng dụng, có thể thêm số tiền hóa đơn, các nút Thêm / Trừ cũng hoạt động, nhưng cho đến nay không có gì xảy ra.
Thêm lượt xem
Mở MainActivity.kt và thêm phần này vào hàm initViews (#6):
private fun initViews() {
expensePerPersonTextView = findViewById(R.id.expensePerPersonTextView)
billEditText = findViewById(R.id.billEditText)
addTipButton = findViewById(R.id.addTipButton)
tipTextView = findViewById(R.id.tipTextView)
subtractTipButton = findViewById(R.id.subtractTipButton)
addPeopleButton = findViewById(R.id.addPeopleButton)
numberOfPeopleTextView = findViewById(R.id.numberOfPeopleTextView)
subtractPeopleButton = findViewById(R.id.subtractPeopleButton)
//TODO #8: Bind Buttons to Listener
//TODO #16: Bind EditText to TextWatcher
}Kết thúc các nút
Để thêm hỗ trợ cho các lần nhấp vào nút, hãy triển khai View.OnClickListener ở cấp lớp (#7):
lớp MainActivity: AppCompatActivity(), View.OnClickListener {
Biên dịch dự án ngay bây giờ sẽ không hoạt động, bạn cần thực hiện thêm một số bước (#8):
override fun onClick(v: View?) {
when (v?.id) {
R.id.addTipButton -> incrementTip()
R.id.subtractTipButton -> decrementTip()
R.id.addPeopleButton -> incrementPeople()
R.id.subtractPeopleButton -> decrementPeople()
}
}
Về các nút và công tắc, Kotlin có mọi thứ được tổ chức rất tuyệt vời! Thêm mã bên dưới vào tất cả các hàm tăng và giảm
(#9 –#12):
private fun incrementTip() {
if (tipPercent != MAX_TIP) {
tipPercent += TIP_INCREMENT_PERCENT
tipTextView.text = String.format("%d%%", tipPercent)
}
}
private fun decrementTip() {
if (tipPercent != MIN_TIP) {
tipPercent -= TIP_INCREMENT_PERCENT
tipTextView.text = String.format("%d%%", tipPercent)
}
}
private fun incrementPeople() {
if (numberOfPeople != MAX_PEOPLE) {
numberOfPeople += PEOPLE_INCREMENT_VALUE
numberOfPeopleTextView.text = numberOfPeople.toString()
}
}
private fun decrementPeople() {
if (numberOfPeople != MIN_PEOPLE) {
numberOfPeople -= PEOPLE_INCREMENT_VALUE
numberOfPeopleTextView.text = numberOfPeople.toString()
}
}Ở đây mã bảo vệ các hàm gia tăng với giá trị tối đa (MAX_TIP & MAX_PEOPLE). Ngoài ra, mã bảo vệ các hàm giảm với giá trị nhỏ nhất (MIN_TIP & MIN_PEOPLE).
Bây giờ chúng tôi liên kết các nút với người nghe trong chức năng initViews (#13):
private fun initViews() {
...
addTipButton.setOnClickListener(this)
subtractTipButton.setOnClickListener(this)
addPeopleButton.setOnClickListener(this)
subtractPeopleButton.setOnClickListener(this)
//TODO #15: Bind EditText to TextWatcher
}
Giờ đây, bạn có thể thêm tổng thiệt hại, mẹo và số lượng người tham gia cuộc họp. Chà, bây giờ điều quan trọng nhất...
phần chi phí
Mã này tính toán chi phí (#14):
private fun calculateExpense() {
val totalBill = billEditText.text.toString().toDouble()
val totalExpense = ((HUNDRED_PERCENT + tipPercent) / HUNDRED_PERCENT) * totalBill
val individualExpense = totalExpense / numberOfPeople
expensePerPersonTextView.text = String.format("$%.2f", individualExpense)
}Chà, đây là một hàm được gọi để có thể tính đến số lượng người trong công ty và tính tiền boa (#15):
private fun incrementTip() {
…
}
private fun decrementTip() {
…
}
private fun incrementPeople() {
…
}
private fun decrementPeople() {
…
}Chúng tôi khởi chạy ứng dụng. Nó trông và hoạt động tuyệt vời. Nhưng nó có thể tốt hơn.
Nếu bạn cố gắng xóa số tiền trong hóa đơn và sau đó tăng số lượng gợi ý hoặc số lượng bạn bè, ứng dụng sẽ gặp sự cố vì chưa kiểm tra chi phí bằng không. Ngoài ra, nếu bạn cố gắng thay đổi số tiền trên hóa đơn, các khoản phí sẽ không được cập nhật.
bước cuối cùng
Thêm TextWatcher (#16):
lớp MainActivity: AppCompatActivity(), View.OnClickListener, TextWatcher {
Sau đó, chúng tôi nhúng trình nghe billEditText (#17):
billEditText.addTextChangedListener(cái này)
Ngoài ra, hãy thêm mã để thực thi TextWatcher (#18):
override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
if (!billEditText.text.isEmpty()) {
calculateExpense()
}
}
override fun afterTextChanged(s: Editable?) {}
override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}
Vâng, bây giờ mọi thứ hoạt động! Xin chúc mừng, bạn đã viết "Máy tính tiền boa" của riêng mình bằng Kotlin.
Hộp kỹ năng khuyến nghị:
- Khóa học thực hành hai năm .
- Khóa học trực tuyến .
- Khóa học năm thực tế .
Nguồn: www.habr.com