Konstrui konsilan kalkulilon en Kotlin: kiel ĝi funkcias?

Ni montras al vi kiel krei simplan aplikaĵon pri kalkulo de konsiletoj en Kotlin. Por esti pli precizaj, Kotlin 1.3.21, Android 4, Android Studio 3. La artikolo estos interesa, antaŭ ĉio, por tiuj, kiuj komencas sian vojaĝon en evoluigado de Android-aplikoj. Ĝi permesas vin kompreni kio kaj kiel funkcias en la aplikaĵo.

Tia kalkulilo estas utila kiam vi bezonas kalkuli la kvanton da konsiletoj de kompanio, kiu decidas pasigi tempon en restoracio aŭ kafejo. Kompreneble, ne ĉiuj kaj ne ĉiam lasas teon por kelneroj, ĉi tio estas pli okcidenta tradicio, sed la procezo de disvolvi tian aplikaĵon estas ĉiukaze interesa.

Ni memorigas vin: por ĉiuj legantoj de "Habr" - rabato de 10 000 rubloj kiam oni enskribas en iu ajn Skillbox-kurso per la reklamkodo "Habr".

Skillbox rekomendas: Praktika kurso "Poŝtelefona Programisto PRO.

Jen kiel aspektas la aplikaĵo kiam ĝi funkcias:

Vi enigas la deziratan procenton de la totala kvanto, la nombron da partoprenantoj en la kunveno kaj ricevas la rezulton - la kvanton da konsiletoj, kiujn oni devas lasi.

Komencante

La plena interfaco de la app aspektas jene:




Unua ago - projektbazo elŝuto. Malfermu ĝin en Android Studio 3.0 aŭ poste. Ni konstruas kaj kuras la projekton kaj vidas blankan ekranon. Ĉio estas en ordo, kiel ĝi devus esti.

Uzantaj agoj estas skribitaj en la projekto en kronologia ordo, tiel ke ĉio estas klara. Por vidi ĝin, malfermu Vido -> Ilo Fenestroj -> TODO.

Ni studas la projekton kaj malfermas colors.xml por taksi la koloran paletron. strings.xml enhavas tekstajn datumojn (subskriboj), kaj styles.xml enhavas plurajn tiparŝablonojn.

Kosta Sekcio Evoluo

Malfermu activity_main.xml kaj aldonu la suban kodon al la 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"/>

Nun vi povas stiligi la dosierujon de valoroj aŭ ludi kun koloroj uzante material.io ilo.

Nun la projekto aspektas jene:

Kiel vi povas vidi, la kostokalkulo baziĝas sur la datumoj enigitaj de la uzanto.

Disvolviĝo de la konta sekcio

Aldonu la suban kodon al la LinearLayout post la Elspeza Sekcio (n° 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>

Fermu la LinearLayout post la TODOs-listo, kaj tiam aldonu la novan kodon, metante ĝin en la LinearLayout (n° 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"/>

Ĉar la ĉefa tasko de la aplikaĵo estas kalkuli la individuajn kostojn por ĉiu el la partoprenantoj en la renkontiĝoj en la restoracio, la kostoPerPersonTextView ludas la ĉefan rolon.

EditText limigas enigon al unu linio, ĉi tiu parametro devas esti agordita al NumberDecimal inputType.

Ni komencas la projekton por la testo kaj enigas la parametrojn de la tuta damaĝo (rompitaj tasoj, teleroj, ktp.)

Disvolviĝo de la sekcio "Homoj kaj Konsiloj".

Por aldoni konsilan kvanton elektilon, algluu la kodon malsupre en novan LinearLayout-sekcion (n° 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>

Ĉi tiu peco de kodo estas postulata por precize kalkuli la trinkkvanton. La defaŭlta tekstvaloro estas 20. ImageButtons estas provizitaj per ikonoj en dosierujo kun skribpermesoj.

Kopiu la tutan sekcion kaj aldonu la jenon (#5):

• ID-oj de ImageButton (subtrahiPeopleButton, aldoniPeopleButton)
• TextView-identigiloj (numberOfPeopleStaticText, numberOfPeopleTextView)
• DefaultText por NumberOfPeopleTextView (devus esti 4).

Nun, kiam oni komencas la aplikaĵon, eblas aldoni la faktursumon, ankaŭ la butonoj Aldoni / Subtrahi funkcias, sed ĝis nun nenio okazas.

Aldonu Vidojn

Malfermu MainActivity.kt kaj aldonu ĉi tion al la funkcio initViews (n° 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
 
}

Finante la butonojn

Por aldoni subtenon por butonklakoj, efektivigu View.OnClickListener ĉe la klasnivelo (n° 7):

klaso MainActivity: AppCompatActivity(), View.OnClickListener {

Kompili la projekton nun ne funkcios, vi devas fari kelkajn pliajn paŝojn (# 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()
        }
    }

Koncerne butonojn kaj ŝaltilojn, Kotlin havas ĉion tre mojosa! Aldonu la suban kodon al ĉiuj funkcioj de pliigo kaj malpliigo
(#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()
        }
    }

Ĉi tie la kodo protektas pliigajn funkciojn kun maksimumaj valoroj (MAX_TIP & MAX_PEOPLE). Krome, la kodo protektas malpliigajn funkciojn kun minimumaj valoroj (MIN_TIP & MIN_PEOPLE).

Nun ni ligas la butonojn al la aŭskultantoj en la funkcio initViews (#13):

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

Vi nun povas aldoni totalan damaĝon, konsiletojn kaj la nombron da kunvenaj partoprenantoj. Nu, nun la plej grava afero...

Kosta sekcio

Ĉi tiu kodo kalkulas la kostojn (#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)
 
}

Nu, ĉi tie nomiĝas funkcio, kiu ebligas konsideri la nombron da homoj en la kompanio kaj kalkuli la konsileton (#15):

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

Ni lanĉas la aplikaĵon. Ĝi aspektas kaj funkcias bonege. Sed povus esti pli bone.

Se vi provas forigi la faktursumon kaj poste pliigi la nombron da sugestoj aŭ amikoj, la aplikaĵo kraŝos ĉar ankoraŭ ne estas kontrolo por nul kostoj. Krome, se vi provas ŝanĝi la faktursumon, la akuzoj ne estos ĝisdatigitaj.

Finaj paŝoj

Aldonu TextWatcher (#16):

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

Poste ni enigas la aŭskultanton billEditText (n° 17):

billEditText.addTextChangedListener (ĉi tio)

Krome aldonu kodon por ekzekuti TextWatcher (n° 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) {}

Nu, nun ĉio funkcias! Gratulon, vi skribis vian propran "Kalkulilon de Konsilo" en Kotlin.

Skillbox rekomendas:

• Dujara praktika kurso "Mi estas PRO Reteja Programisto".
• Interreta kurso "C# programisto".
• Praktika jarkurso "PHP-programisto de 0 al PRO".

fonto: www.habr.com