🥇 En Tipprechner zu Kotlin erstellen: wéi funktionnéiert et?

Mir soen Iech wéi Dir eng einfach Applikatioun erstellt fir Tipps ze berechnen zu Kotlin. Méi präzis, Kotlin 1.3.21, Android 4, Android Studio 3. Den Artikel wäert interessant sinn, éischtens, fir déi, déi hir Rees an der Android Applikatioun Entwécklung starten. Et erlaabt Iech ze verstoen wat a wéi et an der Applikatioun funktionnéiert.

Dëse Rechner wäert praktesch kommen wann Dir d'Quantitéit un Tipps vun enger Firma berechne musst, déi decidéiert Zäit an engem Restaurant oder Café ze verbréngen. Selbstverständlech léisst net jidderee ëmmer en Tipp un d'Observateuren, dat ass méi eng westlech Traditioun, awer de Prozess vun der Entwécklung vun esou enger Applikatioun ass op alle Fall interessant.

Mir erënneren Iech: fir all Habr Lieser - eng Remise vun 10 Rubel wann Dir Iech an all Skillbox Cours aschreift mat dem Habr Promo Code.

Skillbox recommandéiert: Praktesch Cours "Mobilentwéckler PRO.

Dëst ass wéi d'Applikatioun an der Operatioun ausgesäit:

Dir gitt de gewënschte Prozentsaz vum Gesamtbetrag, d'Zuel vun de Versammlungsparticipanten, a kritt d'Resultat - d'Quantitéit vum Tipp deen Dir sollt verloossen.

Getting started

Déi komplett Applikatioun Interface gesäit esou aus:

Éischt Aktioun - de Projet Basis eroflueden. Öffnen et am Android Studio 3.0 oder méi spéit. Mir bauen a starten de Projet a gesinn e wäissen Ecran. Alles ass gutt, esou soll et sinn.

Benotzeraktioune ginn am Projet a chronologescher Uerdnung geschriwwe fir alles kloer ze maachen. Fir et ze gesinn, oppen View -> Tool Windows -> TODO.

Mir studéieren de Projet an oppen Faarwen.xml fir d'Faarfpalette ze evaluéieren. strings.xml enthält Textdaten (Ënnerschrëften), an styles.xml enthält verschidde Schrëft Templates.

Käschte Sektioun Entwécklung

Open activity_main.xml a füügt de Code hei ënnen un de 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"/>

Elo kënnt Dir de Wäertverzeechnes styléieren oder mat Faarwen spillen Material.io Tool.

Elo gesäit de Projet esou aus:

Wéi Dir gesitt, ginn d'Käschte berechent op Basis vun den Donnéeën, déi vum Benotzer agefouert goufen.

Entwécklung vun der Konte Rubrik

Füügt de Code hei ënnen un de LinearLayout no der Käschte Sektioun (#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>

Mir schloe de LinearLayout no der Lëscht vun TODOs zou, a füügt dann neie Code un, setzt se an de 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"/>

Well d'Haaptaufgab vun der Applikatioun ass d'individuell Käschten fir all Participant un enger Restaurantversammlung ze berechnen, spillt costPerPersonTextView d'Haaptroll.

EditText limitéiert den Input op eng Zeil, dëse Parameter muss op NumberDecimal inputType gesat ginn.

Mir starten de Projet fir den Test a gitt d'Parameteren fir allgemeng Schued (gebrach Coupë, Telleren, asw.)

Entwécklung vun der Rubrik "Leit an Tipps".

Fir eng Tippvolumenauswiel ze addéieren, paste de Code hei ënnen an déi nei LinearLayout Sektioun (#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>

Dës Sektioun vum Code ass néideg fir den Tippbetrag präzis ze berechnen. De Standardtextwäert ass 20. ImageButtons gi mat Ikonen an engem Dossier mat Schreifrechter geliwwert.

Kopéiert d'Sektioun komplett a füügt déi folgend (#5):

ImageButton ids (PeopleButton subtract, addPeopleButton)
TextView ids(numberOfPeopleStaticText, numberOfPeopleTextView)
DefaultText fir NumberOfPeopleTextView (muss 4 sinn).

Elo, wann Dir d'Applikatioun lancéiert, gëtt et eng Geleeënheet fir de Rechnungsbetrag derbäi ze ginn, d'"Add / Subtract" Knäppercher funktionnéieren och, awer näischt geschitt nach.

Derbäi Meenung

Open MainActivity.kt a füügt dëst un d'InitViews Funktioun (#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
 
}

Ofschloss vun de Knäppercher

Fir Ënnerstëtzung fir Knäppercher ze addéieren, implementéiere mir View.OnClickListener um Klasseniveau (#7):

class MainActivity: AppCompatActivity(), View.OnClickListener {

Et wäert net méiglech sinn de Projet elo ze kompiléieren, Dir musst e puer Schrëtt maachen (#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 Knäppercher a Schalter ugeet, organiséiert Kotlin alles ganz cool! Füügt de Code hei ënnen un all Inkrement- an Dekrementfunktiounen
(#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()
        }
    }

Hei schützt de Code d'Inkrementfunktioune mat maximale Wäerter (MAX_TIP & MAX_PEOPLE). Zousätzlech schützt de Code d'Dekrementfunktioune mat minimale Wäerter (MIN_TIP & MIN_PEOPLE).

Elo verbannen mir d'Knäppercher mat Nolauschterer an der initViews Funktioun (#13):

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

Dir kënnt elo total Schuedenersaz, Tipps an d'Zuel vun de Versammlungsparticipanten derbäisetzen. Ma, elo ass dat Wichtegst ...

Käschte Berechnung Rubrik

Dëse Code berechent Käschten (#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)
 
}

Gutt, hei gëtt eng Funktioun genannt déi et méiglech mécht d'Zuel vun de Leit an der Firma ze berücksichtegen an Tipps ze berechnen (#15):

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

Loosst eis d'Applikatioun starten. Et gesäit a funktionnéiert super. Awer et kéint besser sinn.

Wann Dir probéiert de Rechnungsbetrag ze läschen an dann d'Zuel vun Tipps oder Frënn eropzesetzen, wäert d'Applikatioun ofbriechen well et nach kee Scheck fir den Nullkäschtewäert ass. Ausserdeem, wann Dir probéiert de Rechnungsbetrag z'änneren, ginn d'Käschten net aktualiséiert.

Finale Schrëtt

TextWatcher addéieren (#16):

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

Dann embeede mir de BillEditText Nolauschterer (#17):

billEditText.addTextChangedListener(this)

Plus addéiere mer Code fir TextWatcher auszeféieren (#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) {}

Gutt, elo funktionnéiert absolut alles! Gratulatioun, Dir hutt Ären eegene "Tipprechner" zu Kotlin geschriwwen.

Skillbox recommandéiert:

Zwee-Joer praktesch Cours "Ech sinn e Web Entwéckler PRO".

Online Cours "C# Entwéckler".

Praktesch ee Joer Cours "PHP Entwéckler vun 0 bis PRO".

Source: will.com

Erstellt en Tipprechner zu Kotlin: wéi funktionnéiert et?