🥇Kotlin-en aholku kalkulagailua sortzea: nola funtzionatzen du?

Kotlin-en aholkuak kalkulatzeko aplikazio sinple bat nola sortu erakusten dizugu. Zehatzago esateko, Kotlin 1.3.21, Android 4, Android Studio 3. Artikulua interesgarria izango da, lehenik eta behin, Android aplikazioak garatzen hasten direnentzat. Aplikazioaren barruan zer eta nola funtzionatzen duen ulertzeko aukera ematen du.

Horrelako kalkulagailu bat erabilgarria da jatetxe edo kafetegi batean denbora pasatzea erabakitzen duen enpresa baten aholku kopurua kalkulatu behar duzunean. Jakina, denek ez dute tea uzten zerbitzarientzat, hau mendebaldeko tradizio bat gehiago da, baina aplikazio hori garatzeko prozesua interesgarria da edozein kasutan.

Gogoratzen dugu: "Habr" irakurle guztientzat - 10 errubloko deskontua "Habr" promozio-kodea erabiliz Skillbox-eko edozein ikastarotan izena ematean.

Skillbox-ek gomendatzen du: Ikastaro praktikoa "Mobile Developer PRO.

Hona hemen aplikazioak martxan dagoenean nolakoa den:

Zenbateko osoaren nahi den ehunekoa, bilerako parte-hartzaile kopurua sartu eta emaitza lortuko duzu - utzi beharreko aholku kopurua.

Lehen urratsak

Aplikazioaren interfaze osoa honelakoa da:

Lehen ekintza - proiektuaren oinarria deskargatzea. Ireki Android Studio 3.0 edo berriagoa den bertsioan. Proiektua eraiki eta exekutatzen dugu eta pantaila zuri bat ikusten dugu. Dena ondo dago, behar den bezala.

Erabiltzaileen ekintzak proiektuan ordena kronologikoan idazten dira, dena argi egon dadin. Ikusteko, ireki Ikusi -> Tresnaren leihoak -> EGIN BEHAR.

Proiektua aztertzen dugu eta kolore-paleta ebaluatzeko colors.xml irekitzen dugu. strings.xml-k testu-datuak (oinak) ditu eta styles.xml-k hainbat letra-tipo txantiloi ditu.

Kostuen Atala Garapena

Ireki activity_main.xml eta gehitu beheko kodea LinearLayout-era (#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"/>

Orain baloreen direktorioa estilo dezakezu edo koloreekin jolastu dezakezu material.io tresna.

Orain proiektuak honela dauka:

Ikus dezakezunez, kostuen kalkulua erabiltzaileak sartutako datuetan oinarritzen da.

Kontuen atalaren garapena

Gehitu beheko kodea LinearLayout-era Gastuen Atalaren ondoren (#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>

Itxi LinearLayout TODOs zerrendaren ondoren, eta, ondoren, gehitu kode berria, LinearLayout barruan jarriz (#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"/>

Aplikazioaren zeregin nagusia jatetxeko topaketetako parte-hartzaile bakoitzaren kostu indibidualak kalkulatzea denez, kostuPertsonaTextView-ek betetzen du zeregin nagusia.

EditText-ek sarrera lerro batera mugatzen du, parametro hau NumberDecimal inputType gisa ezarri behar da.

Proba egiteko proiektua hasten dugu eta kalte osoaren parametroak sartzen ditugu (hautsitako edalontzi, platerak, etab.)

"Pertsonak eta aholkuak" atalaren garapena

Aholku kopuruaren hautatzailea gehitzeko, itsatsi beheko kodea LinearLayout atal berri batean (#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>

Kode zati hau behar da propina zenbatekoa zehaztasunez kalkulatzeko. Testu-balio lehenetsia 20 da. ImageButtons ikonoekin hornitzen dira idazketa-baimenak dituen karpeta batean.

Kopiatu atal osoa eta gehitu honako hau (#5):

ImageButton IDak (PeopleButton kendu, gehituPeopleButton)
TextView IDak (numberOfPeopleStaticText, numberOfPeopleTextView)
NumberOfPeopleTextView-ren DefaultText (4 izan behar du).

Orain, aplikazioa abiaraztean, fakturaren zenbatekoa gehitzeko aukera dago, Gehitu / Kendu botoiek ere funtzionatzen dute, baina orain arte ez da ezer gertatzen.

Gehitu Ikuspegiak

Ireki MainActivity.kt eta gehitu hau initViews funtziora (#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
 
}

Botoiak amaitzen

Botoien kliketarako laguntza gehitzeko, ezarri View.OnClickListener klase mailan (#7):

klase MainActivity: AppCompatActivity(), View.OnClickListener {

Proiektua oraintxe konpilatzeak ez du funtzionatuko, urrats batzuk gehiago egin behar dituzu (# 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()
        }
    }

Botoi eta etengailuei dagokienez, Kotlinek dena oso polita du antolatuta! Gehitu beheko kodea gehitzeko eta gutxitzeko funtzio guztietan
(#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()
        }
    }

Hemen kodeak gehikuntza-funtzioak babesten ditu gehienezko balioekin (MAX_TIP eta MAX_PEOPLE). Gainera, kodeak gutxieneko balioekin (MIN_TIP & MIN_PEOPLE) funtzioak babesten ditu.

Orain botoiak entzuleei lotuko dizkiegu initViews funtzioan (#13):

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

Kalte osoa, aholkuak eta bilerako parte-hartzaile kopurua gehi ditzakezu orain. Beno, orain garrantzitsuena...

Kostuen atala

Kode honek kostuak kalkulatzen ditu (#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)
 
}

Bada, hemen konpainiako pertsona kopurua kontuan hartu eta propina kalkulatzeko aukera ematen duen funtzio bat deitzen da (#15):

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

Aplikazioa martxan jartzen dugu. Itxura handia du eta funtzionatzen du. Baina hobea izan liteke.

Fakturaren zenbatekoa kentzen saiatzen bazara eta gero aholku edo lagunen kopurua handitzen baduzu, aplikazioa huts egingo da, oraindik ez dagoelako zero kostuen egiaztapenik. Gainera, fakturaren zenbatekoa aldatzen saiatzen bazara, kostuak ez dira eguneratuko.

Azken urratsak

Gehitu TextWatcher (#16):

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

Ondoren, billEditText entzulea txertatu dugu (#17):

billEditText.addTextChangedListener(hau)

Gainera, gehitu kodea TextWatcher exekutatzeko (#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) {}

Beno, orain dena funtzionatzen du! Zorionak, zure "Tipping Calculator" idatzi duzu Kotlin-en.

Skillbox-ek gomendatzen du:

Bi urteko ikastaro praktikoa "PRO Web garatzailea naiz".

Lineako ikastaroa "C# garatzailea".

Ikastaro praktikoa "PHP garatzailea 0tik PROra".

Iturria: www.habr.com

Kotlin-en aholku kalkulagailua eraikitzea: nola funtzionatzen du?