🥇 Jootrahakalkulaatori loomine Kotlinis: kuidas see töötab?

Räägime teile, kuidas Kotlinis jootraha arvutamiseks lihtsat rakendust luua. Täpsemalt Kotlin 1.3.21, Android 4, Android Studio 3. Artikkel on huvitav eelkõige neile, kes alustavad oma teekonda Androidi rakenduste arendamisega. See võimaldab teil mõista, mis ja kuidas see rakenduses töötab.

See kalkulaator tuleb kasuks, kui on vaja välja arvutada jootraha hulk ettevõttelt, kes otsustab restoranis või kohvikus aega veeta. Muidugi ei jäta kõik alati ettekandjatele jootraha, see on pigem lääne traditsioon, kuid sellise rakenduse väljatöötamise protsess on igal juhul huvitav.

Tuletame meelde: kõigile "Habr" lugejatele - allahindlus 10 000 rubla, kui registreerute mis tahes Skillboxi kursusele, kasutades sooduskoodi "Habr".

Skillbox soovitab: Praktiline kursus "Mobiiliarendaja PRO.

Selline näeb rakendus välja töötamisel:

Sisestate soovitud protsendi kogusummast, koosolekul osalejate arvu ja saate tulemuse - jootraha summa, mille peaksite jätma.

Alustamine

Rakenduse täielik liides näeb välja selline:

Esimene tegevus - projektibaasi allalaadimine. Avage see Android Studio 3.0 või uuemas versioonis. Ehitame ja käivitame projekti ning näeme valget ekraani. Kõik on hästi, nii see peabki olema.

Kasutaja tegevused on projektis kirjas kronoloogilises järjekorras, et kõik oleks selge. Selle vaatamiseks ava View -> Tool Windows -> TODO.

Uurime projekti ja avame värvipaleti hindamiseks colours.xml. strings.xml sisaldab tekstiandmeid (signatuure) ja styles.xml sisaldab mitmeid fondimalle.

Kulude osa arendamine

Avage activity_main.xml ja lisage LinearLayouti (nr 1) allolev kood:

<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"/>

Nüüd saate väärtuste kataloogi stiilida või värvidega mängida material.io tööriist.

Nüüd näeb projekt välja selline:

Nagu näete, arvutatakse kulud kasutaja sisestatud andmete põhjal.

Kontode sektsiooni arendamine

Lisage allolev kood jaotisesse LinearLayout pärast kulujaotist (nr 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>

Sulgeme LinearLayouti pärast ülesannete loendit ja lisame seejärel uue koodi, asetades selle LinearLayout'i (nr 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"/>

Kuna rakenduse põhiülesanne on arvutada iga restoranikogunemisel osaleja jaoks individuaalsed kulud, mängib peamist rolli costPerPersonTextView.

EditText piirab sisendit ühe reaga, selle parameetri väärtuseks tuleb määrata NumberDecimal inputType.

Käivitame projekti testimiseks ja sisestame üldiste kahjustuste (katkised tassid, taldrikud jne) parameetrid.

Jaotise “Inimesed ja näpunäited” arendamine

Vihje mahu valiku lisamiseks kleepige allolev kood uude jaotisesse LinearLayout (nr 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>

See koodiosa on vajalik jootraha täpseks arvutamiseks. Teksti vaikeväärtus on 20. ImageButtonid on varustatud ikoonidega kaustas, millel on kirjutamisõigused.

Kopeerige jaotis täielikult ja lisage järgmine (nr 5):

ImageButtoni ID-d (subtractPeopleButton, addPeopleButton)
TextView ID-d (numberOfPeopleStaticText, numberOfPeopleTextView)
DefaultText jaoks numberOfPeopleTextView (peab olema 4).

Nüüd on rakendust käivitades võimalus arve summa lisada, nupud “Lisa/Lahuta” ka töötavad, aga midagi veel ei juhtu.

Vaadete lisamine

Avage MainActivity.kt ja lisage see funktsioonile 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
 
}

Nuppude viimistlemine

Nuppude klõpsamise toe lisamiseks rakendame View.OnClickListeneri klassi tasemel (nr 7):

class Põhitegevus: AppCompatActivity(), View.OnClickListener {

Projekti ei ole praegu võimalik koostada, peate tegema veel mõned sammud (#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()
        }
    }

Nuppude ja lülitite osas korraldab Kotlin kõik väga lahedalt! Lisage allolev kood kõikidele suurendamis- ja kahandamisfunktsioonidele
(nr 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()
        }
    }

Siin kaitseb kood juurdekasvufunktsioone maksimaalsete väärtustega (MAX_TIP & MAX_PEOPLE). Lisaks kaitseb kood kahandamisfunktsioone minimaalsete väärtustega (MIN_TIP & MIN_PEOPLE).

Nüüd seostame nupud kuulajatega funktsioonis initViews (#13):

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

Nüüd saate lisada kogukahju, näpunäiteid ja koosolekul osalejate arvu. Noh, nüüd kõige tähtsam...

Kulude arvutamise osa

See kood arvutab kulud (nr 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)
 
}

Noh, siin nimetatakse funktsiooni, mis võimaldab arvestada ettevõtte inimeste arvu ja arvutada jootraha (#15):

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

Käivitame rakenduse. See näeb välja ja töötab suurepäraselt. Aga see võiks olla parem.

Kui proovite arve summat eemaldada ja seejärel jootraha või sõprade arvu suurendada, jookseb rakendus kokku, kuna nullkulu väärtust pole veel kontrollitud. Pealegi, kui proovite arve summat muuta, siis tasusid ei uuendata.

Viimased sammud

Lisa TextWatcher (nr 16):

class Põhitegevus: AppCompatActivity(), View.OnClickListener, TextWatcher {

Seejärel manustame billEditText kuulaja (nr 17):

billEditText.addTextChangedListener(this)

Lisaks lisame TextWatcheri käivitamiseks koodi (nr 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) {}

Noh, nüüd töötab absoluutselt kõik! Õnnitleme, olete kirjutanud Kotlini keeles oma “Jotrahakalkulaatori”.

Skillbox soovitab:

Kaheaastane praktiline kursus "Ma olen PRO veebiarendaja".

Veebikursus "C# arendaja".

Praktilise aasta kursus "PHP arendaja 0-st PRO-le".

Allikas: www.habr.com

Jootrahakalkulaatori loomine Kotlinis: kuidas see töötab?