Kami memberitahu anda cara membuat aplikasi mudah untuk mengira petua dalam Kotlin. Lebih tepat lagi, Kotlin 1.3.21, Android 4, Android Studio 3. Artikel itu akan menarik, pertama sekali, bagi mereka yang memulakan perjalanan mereka dalam pembangunan aplikasi Android. Ia membolehkan anda memahami perkara dan cara ia berfungsi di dalam aplikasi.
Kalkulator ini berguna apabila anda perlu mengira jumlah petua daripada syarikat yang memutuskan untuk menghabiskan masa di restoran atau kafe. Sudah tentu, tidak semua orang sentiasa memberikan tip kepada pelayan; ini lebih merupakan tradisi Barat, tetapi proses membangunkan aplikasi sedemikian menarik dalam apa jua keadaan.
Kami mengingatkan: untuk semua pembaca "Habr" - diskaun sebanyak 10 rubel apabila mendaftar dalam mana-mana kursus Skillbox menggunakan kod promosi "Habr".
Skillbox mengesyorkan: Kursus praktikal .
Inilah rupa aplikasi yang sedang beroperasi:
Anda masukkan peratusan yang diingini daripada jumlah keseluruhan, bilangan peserta mesyuarat, dan dapatkan keputusan - jumlah tip yang perlu anda tinggalkan.
Bermula
Antara muka aplikasi lengkap kelihatan seperti ini:
Tindakan pertama - . Bukanya dalam Android Studio 3.0 atau lebih baru. Kami membina dan melancarkan projek dan melihat skrin putih. Semuanya baik-baik saja, begitulah sepatutnya.
Tindakan pengguna ditulis dalam projek dalam susunan kronologi untuk menjelaskan semuanya. Untuk melihatnya, buka View -> Tool Windows -> TODO.
Kami mengkaji projek dan membuka colors.xml untuk menilai palet warna. strings.xml mengandungi data teks (tandatangan), dan styles.xml mengandungi beberapa templat fon.
Pembangunan bahagian kos
Buka activity_main.xml dan tambahkan kod di bawah pada 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"/>Kini anda boleh menggayakan direktori nilai atau bermain dengan warna menggunakan .
Sekarang projek itu kelihatan seperti ini:
Seperti yang anda lihat, kos dikira berdasarkan data yang dimasukkan oleh pengguna.
Pembangunan bahagian akaun
Tambahkan kod di bawah pada LinearLayout selepas Bahagian Perbelanjaan (#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>Kami menutup LinearLayout selepas senarai TODO, dan kemudian menambah kod baharu, meletakkannya di dalam 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"/>Memandangkan tugas utama aplikasi adalah untuk mengira kos individu untuk setiap peserta dalam perhimpunan restoran, costPerPersonTextView memainkan peranan utama.
EditText mengehadkan input kepada satu baris, parameter ini mesti ditetapkan kepada NumberDecimal inputType.
Kami melancarkan projek untuk ujian dan memasukkan parameter untuk kerosakan umum (cawan pecah, pinggan, dll.)
Pembangunan bahagian "Orang dan Petua".
Untuk menambah pemilihan volum tip, tampal kod di bawah ke bahagian LinearLayout baharu (#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>Bahagian kod ini diperlukan untuk mengira jumlah tip dengan tepat. Nilai teks lalai ialah 20. Butang Imej disediakan dengan ikon dalam folder dengan kebenaran menulis.
Salin bahagian sepenuhnya dan tambahkan yang berikut (#5):
- id ImageButton (tolakPeopleButton, addPeopleButton)
- id TextView(numberOfPeopleStaticText, numberOfPeopleTextView)
- DefaultText untuk numberOfPeopleTextView (mestilah 4).
Kini, apabila anda melancarkan aplikasi, terdapat peluang untuk menambah jumlah invois, butang "Tambah/Tolak" juga berfungsi, tetapi tiada apa yang berlaku lagi.
Menambah Pandangan
Buka MainActivity.kt dan tambahkan ini pada fungsi 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
}Menyelesaikan butang
Untuk menambah sokongan untuk klik butang, kami melaksanakan View.OnClickListener di peringkat kelas (#7):
kelas MainActivity: AppCompatActivity(), View.OnClickListener {
Ia tidak mungkin untuk menyusun projek sekarang; anda perlu melakukan beberapa langkah lagi (#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()
}
}
Dari segi butang dan suis, Kotlin mengatur segala-galanya dengan sangat keren! Tambahkan kod di bawah pada semua fungsi kenaikan dan pengurangan
(#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()
}
}Di sini kod melindungi fungsi kenaikan dengan nilai maksimum (MAX_TIP & MAX_PEOPLE). Selain itu, kod tersebut melindungi fungsi pengurangan dengan nilai minimum (MIN_TIP & MIN_PEOPLE).
Sekarang kita mengaitkan butang dengan pendengar dalam fungsi initViews (#13):
private fun initViews() {
...
addTipButton.setOnClickListener(this)
subtractTipButton.setOnClickListener(this)
addPeopleButton.setOnClickListener(this)
subtractPeopleButton.setOnClickListener(this)
//TODO #15: Bind EditText to TextWatcher
}
Anda kini boleh menambah jumlah kerosakan, petua dan bilangan peserta mesyuarat. Nah, sekarang perkara yang paling penting...
Bahagian pengiraan kos
Kod ini mengira kos (#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)
}Nah, di sini fungsi dipanggil yang memungkinkan untuk mengambil kira bilangan orang dalam syarikat dan mengira petua (#15):
private fun incrementTip() {
β¦
}
private fun decrementTip() {
β¦
}
private fun incrementPeople() {
β¦
}
private fun decrementPeople() {
β¦
}Mari kita lancarkan aplikasi. Ia kelihatan dan berfungsi dengan baik. Tetapi ia boleh menjadi lebih baik.
Jika anda cuba mengalih keluar jumlah bil dan kemudian menambah bilangan petua atau rakan, aplikasi akan ranap kerana belum ada semakan untuk nilai kos sifar. Lebih-lebih lagi, jika anda cuba menukar jumlah bil, caj tidak akan dikemas kini.
Langkah akhir
Tambah TextWatcher (#16):
kelas MainActivity: AppCompatActivity(), View.OnClickListener, TextWatcher {
Kemudian kami membenamkan pendengar billEditText (#17):
billEditText.addTextChangedListener(ini)
Selain itu, kami menambah kod untuk melaksanakan 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) {}
Nah, sekarang semuanya benar-benar berfungsi! Tahniah, anda telah menulis "Kalkulator Petua" anda sendiri dalam Kotlin.
Skillbox mengesyorkan:
- Kursus praktikal dua tahun .
- Kursus dalam talian .
- Kursus tahun praktikal .
Sumber: www.habr.com