🥇Oprettelse af en tipberegner i Kotlin: hvordan fungerer det?

Vi fortæller dig, hvordan du opretter en simpel applikation til beregning af tips i Kotlin. Mere præcist, Kotlin 1.3.21, Android 4, Android Studio 3. Artiklen vil først og fremmest være interessant for dem, der starter deres rejse i Android-applikationsudvikling. Det giver dig mulighed for at forstå, hvad og hvordan det fungerer inde i applikationen.

Denne lommeregner vil være praktisk, når du skal beregne mængden af drikkepenge fra en virksomhed, der beslutter sig for at bruge tid på en restaurant eller cafe. Selvfølgelig efterlader ikke alle altid et tip til tjenerne; dette er mere en vestlig tradition, men processen med at udvikle en sådan applikation er under alle omstændigheder interessant.

Påmindelse: for alle læsere af "Habr" - en rabat på 10 rubler ved tilmelding til ethvert Skillbox-kursus ved hjælp af "Habr"-kampagnekoden.

Skillbox anbefaler: Praktisk kursus "Mobiludvikler PRO.

Sådan ser applikationen ud i drift:

Du indtaster den ønskede procentdel af det samlede beløb, antallet af mødedeltagere, og får resultatet - mængden af drikkepenge du skal efterlade.

Kom i gang

Den komplette applikationsgrænseflade ser således ud:

Første handling - download af projektbasen. Åbn den i Android Studio 3.0 eller nyere. Vi bygger og lancerer projektet og ser en hvid skærm. Alt er fint, sådan skal det være.

Brugerhandlinger er skrevet i projektet i kronologisk rækkefølge for at gøre alt klart. For at se den skal du åbne Vis -> Værktøjsvinduer -> TODO.

Vi studerer projektet og åbner colors.xml for at evaluere farvepaletten. strings.xml indeholder tekstdata (signaturer), og styles.xml indeholder flere skrifttypeskabeloner.

Udvikling af omkostningssektionen

Åbn activity_main.xml og tilføj koden nedenfor til 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 style værdibiblioteket eller lege med farver ved hjælp af material.io værktøj.

Nu ser projektet sådan ud:

Som du kan se, er omkostningerne beregnet ud fra de data, som brugeren har indtastet.

Udvikling af regnskabssektionen

Tilføj koden nedenfor til det lineære layout efter udgiftssektionen (#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>

Vi lukker LinearLayout'et efter listen over TODO'er, og tilføjer derefter ny kode og placerer den inde i LinearLayout'et (#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"/>

Da applikationens hovedopgave er at beregne individuelle omkostninger for hver deltager i en restaurantsammenkomst, spiller costPerPersonTextView hovedrollen.

EditText begrænser input til én linje, denne parameter skal indstilles til NumberDecimal inputType.

Vi starter projektet til testen og indtaster parametrene for generel skade (brudte kopper, tallerkener osv.)

Udvikling af afsnittet "Mennesker og tips".

For at tilføje et tipvolumenvalg skal du indsætte koden nedenfor i den nye 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>

Denne del af koden er nødvendig for nøjagtigt at beregne drikkepengebeløbet. Standardtekstværdien er 20. ImageButtons er forsynet med ikoner i en mappe med skrivetilladelser.

Kopier afsnittet fuldstændigt og tilføj følgende (#5):

ImageButton-id'er (fratrækPeopleButton, addPeopleButton)
TextView-id'er (numberOfPeopleStaticText, numberOfPeopleTextView)
DefaultText for numberOfPeopleTextView (skal være 4).

Nu, når du starter applikationen, er der mulighed for at tilføje fakturabeløbet, “Tilføj/Stræk”-knapperne virker også, men der sker ikke noget endnu.

Tilføjelse af visninger

Åbn MainActivity.kt og tilføj dette til 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
 
}

Afslutning af knapperne

For at tilføje understøttelse af knapklik implementerer vi View.OnClickListener på klasseniveau (#7):

klasse MainActivity: AppCompatActivity(), View.OnClickListener {

Det vil ikke være muligt at kompilere projektet lige nu; du skal udføre et par trin mere (#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()
        }
    }

Med hensyn til knapper og kontakter organiserer Kotlin alt meget fedt! Tilføj koden nedenfor til alle stignings- og reduktionsfunktioner
(#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 inkrementfunktionerne med maksimale værdier (MAX_TIP & MAX_PEOPLE). Derudover beskytter koden dekrementeringsfunktioner med minimumsværdier (MIN_TIP & MIN_PEOPLE).

Nu forbinder vi knapperne med lyttere 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 tilføje samlede skader, tips og antallet af mødedeltagere. Nå, nu er det vigtigste...

Omkostningsberegning afsnit

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

Nå, her kaldes en funktion, der gør det muligt at tage højde for antallet af personer i virksomheden og beregne tips (#15):

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

Lad os starte applikationen. Det ser ud og fungerer godt. Men det kunne være bedre.

Hvis du forsøger at fjerne regningsbeløbet og derefter øge antallet af tips eller venner, vil applikationen gå ned, fordi der endnu ikke er nogen kontrol for nulomkostningsværdien. Desuden, hvis du forsøger at ændre regningsbeløbet, vil gebyrerne ikke blive opdateret.

Afsluttende trin

Tilføj TextWatcher (#16):

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

Så indlejrer vi billEditText-lytteren (#17):

billEditText.addTextChangedListener(this)

Plus vi tilføjer kode for 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) {}

Nå, nu virker absolut alt! Tillykke, du har skrevet din egen "Tip Lommeregner" i Kotlin.

Skillbox anbefaler:

To-årigt praktisk kursus "Jeg er en PRO webudvikler".

Online kursus "C# udvikler".

Praktisk årskursus "PHP-udvikler fra 0 til PRO".

Kilde: www.habr.com

Oprettelse af en tipberegner i Kotlin: hvordan fungerer det?