🥇Nggawe kalkulator tip ing Kotlin: kepiye cara kerjane?

Kita pitutur marang kowe carane nggawe aplikasi prasaja kanggo ngetung tips ing Kotlin. Luwih tepate, Kotlin 1.3.21, Android 4, Android Studio 3. Artikel bakal menarik, pisanan kabeh, kanggo wong-wong sing miwiti lelungan ing pangembangan aplikasi Android. Iki ngidini sampeyan ngerti apa lan cara kerjane ing aplikasi kasebut.

Kalkulator iki bakal migunani nalika sampeyan kudu ngetung jumlah tips saka perusahaan sing mutusake nglampahi wektu ing restoran utawa kafe. Mesthine, ora kabeh wong tansah menehi tip marang para pelayan, iki luwih saka tradisi Barat, nanging proses ngembangake aplikasi kasebut menarik ing kasus apa wae.

Kita ngelingake: kanggo kabeh sing maca "Habr" - diskon 10 rubel nalika ndhaptar kursus Skillbox nggunakake kode promosi "Habr".

Skillbox nyaranake: Kursus praktis "mobile developer PRO kab.

Iki minangka tampilan aplikasi ing operasi:

Sampeyan ngetik persentase sing dikarepake saka jumlah total, jumlah peserta rapat, lan entuk asil - jumlah tip sing kudu ditinggalake.

Miwiti

Antarmuka aplikasi lengkap katon kaya iki:

Tindakan pisanan - ngundhuh basis proyek. Bukak ing Android Studio 3.0 utawa luwih anyar. Kita mbangun lan miwiti proyek lan ndeleng layar putih. Kabeh apik, kudu kaya ngono.

Tumindak pangguna ditulis ing proyek kasebut kanthi urutan kronologis supaya kabeh jelas. Kanggo ndeleng, bukak View -> Tool Windows -> TODO.

Kita sinau proyek lan mbukak colors.xml kanggo ngevaluasi palet warna. strings.xml ngemot data teks (tanda tangan), lan styles.xml ngemot sawetara template font.

Pangembangan bagean biaya

Bukak activity_main.xml lan tambahake kode ing ngisor iki menyang 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"/>

Saiki sampeyan bisa gaya direktori nilai utawa muter karo werna nggunakake alat material.io.

Saiki proyek katon kaya iki:

Minangka sampeyan bisa ndeleng, biaya diitung adhedhasar data sing dilebokake pangguna.

Pangembangan bagean akun

Tambah kode ing ngisor iki menyang LinearLayout sawise Bagean Biaya (#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>

Kita nutup LinearLayout sawise dhaptar TODO, banjur nambah kode anyar, diselehake ing 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"/>

Wiwit tugas utama aplikasi kasebut yaiku ngetung biaya individu kanggo saben peserta ing rapat restoran, costPerPersonTextView main peran utama.

EditText matesi input kanggo siji baris, parameter iki kudu disetel kanggo NumberDecimal inputType.

Kita miwiti proyek kanggo tes lan ketik paramèter kanggo karusakan umum (cangkir rusak, piring, lsp.)

Pangembangan bagean "Wong lan Tips".

Kanggo nambah pilihan volume tip, tempel kode ing ngisor iki menyang bagean LinearLayout anyar (#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>

Bagean kode iki perlu kanggo ngitung jumlah tip kanthi akurat. Nilai teks standar yaiku 20. ImageButtons diwenehake karo lambang ing folder kanthi ijin nulis.

Salin bagean kasebut kanthi lengkap lan tambahake ing ngisor iki (#5):

ID ImageButton (subtractPeopleButton, addPeopleButton)
TextView id(numberOfPeopleStaticText, numberOfPeopleTextView)
DefaultText kanggo numberOfPeopleTextView (kudu 4).

Saiki, nalika sampeyan miwiti aplikasi kasebut, ana kesempatan kanggo nambah jumlah invoice, tombol "Tambah / Kurangi" uga bisa digunakake, nanging ora ana sing kedadeyan.

Nambah Tampilan

Bukak MainActivity.kt lan tambahake iki menyang 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
 
}

Rampung tombol

Kanggo nambah dhukungan kanggo klik tombol, kita ngleksanakake View.OnClickListener ing tingkat kelas (#7):

kelas MainActivity: AppCompatActivity(), View.OnClickListener {

Ora bisa ngumpulake proyek saiki; sampeyan kudu nindakake sawetara langkah liyane (#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()
        }
    }

Ing babagan tombol lan ngalih, Kotlin ngatur kabeh sing apik banget! Tambah kode ing ngisor iki kanggo kabeh fungsi increment lan decrement
(#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()
        }
    }

Ing kene kode nglindhungi fungsi increment kanthi nilai maksimal (MAX_TIP & MAX_PEOPLE). Kajaba iku, kode kasebut nglindhungi fungsi nyuda kanthi nilai minimal (MIN_TIP & MIN_PEOPLE).

Saiki kita nggandhengake tombol karo pamireng ing fungsi initViews (#13):

private fun initViews() {
 
...
 
addTipButton.setOnClickListener(this)
        subtractTipButton.setOnClickListener(this)
 
addPeopleButton.setOnClickListener(this)
        subtractPeopleButton.setOnClickListener(this)
 
//TODO #15: Bind EditText to TextWatcher
}

Sampeyan saiki bisa nambah total karusakan, tips, lan jumlah peserta rapat. Nah, saiki sing paling penting ...

Bagean pitungan biaya

Kode iki ngitung 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)
 
}

Ya, ing kene diarani fungsi sing ngidini sampeyan nganggep jumlah wong ing perusahaan lan ngetung tips (#15):

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

Ayo miwiti aplikasi. Iku katon lan dianggo gedhe. Nanging bisa uga luwih apik.

Yen sampeyan nyoba mbusak jumlah tagihan banjur nambah jumlah tips utawa kanca, aplikasi bakal nabrak amarga durung ana mriksa kanggo nilai biaya nol. Kajaba iku, yen sampeyan nyoba ngganti jumlah tagihan, biaya ora bakal dianyari.

Langkah pungkasan

Tambah TextWatcher (#16):

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

Banjur kita nampilake billEditText listener (#17):

billEditText.addTextChangedListener(iki)

Kajaba iku, kita nambah kode kanggo nglakokake 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) {}

Inggih, saiki pancen kabeh bisa! Sugeng, sampeyan wis nulis "Kalkulator Tip" dhewe ing Kotlin.

Skillbox nyaranake:

Kursus praktis rong taun "Aku Pengembang Web PRO".

Kursus online "Pengembang C#".

Kursus praktis setahun "Pengembang PHP saka 0 nganti PRO".

Source: www.habr.com

Nggawe kalkulator tip ing Kotlin: kepiye cara kerjane?