🥇Ustvarjanje kalkulatorja napitnin v Kotlinu: kako deluje?

Povemo vam, kako ustvariti preprosto aplikacijo za izračun napitnin v Kotlinu. Natančneje, Kotlin 1.3.21, Android 4, Android Studio 3. Članek bo zanimiv predvsem za tiste, ki začenjajo svojo pot v razvoju aplikacij za Android. Omogoča vam razumevanje, kaj in kako deluje znotraj aplikacije.

Ta kalkulator vam bo prišel prav, ko boste morali izračunati znesek napitnine podjetja, ki se odloči preživeti čas v restavraciji ali kavarni. Seveda vsi ne pustijo vedno napitnine natakarjem, to je bolj zahodna tradicija, a je proces razvoja takšne aplikacije v vsakem primeru zanimiv.

Spomnimo: za vse bralce "Habr" - popust v višini 10 rubljev ob vpisu v kateri koli tečaj Skillbox s promocijsko kodo "Habr".

Skillbox priporoča: Praktični tečaj "Mobilni razvijalec PRO.

Tako izgleda aplikacija med delovanjem:

Vnesete želeni odstotek skupnega zneska, število udeležencev sestanka in dobite rezultat - znesek napitnine, ki ga morate pustiti.

Начинаем

Celoten vmesnik aplikacije izgleda takole:

Prvo dejanje - prenos baze projekta. Odprite ga v Android Studio 3.0 ali novejšem. Gradimo in zaženemo projekt ter vidimo bel zaslon. Vse je v redu, tako mora biti.

Uporabniška dejanja so zapisana v projektu v kronološkem vrstnem redu, da je vse jasno. Za ogled odprite Pogled -> Orodja Windows -> OPRAVILA.

Preučimo projekt in odpremo colors.xml, da ocenimo barvno paleto. strings.xml vsebuje besedilne podatke (podpise), styles.xml pa vsebuje več predlog pisav.

Razvoj stroškovnega dela

Odprite activity_main.xml in dodajte spodnjo kodo v 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"/>

Zdaj lahko oblikujete imenik vrednosti ali se igrate z barvami z uporabo orodje material.io.

Zdaj projekt izgleda takole:

Kot lahko vidite, se stroški izračunajo na podlagi podatkov, ki jih vnese uporabnik.

Razvoj oddelka računov

Dodajte spodnjo kodo v LinearLayout za razdelkom o stroških (št. 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>

LinearLayout zapremo po seznamu OPRAVIL in nato dodamo novo kodo, ki jo postavimo znotraj 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"/>

Ker je glavna naloga aplikacije izračunavanje individualnih stroškov za vsakega udeleženca gostinskega druženja, ima glavno vlogo costPerPersonTextView.

EditText omejuje vnos na eno vrstico, ta parameter mora biti nastavljen na NumberDecimal inputType.

Projekt zaženemo v test in vnesemo parametre za splošne poškodbe (zlomljene skodelice, krožniki itd.)

Razvoj razdelka »Ljudje in nasveti«.

Če želite dodati izbiro volumna konice, prilepite spodnjo kodo v nov razdelek LinearLayout (št. 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>

Ta del kode je potreben za natančen izračun zneska napitnine. Privzeta besedilna vrednost je 20. ImageButtons so opremljeni z ikonami v mapi z dovoljenji za pisanje.

Popolnoma kopirajte razdelek in dodajte naslednje (št. 5):

ID-ji ImageButton (odštejPeopleButton, addPeopleButton)
ID-ji TextView(numberOfPeopleStaticText, numberOfPeopleTextView)
Privzeto besedilo za numberOfPeopleTextView (mora biti 4).

Zdaj, ko zaženete aplikacijo, obstaja možnost dodajanja zneska računa, delujejo tudi gumbi »Dodaj/odštej«, vendar se še nič ne zgodi.

Dodajanje pogledov

Odprite MainActivity.kt in dodajte to v funkcijo 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
 
}

Dokončanje gumbov

Za dodajanje podpore za klike gumbov implementiramo View.OnClickListener na ravni razreda (št. 7):

class MainActivity: AppCompatActivity(), View.OnClickListener {

Projekta trenutno ne bo mogoče prevesti; opraviti morate še nekaj korakov (#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()
        }
    }

Kar zadeva gumbe in stikala, Kotlin organizira vse zelo kul! Spodnjo kodo dodajte vsem funkcijam inkrementa in dekrementa
(#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()
        }
    }

Tukaj koda ščiti funkcije povečanja z največjimi vrednostmi (MAX_TIP & MAX_PEOPLE). Poleg tega koda ščiti dekrementne funkcije z minimalnimi vrednostmi (MIN_TIP & MIN_PEOPLE).

Zdaj povezujemo gumbe s poslušalci v funkciji initViews (#13):

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

Zdaj lahko dodate skupne odškodnine, nasvete in število udeležencev sestanka. No, zdaj pa najpomembnejše...

Oddelek za izračun stroškov

Ta koda izračuna stroške (#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)
 
}

No, tukaj se imenuje funkcija, ki omogoča upoštevanje števila ljudi v podjetju in izračun napitnin (#15):

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

Zaženimo aplikacijo. Izgleda in deluje odlično. Ampak lahko bi bilo bolje.

Če poskušate odstraniti znesek računa in nato povečati število napitnin ali prijateljev, se bo aplikacija zrušila, ker še ni preverjanja vrednosti ničelnih stroškov. Poleg tega, če poskušate spremeniti znesek računa, stroški ne bodo posodobljeni.

Zadnji koraki

Dodaj TextWatcher (#16):

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

Nato vdelamo poslušalca billEditText (#17):

billEditText.addTextChangedListener(this)

Poleg tega dodamo kodo za izvajanje TextWatcherja (#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) {}

No, zdaj popolnoma vse deluje! Čestitamo, napisali ste svoj »Kalkulator napitnin« v Kotlinu.

Skillbox priporoča:

Dvoletni praktični tečaj "Sem spletni razvijalec PRO".

Spletni tečaj "C# razvijalec".

Praktični enoletni tečaj "PHP razvijalec od 0 do PRO".

Vir: www.habr.com

Ustvarjanje kalkulatorja napitnin v Kotlinu: kako deluje?