Paglikha ng tip calculator sa Kotlin: paano ito gumagana?

Sinasabi namin sa iyo kung paano lumikha ng isang simpleng application para sa pagkalkula ng mga tip sa Kotlin. Mas tiyak, Kotlin 1.3.21, Android 4, Android Studio 3. Magiging kawili-wili ang artikulo, una sa lahat, para sa mga nagsisimula sa kanilang paglalakbay sa pagbuo ng Android application. Pinapayagan ka nitong maunawaan kung ano at paano ito gumagana sa loob ng application.

Ang calculator na ito ay magiging kapaki-pakinabang kapag kailangan mong kalkulahin ang dami ng mga tip mula sa isang kumpanya na nagpasya na gumugol ng oras sa isang restaurant o cafe. Siyempre, hindi lahat ay palaging nag-iiwan ng tip sa mga waiter; ito ay higit pa sa tradisyon ng Kanluran, ngunit ang proseso ng pagbuo ng naturang aplikasyon ay kawili-wili sa anumang kaso.

Pinapaalala namin sa iyo: para sa lahat ng mga mambabasa ng "Habr" - isang diskwento na 10 rubles kapag nag-enroll sa anumang kurso sa Skillbox gamit ang code na pang-promosyon ng "Habr".

Inirerekomenda ng Skillbox ang: Praktikal na kurso "Mobile developer PRO.

Ito ang hitsura ng application sa pagpapatakbo:

Ilalagay mo ang nais na porsyento ng kabuuang halaga, ang bilang ng mga kalahok sa pagpupulong, at makuha ang resulta - ang halaga ng tip na dapat mong iwanan.

Pagsisimula

Ang kumpletong interface ng application ay ganito ang hitsura:




Unang aksyon - pag-download ng base ng proyekto. Buksan ito sa Android Studio 3.0 o mas bago. Binubuo at inilunsad namin ang proyekto at nakakita ng puting screen. Maayos naman ang lahat, ganyan dapat.

Ang mga aksyon ng gumagamit ay nakasulat sa proyekto sa magkakasunod na pagkakasunud-sunod upang gawing malinaw ang lahat. Upang tingnan ito, buksan ang View -> Tool Windows -> TODO.

Pinag-aaralan namin ang proyekto at binuksan ang mga kulay.xml upang suriin ang paleta ng kulay. Ang strings.xml ay naglalaman ng data ng text (mga lagda), at ang styles.xml ay naglalaman ng ilang mga template ng font.

Pag-unlad ng seksyon ng gastos

Buksan ang activity_main.xml at idagdag ang code sa ibaba sa 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"/>

Maaari mo na ngayong i-istilo ang direktoryo ng mga halaga o maglaro gamit ang mga kulay tool na materyal.io.

Ngayon ang proyekto ay ganito ang hitsura:

Gaya ng nakikita mo, kinakalkula ang mga gastos batay sa data na ipinasok ng user.

Pag-unlad ng seksyon ng mga account

Idagdag ang code sa ibaba sa LinearLayout pagkatapos ng Expense Section (#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>

Isinasara namin ang LinearLayout pagkatapos ng listahan ng mga TODO, at pagkatapos ay magdagdag ng bagong code, inilalagay ito sa loob ng 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"/>

Dahil ang pangunahing gawain ng application ay upang kalkulahin ang mga indibidwal na gastos para sa bawat kalahok sa isang pagtitipon sa restaurant, ang costPerPersonTextView ay gumaganap ng pangunahing papel.

Nililimitahan ng EditText ang input sa isang linya, dapat itakda ang parameter na ito sa NumberDecimal inputType.

Inilunsad namin ang proyekto para sa pagsubok at ipinasok ang mga parameter para sa pangkalahatang pinsala (sirang tasa, plato, atbp.)

Pagbuo ng seksyong "Mga Tao at Mga Tip".

Upang magdagdag ng pagpili ng dami ng tip, i-paste ang code sa ibaba sa bagong seksyong LinearLayout (#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>

Ang seksyong ito ng code ay kinakailangan upang tumpak na kalkulahin ang halaga ng tip. Ang default na halaga ng teksto ay 20. Ang ImageButtons ay binibigyan ng mga icon sa isang folder na may mga pahintulot sa pagsulat.

Kopyahin nang buo ang seksyon at idagdag ang sumusunod (#5):

• Mga ImageButton id (subtractPeopleButton, addPeopleButton)
• TextView id(numberOfPeopleStaticText, numberOfPeopleTextView)
• DefaultText para sa numberOfPeopleTextView (dapat ay 4).

Ngayon, kapag inilunsad mo ang application, may pagkakataon na idagdag ang halaga ng invoice, gumagana rin ang mga pindutang "Magdagdag/Magbawas", ngunit wala pang nangyayari.

Pagdaragdag ng mga View

Buksan ang MainActivity.kt at idagdag ito sa initViews function (#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
 
}

Tinatapos ang mga pindutan

Upang magdagdag ng suporta para sa mga pag-click sa button, ipinapatupad namin ang View.OnClickListener sa antas ng klase (#7):

class MainActivity: AppCompatActivity(), View.OnClickListener {

Hindi posibleng i-compile ang proyekto sa ngayon; kailangan mong magsagawa ng ilan pang hakbang (#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()
        }
    }

Sa mga tuntunin ng mga pindutan at switch, inaayos ni Kotlin ang lahat ng napakahusay! Idagdag ang code sa ibaba sa lahat ng increment at decrement function
(#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()
        }
    }

Dito pinoprotektahan ng code ang mga increment function na may pinakamataas na halaga (MAX_TIP & MAX_PEOPLE). Bukod pa rito, pinoprotektahan ng code ang mga function ng pagbabawas na may pinakamababang halaga (MIN_TIP at MIN_PEOPLE).

Ngayon ay iniuugnay namin ang mga pindutan sa mga tagapakinig sa initViews function (#13):

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

Maaari ka na ngayong magdagdag ng kabuuang pinsala, mga tip, at ang bilang ng mga kalahok sa pagpupulong. Well, ngayon ang pinakamahalagang bagay ...

Seksyon ng pagkalkula ng gastos

Kinakalkula ng code na ito ang mga gastos (#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)
 
}

Kaya, dito tinawag ang isang function na ginagawang posible na isaalang-alang ang bilang ng mga tao sa kumpanya at kalkulahin ang mga tip (#15):

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

Ilunsad natin ang application. Ito ay mukhang at gumagana nang mahusay. Ngunit ito ay maaaring maging mas mahusay.

Kung susubukan mong alisin ang halaga ng singil at pagkatapos ay dagdagan ang bilang ng mga tip o kaibigan, ang app ay mag-crash dahil wala pang tseke para sa zero cost value. Bukod dito, kung susubukan mong baguhin ang halaga ng singil, ang mga singil ay hindi maa-update.

Mga huling hakbang

Magdagdag ng TextWatcher (#16):

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

Pagkatapos ay i-embed namin ang billEditText listener (#17):

billEditText.addTextChangedListener(ito)

Dagdag pa, nagdaragdag kami ng code upang maisagawa ang TextWatcher (#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) {}

Well, ngayon ay ganap na gumagana ang lahat! Binabati kita, naisulat mo ang iyong sariling "Tip Calculator" sa Kotlin.

Inirerekomenda ng Skillbox ang:

• Dalawang taong praktikal na kurso "Ako ay isang Web Developer PRO".
• Online na kurso "C# developer".
• Praktikal na kurso sa taon "PHP developer mula 0 hanggang PRO".

Pinagmulan: www.habr.com