🥇Vytvorenie kalkulačky spropitného na Kotline: ako to funguje?

Povieme vám, ako vytvoriť jednoduchú aplikáciu na výpočet spropitného v jazyku Kotlin. Presnejšie, ide o Kotlin 1.3.21, Android 4, Android Studio 3. Článok bude zaujímavý predovšetkým pre tých, ktorí začínajú svoju cestu vo vývoji Android aplikácií. Pomáha pochopiť, čo a ako funguje vo vnútri aplikácie.

Takýto kalkulátor sa hodí, keď je potrebné spočítať výšku spropitného na firemnej akcii v reštaurácii alebo kaviarni. Samozrejme, nie všetci a nie vždy zanechávajú čašníkom spropitné, je to viac západná tradícia, ale proces vývoja takejto aplikácie je v každom prípade zaujímavý.

Pripomíname: pre všetkých čitateľov „Habr“ — zľava 10 000 rubľov pri zapísaní na akýkoľvek kurz Skillbox s promo kódom „Habr“.

Skillbox odporúča: Praktický kurz Mobilný vývojár PRO.

Takto vyzerá aplikácia počas prevádzky:

Zadáte požadované percento z celkovej sumy, počet účastníkov stretnutia a dostanete výsledok – sumu spropitného, ktorú by ste mali zanechať.

Začíname

Úplné rozhranie aplikácie vyzerá nasledovne:

Prvou činnosťou je načítanie základne projektu. Otvoríme ju v Android Studio 3.0 alebo novšej verzii. Vytvoríme a spustíme projekt a vidíme bielu obrazovku. Všetko je v poriadku, tak to má byť.

Akcie používateľa sú v projekte uvedené chronologicky, aby bolo všetko jasné. Pre jeho prehľad otvoríme View -> Tool Windows -> TODO.

Preskúmame projekt a otvoríme colors.xml, aby sme posúdili farebnú paletu. V strings.xml sú umiestnené textové údaje (popisy) a v styles.xml je niekoľko šablón písiem.

Vývoj sekcie nákladov

Otvoríme activity_main.xml a pridáme nižšie uvedený kód do LinearLayout (#1):

Teraz môžeme upraviť štýl adresára values alebo experimentovať s farbami, pomocou nástroja material.io.

Momentálne projekt vyzerá takto:

Ako vidíte, výpočet nákladov sa vykonáva na základe údajov, ktoré zadáva používateľ.

Vývoj sekcie účtov

Pridáme kód uvedený nižšie do LinearLayout po Expense Section (#2):

<! — TODO #3: Vybudovať sekciu účtov →

…

Zatvárame LinearLayout po zozname TODOs a potom pridáme nový kód, umiestňujúc ho do LinearLayout (#3):

Keďže hlavnou úlohou aplikácie je výpočet individuálnych nákladov pre každého účastníka posedenia v reštaurácii, kľúčovú úlohu zohráva costPerPersonTextView.

EditText obmedzuje vkladanie údajov na jeden riadok, táto parameter by mal mať hodnotu NumberDecimal inputType.

Spúšťame projekt na testovanie a zadávame parametre celkových škôd (rozbité šálky, taniere atď.)

Vývoj sekcie „Ľudia a tipy“

Aby sme pridali výber výšky tipov, vložíme nasledujúci kód do novej sekcie LinearLayout (#4):

Tento úsek kódu je nevyhnutný na presný výpočet sumy tipov. Predvolené textové hodnoty sú 20. ImageButtons sú vybavené ikonami v priečinku s oprávneniami na zápis.

Úplne kopírujeme sekciu a pridávame nasledujúce (#5):

ImageButton ids (subtractPeopleButton, addPeopleButton)
TextView ids (numberOfPeopleStaticText, numberOfPeopleTextView)
DefaultText pre numberOfPeopleTextView (má byť 4).

Teraz pri spustení aplikácie je možné pridať sumu účtu, tlačidlá „Pridať/Vyňať“ fungujú, ale zatiaľ nič sa nedeje.

Pridávame Views

Otvárame MainActivity.kt a pridávame toto do funkcie 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čujeme tlačidlá

Aby sme pridali podporu pre kliknutia na tlačidlá, implementujeme View.OnClickListener na úrovni triedy (#7):

class MainActivity: AppCompatActivity(), View.OnClickListener {

Skompilovať projekt práve teraz nebude možné, treba vykonať ešte niekoľko krokov (#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()
        }
    }

Pokiaľ ide o tlačidlá a prepínače, Kotlin je veľmi dobre organizovaný! Pridajte nižšie uvedený kód do všetkých funkcií increment a 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()
        }
    }

Tento kód zabezpečuje funkcie prírastkov s maximálnymi hodnotami (MAX_TIP & MAX_PEOPLE). Okrem toho kód zabezpečuje funkcie dekrécie s minimálnymi hodnotami (MIN_TIP & MIN_PEOPLE).

Teraz prepojte tlačidlá so sledovačmi v funkcii initViews (#13):

private fun initViews() {

...

addTipButton.setOnClickListener(this)
        subtractTipButton.setOnClickListener(this)

addPeopleButton.setOnClickListener(this)
        subtractPeopleButton.setOnClickListener(this)

//TODO #15: Bind EditText to TextWatcher
}

Teraz môžeme pridávať celkové náklady, sprepitné a počet účastníkov stretnutia. A teraz to najdôležitejšie…

Sekcia na výpočet nákladov

Tento kód vypočíta náklady (#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)

}

A tu sa volá funkcia, ktorá umožňuje zohľadniť počet ľudí v spoločnosti a vypočítať sprepitné (#15):

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

Spúšťame aplikáciu. Vyzerá a funguje výborne. No môže byť aj lepšie.

Ak sa pokúsite odstrániť sumu účtu a potom zvýšiť počet tipov alebo priateľov, aplikácia spadne, pretože pred tým neexistuje kontrola na nulovú hodnotu nákladov. Čo viac, ak sa pokúsite zmeniť sumu účtu, náklady sa neaktualizujú.

Finálne kroky

Pridávame TextWatcher (#16):

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

Potom vkladáme poslucháča do billEditText (#17):

billEditText.addTextChangedListener(this)

A pridávame kód na vykonávanie 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) {}

A teraz funguje úplne všetko! Gratulujem, napísali ste svoj vlastný „Kalkulačka spropitného“ na Kotline.

Skillbox odporúča:

Dvojročný praktický kurz „Ja som Webový vývojár PRO“.

Online kurz „C#-vývojár“.

Praktický ročný kurz „PHP vývojár od 0 do PRO“.

Zdroj: habr.com