Vihjelaskimen rakentaminen Kotlinissa: miten se toimii?

Näytämme sinulle, kuinka voit luoda yksinkertaisen kärjenlaskentasovelluksen Kotlinissa. Tarkemmin sanottuna Kotlin 1.3.21, Android 4, Android Studio 3. Artikkeli on mielenkiintoinen ennen kaikkea niille, jotka aloittavat matkansa Android-sovellusten kehittämisessä. Sen avulla voit ymmärtää, mikä ja miten toimii sovelluksen sisällä.

Tällainen laskin on hyödyllinen, kun sinun on laskettava tippien määrä yritykseltä, joka päättää viettää aikaa ravintolassa tai kahvilassa. Tietenkään kaikki eivät eivätkä aina jätä teetä tarjoilijoille, tämä on enemmän länsimaista perinnettä, mutta tällaisen sovelluksen kehittämisprosessi on joka tapauksessa mielenkiintoinen.

Muistutamme sinua: kaikille "Habrin" lukijoille - 10 000 ruplan alennus ilmoittautuessaan mille tahansa Skillbox-kurssille "Habr" -tarjouskoodilla.

Skillbox suosittelee: Käytännön kurssi "Mobile Developer PRO.

Tältä sovellus näyttää, kun se on käynnissä:

Syötät haluamasi prosenttiosuuden kokonaismäärästä, kokouksen osallistujien lukumäärän ja saat tuloksen - tippien määrän, joka tulisi jättää.

Aloittaminen

Sovelluksen koko käyttöliittymä näyttää tältä:




Ensimmäinen toimenpide - projektipohjan lataus. Avaa se Android Studio 3.0:ssa tai uudemmassa. Rakennamme ja toteutamme projektin ja näemme valkoisen näytön. Kaikki on hyvin, kuten pitääkin.

Käyttäjän toimet kirjoitetaan projektiin kronologisessa järjestyksessä, jotta kaikki on selvää. Voit tarkastella sitä avaamalla Näytä -> Työkaluikkunat -> TODO.

Tutkimme projektia ja avaamme colors.xml:n väripaletin arvioimiseksi. strings.xml sisältää tekstidataa (tekstit) ja styles.xml sisältää useita kirjasinmalleja.

Kustannusosion kehittäminen

Avaa activity_main.xml ja lisää alla oleva koodi LinearLayoutiin (#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"/>

Nyt voit muokata arvohakemistoa tai leikkiä väreillä material.io työkalu.

Nyt projekti näyttää tältä:

Kuten näette, kustannuslaskenta perustuu käyttäjän syöttämiin tietoihin.

Tiliosion kehittäminen

Lisää alla oleva koodi LinearLayoutiin kuluosion jälkeen (#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>

Sulje LinearLayout TEHTÄVÄT-luettelon jälkeen ja lisää sitten uusi koodi asettamalla se LinearLayoutiin (#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"/>

Koska sovelluksen päätehtävänä on laskea yksittäiset kustannukset jokaiselle ravintolassa järjestettäville kokoontumisille, on costPersonTextView päärooli.

EditText rajoittaa syöttämisen yhdelle riville, tämän parametrin arvoksi on asetettava NumberDecimal inputType.

Aloitamme testin projektin ja syötämme kokonaisvaurion parametrit (rikkinäiset kupit, lautaset jne.)

"Ihmiset ja vinkit" -osion kehittäminen

Lisää tippimäärän valitsin liittämällä alla oleva koodi uuteen LinearLayout-osioon (#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>

Tämä koodinpätkä tarvitaan tippin määrän tarkkaan laskemiseen. Tekstin oletusarvo on 20. ImageButtons on varustettu kuvakkeilla kansiossa, jossa on kirjoitusoikeudet.

Kopioi koko osio ja lisää seuraava (#5):

• ImageButton-tunnukset (subtractPeopleButton, addPeopleButton)
• TextView-tunnukset (numberOfPeopleStaticText, numberOfPeopleTextView)
• NumberOfPeopleTextView-oletusteksti (pitäisi olla 4).

Nyt sovellusta käynnistettäessä on mahdollista lisätä laskun summa, myös Lisää/Vähennä-painikkeet toimivat, mutta toistaiseksi mitään ei tapahdu.

Lisää näkymiä

Avaa MainActivity.kt ja lisää tämä initViews-funktioon (#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
 
}

Painikkeiden viimeistely

Jos haluat lisätä tuen painikkeen napsautuksiin, ota View.OnClickListener käyttöön luokkatasolla (#7):

class MainActivity: AppCompatActivity(), View.OnClickListener {

Projektin kääntäminen juuri nyt ei toimi, sinun on suoritettava vielä muutama vaihe (# 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()
        }
    }

Painikkeiden ja kytkimien suhteen Kotlinilla on kaikki hyvin järjestetty! Lisää alla oleva koodi kaikkiin lisäys- ja vähennystoimintoihin
(#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()
        }
    }

Tässä koodi suojaa lisätoimintoja maksimiarvoilla (MAX_TIP & MAX_PEOPLE). Lisäksi koodi suojaa vähennysfunktioita minimiarvoilla (MIN_TIP & MIN_PEOPLE).

Nyt sidomme painikkeet kuuntelijoihin initViews-toiminnossa (#13):

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

Voit nyt lisätä kokonaisvahingon, vinkit ja kokouksen osallistujien määrän. No, nyt se tärkein...

Kustannusosio

Tämä koodi laskee kustannukset (#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)
 
}

No, tässä kutsutaan funktiota, jonka avulla voidaan ottaa huomioon yrityksen henkilömäärä ja laskea kärki (#15):

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

Käynnistämme sovelluksen. Näyttää ja toimii loistavasti. Mutta se voisi olla parempi.

Jos yrität poistaa laskun summan ja lisätä sitten vihjeiden tai ystävien määrää, sovellus kaatuu, koska nollakuluja ei ole vielä tarkistettu. Lisäksi jos yrität muuttaa laskun summaa, maksut eivät päivity.

Viimeiset vaiheet

Lisää TextWatcher (#16):

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

Sitten upotamme billEditText-kuuntelijan (#17):

billEditText.addTextChangedListener(this)

Lisäksi lisää koodi suorittaaksesi TextWatcherin (#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 nyt kaikki toimii! Onnittelut, olet kirjoittanut oman "Triplaskurin" Kotliniin.

Skillbox suosittelee:

• Kahden vuoden käytännön kurssi "Olen PRO Web Developer".
• Verkkokurssi "C#-kehittäjä".
• Käytännön vuoden kurssi "PHP-kehittäjä 0:sta PRO".

Lähde: will.com