Att bygga en tipskalkylator i Kotlin: hur fungerar det?

Vi visar dig hur du skapar en enkel tipsberäkningsapplikation i Kotlin. För att vara mer exakt, Kotlin 1.3.21, Android 4, Android Studio 3. Artikeln kommer att vara intressant, först och främst, för dem som börjar sin resa med att utveckla Android-applikationer. Det låter dig förstå vad och hur som fungerar inuti applikationen.

En sådan kalkylator är användbar när du behöver beräkna mängden dricks från ett företag som bestämmer sig för att spendera tid på en restaurang eller ett café. Naturligtvis inte alla och inte alltid lämnar te för servitörer, detta är mer av en västerländsk tradition, men processen att utveckla en sådan applikation är intressant i alla fall.

Påminnelse: för alla läsare av "Habr" - en rabatt på 10 000 rubel när du anmäler dig till någon Skillbox-kurs med hjälp av "Habr"-kampanjkoden.

Skillbox rekommenderar: Praktisk kurs "Mobilutvecklare PRO.

Så här ser appen ut när den är igång:

Du anger önskad procentandel av totalbeloppet, antal deltagare i mötet och får resultatet - mängden dricks som ska finnas kvar.

Komma igång

Appens fullständiga gränssnitt ser ut så här:




Första åtgärden - projektbas nedladdning. Öppna den i Android Studio 3.0 eller senare. Vi bygger och driver projektet och ser en vit skärm. Allt är bra, som det ska vara.

Användaråtgärder skrivs i projektet i kronologisk ordning, så att allt är tydligt. För att se det, öppna Visa -> Verktygsfönster -> TODO.

Vi studerar projektet och öppnar colors.xml för att utvärdera färgpaletten. strings.xml innehåller textdata (bildtexter) och styles.xml innehåller flera teckensnittsmallar.

Kostnadssektionens utveckling

Öppna activity_main.xml och lägg till koden nedan i 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"/>

Nu kan du styla värdekatalogen eller leka med färger med hjälp av material.io verktyg.

Nu ser projektet ut så här:

Som du kan se är kostnadsberäkningen baserad på de uppgifter som användaren har angett.

Utveckling av kontodelen

Lägg till koden nedan i den linjära layouten efter kostnadssektionen (#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>

Stäng LinearLayout efter TODOs-listan och lägg sedan till den nya koden, placera den i 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"/>

Eftersom applikationens huvuduppgift är att beräkna de individuella kostnaderna för var och en av deltagarna i sammankomsterna i restaurangen, spelar costPerPersonTextView huvudrollen.

EditText begränsar inmatningen till en rad, denna parameter måste ställas in på NumberDecimal inputType.

Vi startar projektet för testet och anger parametrarna för den totala skadan (trasiga koppar, tallrikar, etc.)

Utveckling av avsnittet "Människor och tips".

För att lägga till en dricksbeloppsväljare, klistra in koden nedan i en ny LinearLayout-sektion (#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>

Denna kodbit krävs för att exakt beräkna dricksbeloppet. Standardtextvärdet är 20. ImageButtons är försedda med ikoner i en mapp med skrivbehörighet.

Kopiera hela avsnittet och lägg till följande (#5):

• ImageButton-id (subtraheraPeopleButton, addPeopleButton)
• TextView-ID (numberOfPeopleStaticText, numberOfPeopleTextView)
• DefaultText för NumberOfPeopleTextView (ska vara 4).

Nu när du startar applikationen är det möjligt att lägga till fakturabeloppet, Lägg till / Subtrahera knapparna fungerar också, men än så länge händer ingenting.

Lägg till vyer

Öppna MainActivity.kt och lägg till detta till initViews-funktionen (#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
 
}

Avslutar knapparna

För att lägga till stöd för knappklick, implementera View.OnClickListener på klassnivå (#7):

class MainActivity: AppCompatActivity(), View.OnClickListener {

Att kompilera projektet just nu kommer inte att fungera, du måste utföra några fler steg (# 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()
        }
    }

När det gäller knappar och omkopplare har Kotlin allt organiserat väldigt coolt! Lägg till koden nedan för alla inkrement- och minskningsfunktioner
(#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()
        }
    }

Här skyddar koden inkrementfunktioner med maximala värden (MAX_TIP & MAX_PEOPLE). Dessutom skyddar koden dekrementeringsfunktioner med minimivärden (MIN_TIP & MIN_PEOPLE).

Nu binder vi knapparna till lyssnarna i initViews-funktionen (#13):

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

Du kan nu lägga till total skada, tips och antalet mötesdeltagare. Nåväl, nu är det viktigaste...

Kostnadsdelen

Denna kod beräknar kostnaderna (#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)
 
}

Jo, här kallas en funktion som gör det möjligt att ta hänsyn till antalet personer i företaget och räkna ut dricks (#15):

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

Vi lanserar applikationen. Det ser ut och fungerar utmärkt. Men det kunde vara bättre.

Om du försöker ta bort räkningsbeloppet och sedan ökar antalet tips eller vänner kommer appen att krascha eftersom det inte finns någon kontroll för nollkostnader ännu. Dessutom, om du försöker ändra fakturabeloppet kommer avgifterna inte att uppdateras.

Sista stegen

Lägg till TextWatcher (#16):

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

Sedan bäddar vi in ​​billEditText-lyssnaren (#17):

billEditText.addTextChangedListener(this)

Plus lägg till kod för att köra 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) {}

Nåväl, nu fungerar allt! Grattis, du har skrivit din egen "Tipping Calculator" i Kotlin.

Skillbox rekommenderar:

• Tvåårig praktisk kurs "Jag är en PRO webbutvecklare".
• Onlinekurs "C#-utvecklare".
• Praktisk årskurs "PHP-utvecklare från 0 till PRO".

Källa: will.com