Oprettelse af en tipsberegner i Kotlin: hvordan fungerer det?

Vi forklarer, hvordan man opretter en simpel applikation til beregning af tip i Kotlin. Mere præcist, Kotlin 1.3.21, Android 4, Android Studio 3. Artiklen vil være interessant, især for dem, der starter deres rejse inden for Android-applikationsudvikling. Den giver en forståelse for, hvordan og hvad der fungerer inde i applikationen.

En sådan lommeregner vil være nyttig, når man skal beregne tips fra en gruppe, der har besluttet at tilbringe tid på en restaurant eller café. Selvfølgelig giver ikke alle og ikke altid drikkepenge til tjenere, det er mere en vestlig tradition, men udviklingen af en sådan applikation er uanset hvad interessant.

Vi minder om: til alle læsere af 'Habr' — rabat på 10.000 rubler ved tilmelding til et hvilket som helst Skillbox-kursus med rabatkoden 'Habr'.

Skillbox anbefaler: Praktisk kursus Mobiludvikler PRO.

Sådan ser applikationen ud under drift:

Du indtaster ønsket procentdel af det samlede beløb, antallet af deltagere og får resultatet — tipbeløbet, som bør gives.

Lad os begynde

Det fulde interface af applikationen ser således ud:




Den første handling — indlæsning af projektets grundstruktur. Åbn den i Android Studio 3.0 eller nyere. Byg og kør projektet, og du ser en hvid skærm. Alt er normalt, sådan skal det være.

Brugerens handlinger er skrevet i projektet i kronologisk rækkefølge, så alt er forståeligt. For at se dem åbner du View -> Tool Windows -> TODO.

Lad os undersøge projektet og åbne colors.xml for at vurdere farvepaletten. I strings.xml er tekstdataene (etiketter) placeret, og styles.xml indeholder flere skrifttype-maler.

Udvikling af udgiftsafsnittet

Åbn activity_main.xml og tilføj koden nedenfor til LinearLayout (#1):

Nu kan vi justere stilen i values-mappen eller lege med farverne ved hjælp af værktøjet material.io.

Nu ser projektet sådan ud:

Som du kan se, beregnes udgiften ud fra de data, som brugeren indtaster.

Udvikling af regningsafsnittet

Tilføj koden, der er angivet nedenfor, til LinearLayout efter Expense Section (#2):

<! — TODO #3: Byg Bill Sektion →
 
…

Vi afslutter LinearLayout efter TODO-listen og tilføjer derefter ny kode, som placeres inden for LinearLayout (#3):

Da appens hovedopgave er at beregne individuelle omkostninger for hver deltager i restaurantbesøget, er costPerPersonTextView af stor betydning.

EditText begrænser dataindsamlingen til én linje, og denne parameter skal have værdien NumberDecimal inputType.

Vi kører projektet til test og indtaster parametrene for det samlede tab (knuste kopper, tallerkener osv.)

Udvikling af sektionen 'Mennesker og drikkepenge'

For at tilføje valg af drikkepenge, indsætter vi den følgende kode i den nye sektion LinearLayout (#4):

Dette kodeafsnit er nødvendigt for nøjagtigt at beregne beløbet for drikkepenge. Standardværdien for teksten er 20. ImageButtons er udstyret med ikoner i en mappe med skrivebeskyttelse.

Vi kopierer hele sektionen og tilføjer følgende (#5):

• ImageButton ids (subtractPeopleButton, addPeopleButton)
• TextView ids (numberOfPeopleStaticText, numberOfPeopleTextView)
• DefaultText for numberOfPeopleTextView (skal være 4).

Når appen startes, er det nu muligt at tilføje beløbet for regningen, og knapperne 'Tilføj/'Træk fra' fungerer, men indtil videre sker der intet.

Vi tilføjer Views

Vi åbner MainActivity.kt og tilføjer dette til funktionen 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
 
}

Færdiggør knapperne

For at tilføje klikunderstøttelse til knapperne implementerer vi View.OnClickListener på klassens niveau (#7):

class MainActivity: AppCompatActivity(), View.OnClickListener {

Det vil ikke være muligt at kompilere projektet lige nu, vi skal udføre nogle flere handlinger (#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()
        }
    }

Angående knapperne og switchene er alt organiseret rigtig godt i Kotlin! Vi tilføjer nedenstående kode til alle funktionerne increment og decrement
(#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()
        }
    }

Her beskytter koden forøgelserne mod de maksimale værdier (MAX_TIP & MAX_PEOPLE). Desuden beskytter koden for reduktionerne mod de minimale værdier (MIN_TIP & MIN_PEOPLE).

Nu binder vi knapperne til lytterne i funktionen initViews (#13):

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

Nu kan vi tilføje samlet skade, drikkepenge og antallet af deltagere til mødet. Og nu det vigtigste…

Afsnit til udgiftsberegning

Denne kode beregner udgifterne (#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)
 
}

Og her kaldes funktionen, som gør det muligt at tage højde for antallet af personer i selskabet og beregne drikkepengene (#15):

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

Vi starter applikationen. Den ser godt ud og fungerer godt. Men det kan være endnu bedre.

Hvis du forsøger at fjerne beløbet fra regningen og derefter øge antallet af tips eller venner, vil applikationen crashe, da der endnu ikke er nogen kontrol for nulværdien af omkostninger. Desuden vil omkostningerne ikke opdateres, hvis du forsøger at ændre beløbet for regningen.

Afsluttende trin

Vi tilføjer TextWatcher (#16):

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

Derefter integrerer vi lytteren billEditText (#17):

billEditText.addTextChangedListener(this)

Desuden tilføjer vi kode til at udføre 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) {}

Og nu fungerer alt perfekt! Tillykke, du har skrevet din egen "Tip Calculator" i Kotlin.

Skillbox anbefaler:

• Toårigt praktisk kursus «Jeg er Web-udvikler PRO».
• Online kursus "C#-udvikler".
• Praktisk års kursus "PHP-udvikler fra 0 til PRO".

Kilde: habr.com