🥇Vytvoření kalkulačky spropitného v Kotlin: jak to funguje?

Ukážeme vám, jak vytvořit jednoduchou aplikaci pro výpočet spropitného v Kotlinu. Přesněji Kotlin 1.3.21, Android 4, Android Studio 3. Článek bude zajímavý především pro ty, kteří začínají svou cestu ve vývoji aplikací pro Android. Umožňuje vám pochopit, co a jak funguje uvnitř aplikace.

Taková kalkulačka je užitečná, když potřebujete spočítat množství spropitného od společnosti, která se rozhodne strávit čas v restauraci nebo kavárně. Samozřejmě ne každý a ne vždy nechá čaj pro číšníky, to je spíše západní tradice, ale proces vývoje takové aplikace je každopádně zajímavý.

Připomínáme: pro všechny čtenáře "Habr" - sleva 10 000 rublů při zápisu do jakéhokoli kurzu Skillbox pomocí propagačního kódu "Habr".

Skillbox doporučuje: Praktický kurz "Mobilní vývojář PRO.

Takto vypadá aplikace, když je spuštěná:

Zadáte požadované procento z celkové částky, počet účastníků schůzky a získáte výsledek – množství spropitného, které stojí za to opustit.

Začínáme

Celé rozhraní aplikace vypadá takto:

První akce - projektová základna ke stažení. Otevřete jej v Android Studiu 3.0 nebo novějším. Stavíme a spouštíme projekt a vidíme bílou obrazovku. Vše je v pořádku, jak má být.

Uživatelské akce jsou v projektu zapsány v chronologickém pořadí, aby bylo vše jasné. Chcete-li jej zobrazit, otevřete Zobrazit -> Nástrojová okna -> Úkol.

Prostudujeme projekt a otevřeme colours.xml, abychom vyhodnotili barevnou paletu. strings.xml obsahuje textová data (titulky) a styles.xml obsahuje několik šablon písem.

Vývoj nákladové sekce

Otevřete activity_main.xml a přidejte níže uvedený kód do 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"/>

Nyní můžete stylizovat adresář hodnot nebo si hrát s barvami pomocí materiál.io nástroj.

Nyní projekt vypadá takto:

Jak vidíte, kalkulace nákladů je založena na údajích zadaných uživatelem.

Vývoj sekce účtu

Přidejte níže uvedený kód do LinearLayout za sekci výdajů (#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>

Za seznamem TODO zavřete LinearLayout a poté přidejte nový kód a umístěte jej do 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"/>

Protože hlavním úkolem aplikace je vypočítat individuální náklady pro každého z účastníků setkání v restauraci, hlavní roli hraje costPerPersonTextView.

EditText omezuje vstup na jeden řádek, tento parametr musí být nastaven na NumberDecimal inputType.

Spustíme projekt na zkoušku a zadáme parametry celkového poškození (rozbité šálky, talíře atd.)

Vývoj sekce "Lidé a tipy".

Chcete-li přidat volič výše spropitného, vložte níže uvedený kód do nové sekce 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>

Tento kód je nutný k přesnému výpočtu výše spropitného. Výchozí textová hodnota je 20. Tlačítka ImageButton jsou vybavena ikonami ve složce s oprávněním k zápisu.

Zkopírujte celou sekci a přidejte následující (#5):

ID ImageButton (subtractPeopleButton, addPeopleButton)
ID TextView (numberOfPeopleStaticText, numberOfPeopleTextView)
DefaultText for numberOfPeopleTextView (mělo by být 4).

Nyní při spuštění aplikace je možné přičíst částku faktury, fungují i tlačítka Přidat / Odečíst, ale zatím se nic neděje.

Přidat zobrazení

Otevřete MainActivity.kt a přidejte to do funkce 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čení tlačítek

Chcete-li přidat podporu pro kliknutí na tlačítka, implementujte View.OnClickListener na úrovni třídy (#7):

class MainActivity: AppCompatActivity(), View.OnClickListener {

Kompilace projektu právě teď nebude fungovat, musíte provést několik dalších kroků (# 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()
        }
    }

Co se týče tlačítek a přepínačů, Kotlin má vše zorganizované velmi cool! Přidejte níže uvedený kód do všech funkcí zvýšení a snížení
(#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()
        }
    }

Zde kód chrání inkrementační funkce s maximálními hodnotami (MAX_TIP & MAX_PEOPLE). Kromě toho kód chrání dekrementační funkce s minimálními hodnotami (MIN_TIP & MIN_PEOPLE).

Nyní připojíme tlačítka k posluchačům ve funkci initViews (#13):

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

Nyní můžete přidat celkové poškození, tipy a počet účastníků schůzky. No a teď to nejdůležitější...

Sekce nákladů

Tento kód vypočítá 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)
 
}

Zde se volá funkce, která umožňuje vzít v úvahu počet lidí ve společnosti a vypočítat spropitné (#15):

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

Spouštíme aplikaci. Vypadá a funguje skvěle. Ale mohlo by to být lepší.

Pokud se pokusíte odstranit částku účtu a poté zvýšit počet rad nebo přátel, aplikace se zhroutí, protože zatím neexistuje kontrola nulových nákladů. Navíc, pokud se pokusíte změnit fakturovanou částku, poplatky nebudou aktualizovány.

Závěrečné kroky

Přidat TextWatcher (#16):

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

Poté vložíme posluchače billEditText (#17):

billEditText.addTextChangedListener(toto)

Plus přidat kód pro spuštění 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) {}

No, teď už vše funguje! Gratulujeme, napsali jste svou vlastní „Tipovací kalkulačku“ v Kotlinu.

Skillbox doporučuje:

Dvouletý praktický kurz "Jsem PRO Web Developer".

Online kurz "C# vývojář".

Praktický roční kurz "PHP vývojář od 0 do PRO".

Zdroj: www.habr.com

Vytvoření kalkulačky spropitného v Kotlin: jak to funguje?