Kreiranje kalkulatora savjeta u Kotlinu: kako to funkcionira?

Govorimo vam kako napraviti jednostavnu aplikaciju za izračunavanje savjeta u Kotlinu. Tačnije, Kotlin 1.3.21, Android 4, Android Studio 3. Članak će biti zanimljiv prije svega za one koji počinju svoj put u razvoju Android aplikacija. Omogućava vam da shvatite šta i kako funkcionira unutar aplikacije.

Ovaj kalkulator će vam dobro doći kada trebate izračunati količinu napojnica od kompanije koja odluči da provede vrijeme u restoranu ili kafiću. Naravno, ne ostavljaju svi uvijek napojnicu konobarima, ovo je više zapadnjačka tradicija, ali proces razvoja takve aplikacije je u svakom slučaju zanimljiv.

Podsećamo: za sve čitaoce "Habra" - popust od 10 rubalja pri upisu na bilo koji Skillbox kurs koristeći "Habr" promotivni kod.

Skillbox preporučuje: Praktični kurs "Mobilni programer PRO.

Ovako aplikacija izgleda u radu:

Upisujete željeni procenat od ukupnog iznosa, broj učesnika sastanka i dobijate rezultat - iznos napojnice koji treba da ostavite.

Getting started

Kompletan interfejs aplikacije izgleda ovako:




Prva akcija - preuzimanje baze projekta. Otvorite ga u Android studiju 3.0 ili novijoj. Gradimo i pokrećemo projekat i vidimo bijeli ekran. Sve je u redu, tako i treba da bude.

Korisničke radnje su zapisane u projektu hronološkim redom kako bi sve bilo jasno. Da biste ga vidjeli, otvorite Prikaz -> Prozori alata -> TODO.

Proučavamo projekat i otvaramo colors.xml da procijenimo paletu boja. strings.xml sadrži tekstualne podatke (potpise), a styles.xml sadrži nekoliko šablona fontova.

Razvoj odjeljka troškova

Otvorite activity_main.xml i dodajte kod ispod u 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"/>

Sada možete stilizirati direktorij vrijednosti ili se igrati bojama koristeći materijal.io alat.

Sada projekat izgleda ovako:

Kao što vidite, troškovi se obračunavaju na osnovu podataka koje unese korisnik.

Razvoj odjeljka računa

Dodajte kod u nastavku u LinearLayout nakon odjeljka Expense (#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>

Zatvaramo LinearLayout nakon liste TODO-a, a zatim dodajemo novi kod, stavljajući ga unutar LinearLayouta (#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"/>

Budući da je glavni zadatak aplikacije izračunavanje pojedinačnih troškova za svakog učesnika u restoranskom okupljanju, glavnu ulogu ima costPerPersonTextView.

EditText ograničava unos na jedan red, ovaj parametar mora biti postavljen na NumberDecimal inputType.

Pokrećemo projekat za testiranje i unosimo parametre za opšta oštećenja (razbijene čaše, tanjiri itd.)

Razvoj odjeljka “Ljudi i savjeti”.

Da biste dodali odabir volumena savjeta, zalijepite donji kod u novi odjeljak 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>

Ovaj dio koda je neophodan za precizno izračunavanje iznosa napojnice. Podrazumevana vrednost teksta je 20. Dugmad za slike imaju ikone u fascikli sa dozvolama za pisanje.

U potpunosti kopirajte odjeljak i dodajte sljedeće (#5):

• ID-ovi ImageButton (oduzmiPeopleButton, addPeopleButton)
• TextView ID-ovi(numberOfPeopleStaticText, numberOfPeopleTextView)
• DefaultText za numberOfPeopleTextView (mora biti 4).

Sada, kada pokrenete aplikaciju, postoji mogućnost da dodate iznos fakture, dugmad „Dodaj/Oduzmi“ takođe rade, ali se još ništa ne dešava.

Dodavanje pogleda

Otvorite MainActivity.kt i dodajte ovo u funkciju 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
 
}

Završavanje dugmadi

Da bismo dodali podršku za klikove na dugme, implementiramo View.OnClickListener na nivou klase (#7):

class MainActivity: AppCompatActivity(), View.OnClickListener {

Neće biti moguće kompajlirati projekat trenutno, potrebno je izvršiti još nekoliko koraka (#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()
        }
    }

Što se tiče dugmadi i prekidača, Kotlin organizira sve vrlo cool! Dodajte kod u nastavku svim funkcijama povećanja i smanjenja
(#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()
        }
    }

Ovdje kod štiti funkcije povećanja s maksimalnim vrijednostima (MAX_TIP & MAX_PEOPLE). Uz to, kod štiti funkcije smanjenja minimalnim vrijednostima (MIN_TIP & MIN_PEOPLE).

Sada povezujemo dugmad sa slušaocima u funkciji initViews (#13):

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

Sada možete dodati ukupne štete, napojnice i broj učesnika sastanka. E, sad ono najvažnije...

Odjeljak za obračun troškova

Ovaj kod izračunava troškove (#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)
 
}

Pa, ovdje se poziva funkcija koja omogućava da se uzme u obzir broj ljudi u kompaniji i izračuna napojnica (#15):

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

Pokrenimo aplikaciju. Izgleda i radi odlično. Ali moglo bi biti bolje.

Ako pokušate ukloniti iznos računa, a zatim povećati broj savjeta ili prijatelja, aplikacija će se srušiti jer još nema provjere za vrijednost nulte cijene. Štaviše, ako pokušate promijeniti iznos računa, troškovi se neće ažurirati.

Završni koraci

Dodajte TextWatcher (#16):

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

Zatim ugrađujemo slušalac billEditText (#17):

billEditText.addTextChangedListener(ovo)

Plus dodajemo kod za izvršavanje TextWatcher-a (#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) {}

Pa, sada apsolutno sve radi! Čestitamo, napisali ste svoj vlastiti „Kalkulator savjeta“ u Kotlinu.

Skillbox preporučuje:

• Dvogodišnji praktični kurs "Ja sam PRO Web Developer".
• Online kurs "C# programer".
• Praktična godina kursa "PHP programer od 0 do PRO".

izvor: www.habr.com