Ndërtimi i një kalkulatori bakshish në Kotlin: si funksionon?

Ne ju tregojmë se si të krijoni një aplikacion të thjeshtë për llogaritjen e bakshishit në Kotlin. Për të qenë më të saktë, Kotlin 1.3.21, Android 4, Android Studio 3. Artikulli do të jetë interesant, para së gjithash, për ata që fillojnë rrugëtimin e tyre në zhvillimin e aplikacioneve Android. Kjo ju lejon të kuptoni se çfarë dhe si funksionon brenda aplikacionit.

Një kalkulator i tillë është i dobishëm kur duhet të llogaritni sasinë e bakshisheve nga një kompani që vendos të kalojë kohë në një restorant ose kafene. Sigurisht, jo të gjithë dhe jo gjithmonë lënë çaj për kamarierët, kjo është më shumë një traditë perëndimore, por procesi i zhvillimit të një aplikacioni të tillë është interesant në çdo rast.

Kujtojmë: për të gjithë lexuesit e "Habr" - një zbritje prej 10 rubla kur regjistroheni në çdo kurs Skillbox duke përdorur kodin promovues "Habr".

Skillbox rekomandon: Kurse praktike "Zhvilluesi i celularit PRO.

Ja se si duket aplikacioni kur funksionon:

Ju futni përqindjen e dëshiruar të shumës totale, numrin e pjesëmarrësve në takim dhe merrni rezultatin - sasinë e këshillave që duhet të lihen.

Fillimi

Ndërfaqja e plotë e aplikacionit duket si kjo:




Veprimi i parë - shkarkimi i bazës së projektit. Hape atë në Android Studio 3.0 ose më vonë. Ne ndërtojmë dhe ekzekutojmë projektin dhe shohim një ekran të bardhë. Gjithçka është në rregull, siç duhet të jetë.

Veprimet e përdoruesit janë shkruar në projekt në rend kronologjik, në mënyrë që gjithçka të jetë e qartë. Për ta parë atë, hapni View -> Tool Windows -> TODO.

Ne studiojmë projektin dhe hapim ngjyrat.xml për të vlerësuar paletën e ngjyrave. strings.xml përmban të dhëna teksti (titrat), dhe styles.xml përmban disa shabllone fonti.

Zhvillimi i Seksionit të Kostos

Hapni activity_main.xml dhe shtoni kodin më poshtë në 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"/>

Tani mund të stiloni direktorinë e vlerave ose të luani me ngjyrat duke përdorur mjet material.io.

Tani projekti duket si ky:

Siç mund ta shihni, llogaritja e kostos bazohet në të dhënat e futura nga përdoruesi.

Zhvillimi i seksionit të llogarisë

Shtoni kodin më poshtë në LinearLayout pas seksionit të shpenzimeve (#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>

Mbyllni LinearLayout pas listës TODOs, dhe më pas shtoni kodin e ri, duke e vendosur atë brenda 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"/>

Meqenëse detyra kryesore e aplikacionit është llogaritja e kostove individuale për secilin prej pjesëmarrësve në mbledhjet në restorant, kostoPerPersonTextView luan rolin kryesor.

EditText kufizon hyrjen në një rresht, ky parametër duhet të vendoset në NumberDecimal inputType.

Fillojmë projektin për provën dhe futim parametrat e dëmit total (kupa të thyera, pjata, etj.)

Zhvillimi i seksionit "Njerëz dhe këshilla".

Për të shtuar një përzgjedhës të shumës së bakshishit, ngjisni kodin më poshtë në një seksion të ri LinearLayout (#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>

Kjo pjesë e kodit kërkohet për të llogaritur me saktësi shumën e bakshishit. Vlera e parazgjedhur e tekstit është 20. ImageButtons ofrohen me ikona në një dosje me leje shkrimi.

Kopjoni të gjithë seksionin dhe shtoni sa vijon (#5):

• ID-të e butonave të imazhit (zbresPeopleButton, shtoniPeopleButton)
• ID-të e TextView (numberOfPeopleStaticText, numberOfPeopleTextView)
• Teksti i paracaktuar për numrinOfPeopleTextView (duhet të jetë 4).

Tani me nisjen e aplikacionit mund të shtohet shuma e faturës, funksionojnë edhe butonat Shto/Zbris, por deri tani asgjë nuk ndodh.

Shto pamje

Hapni MainActivity.kt dhe shtoni këtë në funksionin 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
 
}

Përfundimi i butonave

Për të shtuar mbështetje për klikimet e butonave, zbatoni View.OnClickListener në nivelin e klasës (#7):

Klasa MainActivity: AppCompatActivity(), View.OnClickListener {

Përpilimi i projektit tani nuk do të funksionojë, ju duhet të kryeni disa hapa të tjerë (# 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()
        }
    }

Për sa i përket butonave dhe çelsave, Kotlin ka gjithçka të organizuar shumë mirë! Shtoni kodin më poshtë në të gjitha funksionet e rritjes dhe zvogëlimit
(#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()
        }
    }

Këtu kodi mbron funksionet e rritjes me vlera maksimale (MAX_TIP & MAX_PEOPLE). Për më tepër, kodi mbron funksionet e zvogëlimit me vlera minimale (MIN_TIP & MIN_PEOPLE).

Tani i lidhim butonat me dëgjuesit në funksionin initViews (#13):

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

Tani mund të shtoni dëmin total, këshilla dhe numrin e pjesëmarrësve në takim. Epo, tani gjëja më e rëndësishme ...

Seksioni i kostos

Ky kod llogarit kostot (#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)
 
}

Epo, këtu quhet një funksion që bën të mundur marrjen parasysh të numrit të njerëzve në kompani dhe llogaritjen e bakshishit (#15):

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

Ne hapim aplikacionin. Duket dhe funksionon shkëlqyeshëm. Por mund të ishte më mirë.

Nëse përpiqeni të hiqni shumën e faturës dhe më pas rritni numrin e këshillave ose miqve, aplikacioni do të prishet sepse nuk ka ende asnjë kontroll për kosto zero. Për më tepër, nëse përpiqeni të ndryshoni shumën e faturës, tarifat nuk do të përditësohen.

Hapat e fundit

Shto TextWatcher (#16):

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

Më pas ne vendosim dëgjuesin e billEditText (#17):

billEditText.addTextChangedListener(kjo)

Plus shtoni kodin për të ekzekutuar 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) {}

Epo, tani gjithçka funksionon! Urime, ju keni shkruar "Llogaritësi i bakshishit" tuaj në Kotlin.

Skillbox rekomandon:

• Kurse praktike dyvjeçare "Unë jam një zhvillues PRO Web".
• Kurs online "Zhvilluesi i C#".
• Kursi praktik i vitit "Zhvilluesi PHP nga 0 në PRO".

Burimi: www.habr.com