🥇Paghimo usa ka tip calculator sa Kotlin: giunsa kini paglihok?

Gipakita namon kanimo kung giunsa paghimo ang usa ka yano nga aplikasyon sa pagkalkula sa tip sa Kotlin. Aron mahimong mas tukma, Kotlin 1.3.21, Android 4, Android Studio 3. Ang artikulo mahimong makapaikag, una sa tanan, alang niadtong nagsugod sa ilang panaw sa pagpalambo sa mga aplikasyon sa Android. Gitugotan ka niini nga masabtan kung unsa ug kung giunsa ang paglihok sa sulod sa aplikasyon.

Ang ingon nga calculator mapuslanon kung kinahanglan nimo nga kuwentahon ang kantidad sa mga tip gikan sa usa ka kompanya nga nagdesisyon nga mogahin og oras sa usa ka restawran o cafe. Siyempre, dili tanan ug dili kanunay nagbilin og tsa alang sa mga waiter, kini labaw pa sa tradisyon sa Kasadpan, apan ang proseso sa pagpalambo sa maong aplikasyon makapainteres sa bisan unsang kaso.

Gipahinumduman namon ikaw: alang sa tanan nga mga magbabasa sa "Habr" - usa ka diskwento sa 10 nga mga rubles kung nagpalista sa bisan unsang kurso sa Skillbox gamit ang code sa promosyon nga "Habr".

Girekomenda sa Skillbox: Praktikal nga kurso "Mobile Developer PRO.

Ania kung unsa ang hitsura sa app kung kini nagdagan:

Gisulod nimo ang gusto nga porsyento sa kinatibuk-ang kantidad, ang gidaghanon sa mga partisipante sa miting ug makuha ang resulta - ang kantidad sa mga tip nga kinahanglan ibilin.

Pagsugod

Ang bug-os nga interface sa app ingon niini:

Unang aksyon - pag-download sa base sa proyekto. Ablihi kini sa Android Studio 3.0 o sa ulahi. Nagtukod kami ug nagpadagan sa proyekto ug nakakita og puti nga screen. Maayo ang tanan, ingon nga kini kinahanglan.

Ang mga aksyon sa tiggamit gisulat sa proyekto sa kronolohikal nga pagkasunod-sunod, aron ang tanan klaro. Aron makita kini, ablihi ang View -> Tool Windows -> TODO.

Among gitun-an ang proyekto ug giablihan ang mga color.xml aron masusi ang color palette. Ang strings.xml adunay mga datos sa teksto (mga caption), ug ang styles.xml adunay daghang mga template sa font.

Pag-uswag sa Seksyon sa Gasto

Ablihi ang activity_main.xml ug idugang ang code sa ubos 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"/>

Karon mahimo nimong istilo ang direktoryo sa mga kantidad o magdula gamit ang mga kolor materyal.io nga himan.

Karon ang proyekto ingon niini:

Sama sa imong nakita, ang pagkalkula sa gasto gibase sa datos nga gisulod sa tiggamit.

Pag-uswag sa seksyon sa account

Idugang ang code sa ubos sa LinearLayout pagkahuman sa 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>

Isira ang LinearLayout pagkahuman sa listahan sa TODO, ug dayon idugang ang bag-ong code, ibutang kini sa sulod sa 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"/>

Tungod kay ang panguna nga tahas sa aplikasyon mao ang pagkalkulo sa indibidwal nga gasto alang sa matag usa sa mga partisipante sa mga panagtapok sa restawran, ang costPerPersonTextView nagdula sa panguna nga papel.

Gilimitahan sa EditText ang input sa usa ka linya, kini nga parameter kinahanglan itakda sa NumberDecimal inputType.

Gisugdan namo ang proyekto alang sa pagsulay ug gisulod ang mga parameter sa kinatibuk-ang kadaot (buak nga mga tasa, mga plato, ug uban pa)

