Borravaló-kalkulátor létrehozása Kotlinban: hogyan működik?

Megmutatjuk, hogyan hozhatsz létre egy egyszerű borravaló-kalkulátor alkalmazást Kotlinban. Pontosabban a Kotlin 1.3.21-es verziójában. Android 4, Android Stúdió 3. Ez a cikk elsősorban azok számára lesz érdekes, akik most kezdik a fejlesztési útjukat. Android-alkalmazások. Lehetővé teszi, hogy megértsd, mi és hogyan működik az alkalmazáson belül.

Ez a kalkulátor hasznos lehet egy étteremben vagy kávézóban időt töltő csoport borravalójának kiszámításakor. Természetesen nem mindenki ad borravalót a pincéreknek – ez inkább egy nyugati hagyomány –, de egy ilyen alkalmazás fejlesztésének folyamata ettől függetlenül érdekes.

Emlékeztetünk: a "Habr" minden olvasója számára - 10 000 rubel kedvezmény, ha a "Habr" promóciós kóddal bármely Skillbox tanfolyamra jelentkezik.

A Skillbox a következőket ajánlja: Gyakorlati tanfolyam Mobilfejlesztő PRO.

Így néz ki az alkalmazás futás közben:

Beírod a teljes összeg kívánt százalékát, a találkozó résztvevőinek számát, és megkapod az eredményt - a borravaló összegét.

Első lépések

Az alkalmazás teljes felülete így néz ki:




Első felvonás - a projektbázis betöltéseMegnyitjuk benne Android Studio 3.0 vagy újabb. Felépítjük és futtatjuk a projektet, majd egy fehér képernyőt látunk. Minden rendben van, így kell lennie.

A felhasználói műveletek időrendi sorrendben vannak felsorolva a projektben, hogy minden áttekinthető legyen. A megtekintéshez nyissa meg a Nézet -> Eszközök menüpontot. Windows -> TENNIVALÓ

Fedezzük fel a projektet, és nyissuk meg a colors.xml fájlt a színpaletta kiértékeléséhez. A Strings.xml tartalmazza a szöveges adatokat (címkéket), a styles.xml pedig számos betűtípus-sablont.

Költségrészlet kidolgozása

Nyisd meg az activity_main.xml fájlt, és add hozzá az alábbi kódot a LinearLayout-hoz (#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"/>

Most testreszabhatja az értékek könyvtárának stílusát, vagy játszhat a színekkel a segítségével material.io eszköz.

A projekt most így néz ki:

Amint látható, a költségszámítások a felhasználó által megadott adatokon alapulnak.

A számviteli részleg fejlesztése

Add hozzá az alábbi kódot a LinearLayout Költség utáni szakaszhoz (#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>

A LinearLayout-ot a TODO-k lista után lezárjuk, majd új kódot adunk hozzá, a LinearLayout-on belül elhelyezve (#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"/>

Mivel az alkalmazás fő célja az éttermi összejövetelek minden résztvevőjének egyedi költségeinek kiszámítása, a costPerPersonTextView kulcsszerepet játszik.

Az EditText egyetlen sorra korlátozza az adatbevitelt, ennek a paraméternek NumberDecimal inputType értékkel kell rendelkeznie.

Elindítjuk a projektet tesztelésre, és megadjuk az általános kár paramétereit (törött csészék, tányérok stb.)

„Emberek és tippek” rész fejlesztése

Borravaló összegének kiválasztásához illessze be az alábbi kódot az új LinearLayout szakaszba (#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>

Ez a kódrészlet szükséges a pontos borravaló kiszámításához. Az alapértelmezett szövegérték 20. Az ImageButton gombok ikonokkal vannak ellátva a mappában, írási jogosultsággal.

Másolja le a teljes részt, és adja hozzá a következőket (#5):

• ImageButton azonosítók (subtractPeopleButton, addPeopleButton)
• TextView ids(személyekStatikusSzöveg, SzemélyekSzövegNézet)
• A numberOfPeopleTextView alapértelmezett szövege (4-nek kell lennie).

Most, amikor elindítod az alkalmazást, hozzáadhatod a számla összegét, az "Hozzáadás/Kivonás" gombok is működnek, de eddig semmi sem történik.

Nézetek hozzáadása

Nyisd meg a MainActivity.kt fájlt, és add hozzá ezt az initViews függvényhez (#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
 
}

A gombok befejezése

A gombkattintás támogatásának hozzáadásához implementáljuk a View.OnClickListener osztályszintű osztályát (#7):

osztály FőAktivitás: AppCompatAktivitás(), View.OnClickListener {

Jelenleg nem tudod lefordítani a projektet; még néhány lépést kell végrehajtanod (#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()
        }
    }

Kotlinnak van egy nagyon klassz beállítása a gombokhoz és kapcsolókhoz! Add hozzá az alábbi kódot az összes növelő és csökkentő függvényhez.
(#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()
        }
    }

Itt a kód a növekményes függvényeket maximális értékekkel (MAX_TIP és MAX_PEOPLE) védi. A csökkentő függvényeket pedig minimális értékekkel (MIN_TIP és MIN_PEOPLE) védi.

Most összekapcsoljuk a gombokat a figyelőkkel az initViews függvényben (#13):

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

Most hozzáadhatod a teljes kárt, a borravalót és a megbeszélésen résztvevők számát. És most jön a legfontosabb rész...

Költségszámítási szakasz

Ez a kód kiszámítja a költségeket (#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)
 
}

Nos, itt meghívunk egy függvényt, amely lehetővé teszi a cégben dolgozók számának figyelembevételét és a borravalók kiszámítását (#15):

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

Indítsuk el az alkalmazást. Nagyszerűen néz ki és működik is. De lehetne jobb is.

Ha megpróbálod törölni a számla összegét, majd növeled a borravalók vagy ismerősök számát, az alkalmazás összeomlik, mert nincs nulla költség csekk. Továbbá, ha megpróbálod módosítani a számla összegét, a költségek nem frissülnek.

Utolsó lépések

TextWatcher hozzáadása (#16):

osztály FőAktivitás: AppCompatAktivitás(), View.OnClickListener, TextWatcher {

Ezután beágyazzuk a billEditText figyelőt (#17):

billEditText.addTextChangedListener(ez)

Plusz hozzáadunk egy kódot a TextWatcher futtatásához (#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) {}

Most már minden tökéletesen működik! Gratulálok, megírtad a saját "Torravaló kalkulátorodat" Kotlinban.

A Skillbox a következőket ajánlja:

• Két éves gyakorlati tanfolyam "Webfejlesztő PRO vagyok".
• Online tanfolyam "C# fejlesztő".
• Gyakorlati évfolyam "PHP fejlesztő 0-tól PRO-ig".

Forrás: will.com