🥇Membuat kalkulator tip di Kotlin: bagaimana cara kerjanya?

Kami tunjukkan cara membuat aplikasi penghitungan tip sederhana di Kotlin. Lebih tepatnya Kotlin 1.3.21, Android 4, Android Studio 3. Artikel ini akan menarik terutama bagi mereka yang memulai perjalanannya dalam mengembangkan aplikasi Android. Ini memungkinkan Anda untuk memahami apa dan bagaimana cara kerjanya di dalam aplikasi.

Kalkulator semacam itu berguna saat Anda perlu menghitung jumlah tip dari perusahaan yang memutuskan untuk menghabiskan waktu di restoran atau kafe. Tentu saja, tidak semua orang dan tidak selalu meninggalkan teh untuk pelayan, ini lebih merupakan tradisi Barat, tetapi proses pengembangan aplikasi semacam itu menarik.

Kami mengingatkan: untuk semua pembaca "Habr" - diskon 10 rubel saat mendaftar di kursus Skillbox apa pun menggunakan kode promosi "Habr".

Skillbox merekomendasikan: Tentu saja praktis "Pro Pengembang Seluler.

Inilah tampilan aplikasi saat dijalankan:

Anda memasukkan persentase yang diinginkan dari jumlah total, jumlah peserta rapat dan mendapatkan hasilnya - jumlah tip yang harus tersisa.

Memulai

Antarmuka lengkap aplikasi terlihat seperti ini:

Tindakan pertama - unduhan basis proyek. Buka di Android Studio 3.0 atau lebih baru. Kami membangun dan menjalankan proyek dan melihat layar putih. Semuanya baik-baik saja, sebagaimana mestinya.

Tindakan pengguna ditulis dalam proyek dalam urutan kronologis, sehingga semuanya menjadi jelas. Untuk melihatnya, buka View -> Tool Windows -> TODO.

Kami mempelajari proyek dan membuka colors.xml untuk mengevaluasi palet warna. strings.xml berisi data teks (caption), dan styles.xml berisi beberapa template font.

Pengembangan bagian biaya

Buka activity_main.xml dan tambahkan kode di bawah ke 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"/>

Sekarang Anda dapat menata direktori nilai atau bermain dengan warna menggunakan alat material.io.

Sekarang proyeknya terlihat seperti ini:

Seperti yang Anda lihat, perhitungan biaya didasarkan pada data yang dimasukkan oleh pengguna.

Pengembangan bagian akun

Tambahkan kode di bawah ini ke LinearLayout setelah Bagian Pengeluaran (#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>

Tutup LinearLayout setelah daftar TODO, lalu tambahkan kode baru, letakkan 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"/>

Karena tugas utama aplikasi ini adalah menghitung biaya individu untuk setiap peserta pertemuan di restoran, costPerPersonTextView memainkan peran utama.

EditText membatasi input ke satu baris, parameter ini harus disetel ke NumberDecimal inputType.

Kami memulai proyek untuk pengujian dan memasukkan parameter kerusakan total (cangkir pecah, piring, dll.)

Pengembangan bagian "Orang dan Tip".

Untuk menambahkan pemilih jumlah tip, rekatkan kode di bawah ini ke bagian LinearLayout baru (#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>

Potongan kode ini diperlukan untuk menghitung jumlah tip secara akurat. Nilai teks default adalah 20. ImageButtons dilengkapi dengan ikon di folder dengan izin menulis.

Salin seluruh bagian dan tambahkan yang berikut (#5):

Id ImageButton (kurangi PeopleButton, addPeopleButton)
ID TextView (numberOfPeopleStaticText, numberOfPeopleTextView)
DefaultText untuk numberOfPeopleTextView (harus 4).

Sekarang, saat memulai aplikasi, dimungkinkan untuk menambahkan jumlah faktur, tombol Tambah / Kurangi juga berfungsi, tetapi sejauh ini tidak terjadi apa-apa.

Tambahkan Tampilan

Buka MainActivity.kt dan tambahkan ini ke 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 tombol

Untuk menambahkan dukungan untuk klik tombol, implementasikan View.OnClickListener di tingkat kelas (#7):

kelas MainActivity: AppCompatActivity(), View.OnClickListener {

Mengkompilasi proyek sekarang tidak akan berfungsi, 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()
        }
    }

Dalam hal tombol dan sakelar, Kotlin mengatur semuanya dengan sangat keren! Tambahkan kode di bawah ini ke semua fungsi kenaikan dan penurunan
(#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 kode melindungi fungsi kenaikan dengan nilai maksimum (MAX_TIP & MAX_PEOPLE). Selain itu, kode tersebut melindungi fungsi pengurangan dengan nilai minimum (MIN_TIP & MIN_PEOPLE).

Sekarang kita mengikat tombol ke 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 sekarang dapat menambahkan total kerusakan, tip, dan jumlah peserta rapat. Nah, sekarang yang paling penting...

bagian Biaya

Kode ini menghitung biaya (#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 disebut fungsi yang memungkinkan untuk memperhitungkan jumlah orang di perusahaan dan menghitung tip (#15):

private fun incrementTip() {
 
…
 
}
 
private fun decrementTip() {
 
…
 
}
 
private fun incrementPeople() {
 
…
 
}
 
private fun decrementPeople() {
 
…
 
}

Kami meluncurkan aplikasi. Ini terlihat dan berfungsi dengan baik. Tapi itu bisa lebih baik.

Jika Anda mencoba menghapus jumlah tagihan dan kemudian menambah jumlah petunjuk atau teman, aplikasi akan macet karena belum ada cek untuk biaya nol. Selain itu, jika Anda mencoba mengubah jumlah tagihan, tagihan tidak akan diperbarui.

Langkah terakhir

Tambahkan TextWatcher (#16):

kelas MainActivity: AppCompatActivity(), View.OnClickListener, TextWatcher {

Kemudian kami menyematkan pendengar billEditText (#17):

billEditText.addTextChangedListener(ini)

Plus tambahkan kode untuk mengeksekusi 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 berfungsi! Selamat, Anda telah menulis "Kalkulator Tip" Anda sendiri di Kotlin.

Skillbox merekomendasikan:

Kursus praktik dua tahun "Saya adalah Pengembang Web PRO".

Kursus online "pengembang C#".

Kursus tahun praktis "Pengembang PHP dari 0 hingga PRO".

Sumber: www.habr.com

Membuat kalkulator tip di Kotlin: bagaimana cara kerjanya?