Pag-uswag sa seksyon nga "Mga Tawo ug Mga Tip".

Aron makadugang usa ka tigpili sa kantidad sa tip, idikit ang code sa ubos sa usa ka bag-ong seksyon sa 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>

Kini nga piraso sa code gikinahanglan aron tukma nga makalkula ang kantidad sa tip. Ang default text value kay 20. Ang ImageButtons gihatagan og mga icon sa usa ka folder nga adunay mga permiso sa pagsulat.

Kopyaha ang tibuok nga seksyon ug idugang ang mosunod (#5):

ImageButton id (subtractPeopleButton, addPeopleButton)
TextView id (numberOfPeopleStaticText, numberOfPeopleTextView)
DefaultText para sa numberOfPeopleTextView (kinahanglan nga 4).

Karon, sa pagsugod sa aplikasyon, posible nga idugang ang kantidad sa invoice, ang Add / Subtract nga mga buton nagtrabaho usab, apan hangtod karon wala’y mahitabo.

Idugang ang mga View

Ablihi ang MainActivity.kt ug idugang kini 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
 
}

Pagtapos sa mga buton

Aron makadugang og suporta alang sa mga pag-klik sa buton, ipatuman ang View.OnClickListener sa lebel sa klase (#7):

klase MainActivity: AppCompatActivity(), View.OnClickListener {

Ang pag-compile sa proyekto karon dili molihok, kinahanglan nimo nga buhaton ang pipila pa nga mga lakang (# 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 termino sa mga buton ug switch, ang Kotlin adunay tanan nga organisado nga cool kaayo! Idugang ang code sa ubos sa tanan nga pag-uswag ug pagkunhod sa mga gimbuhaton
(#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()
        }
    }

Dinhi giprotektahan sa code ang mga function sa pagdugang nga adunay labing kadaghan nga kantidad (MAX_TIP & MAX_PEOPLE). Dugang pa, gipanalipdan sa code ang mga function sa pagkunhod nga adunay labing gamay nga kantidad (MIN_TIP & MIN_PEOPLE).

Karon among gibugkos ang mga buton sa mga tigpaminaw sa function sa initViews (#13):

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

Mahimo nimong idugang ang kinatibuk-ang kadaot, mga tip, ug ang gidaghanon sa mga partisipante sa miting. Aw, karon ang labing hinungdanon nga butang ...

Seksyon sa gasto

Kini nga code nagkalkula sa mga gasto (#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)
 
}

Aw, dinhi gitawag ang usa ka function nga nagpaposible sa pag-isip sa gidaghanon sa mga tawo sa kompanya ug pagkalkulo sa tip (#15):

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

Gilunsad namo ang aplikasyon. Nindot kini tan-awon ug maayo. Apan kini mahimong mas maayo.

Kung sulayan nimo nga tangtangon ang kantidad sa bayronon ug unya dugangan ang gidaghanon sa mga pahiwatig o mga higala, ang app mag-crash tungod kay wala pa’y tseke alang sa zero nga gasto. Dugang pa, kung sulayan nimo nga usbon ang kantidad sa invoice, ang mga singil dili ma-update.

Katapusan nga mga lakang

Idugang ang TextWatcher (#16):

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

Dayon among i-embed ang billEditText listener (#17):

billEditText.addTextChangedListener(nii)

Dugang idugang ang code aron ipatuman 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) {}

Aw, karon ang tanan nagtrabaho! Pahalipay, gisulat nimo ang imong kaugalingon nga "Tipping Calculator" sa Kotlin.

Girekomenda sa Skillbox:

Duha ka tuig nga praktikal nga kurso "Ako usa ka PRO Web Developer".

Online nga kurso "C# developer".

Praktikal nga tuig nga kurso "PHP developer gikan sa 0 ngadto sa PRO".

Source: www.habr.com

Paghimo usa ka tip calculator sa Kotlin: giunsa kini pagtrabaho?