Izrada kalkulatora za napojnice u Kotlinu: kako to radi?

Pokazujemo vam kako izraditi jednostavnu aplikaciju za izračun napojnica u Kotlinu. Toč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ćuje vam da razumijete što i kako radi unutar aplikacije.

Takav kalkulator koristan je kada trebate izračunati iznos napojnica od tvrtke koja odluči provesti vrijeme u restoranu ili kafiću. Naravno, ne ostavljaju svi i ne ostavljaju uvijek čaj konobarima, to je više zapadna tradicija, ali proces razvoja takve aplikacije je u svakom slučaju zanimljiv.

Podsjećamo: za sve čitatelje "Habra" - popust od 10 000 rubalja pri upisu na bilo koji tečaj Skillbox koristeći promotivni kod "Habr".

Skillbox preporučuje: Praktični tečaj "Mobile Developer PRO.

Evo kako aplikacija izgleda kada je pokrenuta:

Unesete željeni postotak od ukupnog iznosa, broj sudionika na sastanku i dobijete rezultat - iznos napojnica koji treba ostaviti.

Početak rada

Cijelo sučelje aplikacije izgleda ovako:




Prva akcija - preuzimanje baze projekta. Otvorite ga u Android Studiju 3.0 ili novijem. Izgradimo i pokrenemo projekt i vidimo bijeli ekran. Sve je u redu, kako treba biti.

Korisničke radnje ispisane su u projektu kronološkim redom, tako da je sve pregledno. Za pregled otvorite Pogled -> Alatni prozori -> TODO.

Proučavamo projekt i otvaramo colors.xml kako bismo procijenili paletu boja. strings.xml sadrži tekstualne podatke (napise), a styles.xml sadrži nekoliko predložaka fontova.

Razvoj odjela troškova

Otvorite activity_main.xml i dodajte kod u nastavku 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 pomoću materijal.io alat.

Sada projekt izgleda ovako:

Kao što vidite, izračun troškova se temelji na podacima koje unese korisnik.

Razvoj dijela računa

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

Zatvorite LinearLayout nakon TODO popisa, a zatim dodajte novi kod, smjestivši ga unutar 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"/>

Budući da je glavni zadatak aplikacije izračunavanje individualnih troškova za svakog od sudionika druženja u restoranu, glavnu ulogu ima costPerPersonTextView.

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

Pokrećemo projekt za probu i upisujemo parametre ukupne štete (razbijene šalice, tanjuri i sl.)

Razvoj odjeljka "Ljudi i savjeti".

Da biste dodali birač iznosa napojnice, 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 potreban je za točan izračun iznosa napojnice. Zadana vrijednost teksta je 20. ImageButtons opremljeni su ikonama u mapi s dopuštenjima za pisanje.

Kopirajte cijeli odjeljak i dodajte sljedeće (#5):

• ID-ovi ImageButton (oduzmiPeopleButton, addPeopleButton)
• TextView ID-ovi (numberOfPeopleStaticText, numberOfPeopleTextView)
• Zadani tekst za numberOfPeopleTextView (trebao bi biti 4).

Sada, prilikom pokretanja aplikacije, moguće je dodati iznos fakture, rade i tipke Dodaj / Oduzmi, ali za sada se ništa ne događa.

Dodaj prikaze

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
 
}

Dovršavanje gumba

Da biste dodali podršku za klikove gumba, implementirajte View.OnClickListener na razini klase (#7):

klasa MainActivity: AppCompatActivity(), View.OnClickListener {

Sastavljanje projekta sada neće raditi, morate 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 gumba i prekidača, Kotlin ima sve organizirano 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). Osim toga, kod štiti funkcije smanjivanja s minimalnim vrijednostima (MIN_TIP & MIN_PEOPLE).

Sada povezujemo gumbe sa slušateljima 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 ukupnu štetu, savjete i broj sudionika sastanka. E, sad ono najvažnije...

Dio 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ćuje uzimanje u obzir broja ljudi u tvrtki i izračunavanje napojnice (#15):

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

Pokrećemo aplikaciju. Izgleda i radi sjajno. Ali moglo je bolje.

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

Završni koraci

Dodaj TextWatcher (#16):

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

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

billEditText.addTextChangedListener(this)

Plus dodajte kôd 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 sve radi! Čestitamo, napisali ste vlastiti "Kalkulator napojnica" u Kotlinu.

Skillbox preporučuje:

• Dvogodišnji praktični tečaj "Ja sam PRO web programer".
• Mrežni tečaj "C# programer".
• Praktični godišnji tečaj "PHP programer od 0 do PRO".

Izvor: www.habr.com