🥇Vytvorenie tipovacej kalkulačky v Kotline: ako to funguje?

Ukážeme vám, ako vytvoriť jednoduchú aplikáciu na výpočet prepitného v Kotlin. Konkrétne, Kotlin 1.3.21. Android 4, Android Štúdio 3. Tento článok bude zaujímavý predovšetkým pre tých, ktorí práve začínajú svoju cestu vo vývoji. Android-aplikácie. Umožňuje vám pochopiť, čo a ako v rámci aplikácie funguje.

Takáto kalkulačka je užitočná, keď potrebujete vypočítať množstvo tipov od spoločnosti, ktorá sa rozhodne stráviť čas v reštaurácii alebo kaviarni. Samozrejme, nie každý a nie vždy nechá čaj pre čašníkov, ide skôr o západnú tradíciu, ale proces vývoja takejto aplikácie je v každom prípade zaujímavý.

Pripomíname vám: pre všetkých čitateľov „Habr“ - zľava 10 000 rubľov pri registrácii do akéhokoľvek kurzu Skillbox pomocou propagačného kódu „Habr“.

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

Takto vyzerá aplikácia, keď je spustená:

Zadáte požadované percento z celkovej sumy, počet účastníkov stretnutia a získate výsledok - množstvo sprepitného, ktoré by vám malo zostať.

Začíname

Celé rozhranie aplikácie vyzerá takto:

Prvá akcia - stiahnutie projektovej základneOtvoríme ho v Android Studio 3.0 alebo novšie. Zostavíme a spustíme projekt a vidíme bielu obrazovku. Všetko je v poriadku, takto to má byť.

Akcie používateľa sú v projekte uvedené chronologicky, aby bolo všetko prehľadné. Ak si ich chcete zobraziť, otvorte Zobraziť -> Nástroj Windows -> ÚLOHY.

Preštudujeme si projekt a otvoríme súbor colors.xml na vyhodnotenie farebnej palety. strings.xml obsahuje textové údaje (titulky) a styles.xml obsahuje niekoľko šablón písiem.

Vývoj nákladovej sekcie

Otvorte activity_main.xml a pridajte nižšie 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"/>

Teraz môžete štylizovať adresár hodnôt alebo hrať s farbami pomocou materiál.io nástroj.

Teraz projekt vyzerá takto:

Ako vidíte, výpočet nákladov je založený na údajoch zadaných používateľom.

Vývoj sekcie účtu

Pridajte nižšie uvedený kód do LinearLayout za sekciu výdavkov (#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>

Zatvorte LinearLayout po zozname TODOs a potom pridajte nový kód umiestnením 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"/>

Keďže hlavnou úlohou aplikácie je vypočítať individuálne náklady pre každého z účastníkov stretnutí v reštaurácii, hlavnú úlohu zohráva costPerPersonTextView.

EditText obmedzuje vstup na jeden riadok, tento parameter musí byť nastavený na NumberDecimal inputType.

Spustíme projekt na skúšku a zadáme parametre celkového poškodenia (rozbité šálky, taniere atď.)

Vývoj sekcie „Ľudia a tipy“.

Ak chcete pridať volič sumy prepitného, prilepte nižšie uvedený kód do novej sekcie 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 potrebný na presný výpočet sumy prepitného. Predvolená textová hodnota je 20. ImageButtons sú vybavené ikonami v priečinku s oprávneniami na zápis.

Skopírujte celú sekciu a pridajte nasledujúce (#5):

ID obrázkových tlačidiel (subtractPeopleButton, addPeopleButton)
ID TextView (numberOfPeopleStaticText, numberOfPeopleTextView)
DefaultText for numberOfPeopleTextView (malo by byť 4).

Teraz pri spustení aplikácie je možné pripočítať sumu faktúry, fungujú aj tlačidlá Pridať / Odčítať, no zatiaľ sa nič nedeje.

Pridať zobrazenia

Otvorte MainActivity.kt a pridajte to 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čenie tlačidiel

Ak chcete pridať podporu pre kliknutia na tlačidlá, implementujte View.OnClickListener na úrovni triedy (#7):

class MainActivity: AppCompatActivity(), View.OnClickListener {

Kompilácia projektu práve teraz nebude fungovať, musíte vykonať niekoľko ďalších 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 spínače, Kotlin má všetko organizované veľmi cool! Pridajte nižšie uvedený kód do všetkých funkcií zvýšenia a zníženia
(#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()
        }
    }

Tu kód chráni inkrementačné funkcie s maximálnymi hodnotami (MAX_TIP & MAX_PEOPLE). Okrem toho kód chráni dekrementačné funkcie s minimálnymi hodnotami (MIN_TIP & MIN_PEOPLE).

Teraz pripojíme tlačidlá k poslucháčom vo 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ôžete pridať celkové poškodenie, tipy a počet účastníkov stretnutia. No a teraz to najdôležitejšie...

Sekcia nákladov

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

Tu sa volá funkcia, ktorá umožňuje brať do úvahy počet ľudí v spoločnosti a vypočítať prepitné (#15):

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

Spustíme aplikáciu. Vyzerá a funguje skvele. Ale mohlo by to byť 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 zatiaľ neexistuje kontrola nulových nákladov. Okrem toho, ak sa pokúsite zmeniť sumu faktúry, poplatky sa neaktualizujú.

Záverečné kroky

Pridať TextWatcher (#16):

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

Potom vložíme poslucháč billEditText (#17):

billEditText.addTextChangedListener(this)

Plus pridajte kód na spustenie aplikácie 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, teraz všetko funguje! Gratulujeme, napísali ste si vlastnú „Tipovaciu kalkulačku“ v Kotline.

Skillbox odporúča:

Dvojročný praktický kurz "Som PRO Web Developer".

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

Praktický ročníkový kurz "PHP vývojár od 0 po PRO".

Zdroj: hab.com