Bou 'n fooisakrekenaar in Kotlin: hoe werk dit?

Ons vertel jou hoe om 'n eenvoudige toepassing vir die berekening van wenke in Kotlin te skep. Meer presies, Kotlin 1.3.21, Android 4, Android Studio 3. Die artikel sal eerstens interessant wees vir diegene wat hul reis in Android-toepassingsontwikkeling begin. Dit laat jou toe om te verstaan ​​wat en hoe dit binne die toepassing werk.

Hierdie sakrekenaar sal handig te pas kom wanneer jy die hoeveelheid wenke moet bereken van 'n maatskappy wat besluit om tyd in 'n restaurant of kafee deur te bring. Natuurlik laat almal nie altyd 'n fooitjie aan die kelners oor nie, dit is meer 'n Westerse tradisie, maar die proses om so 'n toepassing te ontwikkel is in elk geval interessant.

Ons herinner: vir alle lesers van "Habr" - 'n afslag van 10 000 roebels wanneer u inskryf vir enige Skillbox-kursus met behulp van die "Habr"-promosiekode.

Skillbox beveel aan: Praktiese kursus "Mobiele ontwikkelaar PRO.

Dit is hoe die toepassing in werking lyk:

U voer die verlangde persentasie van die totale bedrag in, die aantal deelnemers aan die vergadering, en kry die resultaat - die hoeveelheid fooi wat u moet verlaat.

Aan die gang

Die volledige toepassingskoppelvlak lyk soos volg:




Eerste aksie - die projekbasis aflaai. Maak dit oop in Android Studio 3.0 of later. Ons bou en loods die projek en sien 'n wit skerm. Alles is reg, dit is hoe dit moet wees.

Gebruikershandelinge word in die projek in chronologiese volgorde geskryf om alles duidelik te maak. Om dit te sien, maak View -> Tool Windows -> TODO oop.

Ons bestudeer die projek en maak colors.xml oop om die kleurpalet te evalueer. strings.xml bevat teksdata (handtekeninge), en styles.xml bevat verskeie fontsjablone.

Koste afdeling ontwikkeling

Maak activity_main.xml oop en voeg die kode hieronder by die Linear Layout (#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"/>

Nou kan jy die waardes-gids stileer of met kleure speel material.io hulpmiddel.

Nou lyk die projek so:

Soos u kan sien, word koste bereken op grond van die data wat deur die gebruiker ingevoer is.

Ontwikkeling van die rekeninge afdeling

Voeg die kode hieronder by die Lineêre Uitleg na die Uitgawe-afdeling (#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>

Ons maak die LinearLayout toe na die lys van TODO's, en voeg dan nuwe kode by en plaas dit binne die 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"/>

Aangesien die hooftaak van die toepassing is om individuele koste vir elke deelnemer aan 'n restaurantbyeenkoms te bereken, speel costPerPersonTextView die hoofrol.

EditText beperk die invoer tot een reël, hierdie parameter moet op NumberDecimal inputType gestel word.

Ons loods die projek vir die toets en voer die parameters in vir algemene skade (gebreekte koppies, borde, ens.)

Ontwikkeling van die "Mense en Wenke" afdeling

Om 'n wenkvolume-keuse by te voeg, plak die kode hieronder in die nuwe LinearLayout-afdeling (#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>

Hierdie gedeelte van die kode is nodig om die fooibedrag akkuraat te bereken. Die verstek tekswaarde is 20. ImageButtons word voorsien van ikone in 'n gids met skryftoestemmings.

Kopieer die afdeling heeltemal en voeg die volgende by (#5):

• ImageButton-ID's (trekPeopleButton af, voegPeopleButton by)
• TextView-ID's (numberOfPeopleStaticText, numberOfPeopleTextView)
• DefaultText for numberOfPeopleTextView (moet 4 wees).

Nou, wanneer jy die toepassing begin, is daar 'n geleentheid om die faktuurbedrag by te voeg, die "Voeg by/aftrek"-knoppies werk ook, maar niks gebeur nog nie.

Voeg aansigte by

Maak MainActivity.kt oop en voeg dit by die initViews-funksie (#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
 
}

Afwerking van die knoppies

Om ondersteuning vir knoppie-klikke by te voeg, implementeer ons View.OnClickListener op klasvlak (#7):

klas Hoofaktiwiteit: AppCompatActivity(), View.OnClickListener {

Dit sal nie nou moontlik wees om die projek saam te stel nie, jy moet nog 'n paar stappe uitvoer (#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()
        }
    }

Wat knoppies en skakelaars betref, organiseer Kotlin alles baie cool! Voeg die kode hieronder by alle inkrement- en dekrementfunksies
(#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()
        }
    }

Hier beskerm die kode die inkrementfunksies met maksimum waardes (MAX_TIP & MAX_PEOPLE). Boonop beskerm die kode die verlagingsfunksies met minimum waardes (MIN_TIP & MIN_PEOPLE).

Nou assosieer ons die knoppies met luisteraars in die initViews-funksie (#13):

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

Jy kan nou totale skadevergoeding, wenke en die aantal vergaderingdeelnemers byvoeg. Nou ja, die belangrikste ding...

Koste berekening afdeling

Hierdie kode bereken koste (#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)
 
}

Wel, hier word 'n funksie genoem wat dit moontlik maak om die aantal mense in die maatskappy in ag te neem en wenke te bereken (#15):

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

Kom ons begin die toepassing. Dit lyk en werk wonderlik. Maar dit kan beter wees.

As jy probeer om die rekeningbedrag te verwyder en dan die aantal wenke of vriende te vermeerder, sal die toepassing ineenstort omdat daar nog geen tjek vir die nulkostewaarde is nie. Verder, as jy probeer om die rekeningbedrag te verander, sal die heffings nie opgedateer word nie.

Finale stappe

Voeg TextWatcher by (#16):

klas Hoofaktiwiteit: AppCompatActivity(), View.OnClickListener, TextWatcher {

Dan sluit ons die rekeningEditText-luisteraar in (#17):

billEditText.addTextChangedListener(hierdie)

Boonop voeg ons kode by om TextWatcher (#18) uit te voer:

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) {}

Wel, nou werk absoluut alles! Baie geluk, jy het jou eie "Wenkrekenaar" in Kotlin geskryf.

Skillbox beveel aan:

• Twee-jaar praktiese kursus "Ek is 'n PRO Web Ontwikkelaar".
• Aanlyn kursus "C# Ontwikkelaar".
• Praktiese jaarkursus "PHP-ontwikkelaar van 0 tot PRO".

Bron: will.com