Ịmepụta ihe mgbako n'ọnụ na Kotlin: kedu ka ọ si arụ ọrụ?

Anyị na-agwa gị otu esi emepụta ngwa dị mfe maka ịgbakọ ndụmọdụ na Kotlin. Kpọmkwem nke ọma, Kotlin 1.3.21, Android 4, Android Studio 3. Isiokwu ahụ ga-adọrọ mmasị, nke mbụ, maka ndị na-amalite njem ha na mmepe ngwa ngwa gam akporo. Ọ na-enye gị ohere ịghọta ihe na otú o si arụ ọrụ n'ime ngwa.

Ihe mgbako a ga-aba uru mgbe ịchọrọ ịgbakọ ọnụ ọgụgụ ndụmọdụ sitere na ụlọ ọrụ na-ekpebi itinye oge na ụlọ oriri na ọṅụṅụ ma ọ bụ cafe. N'ezie, ọ bụghị onye ọ bụla na-ahapụ ndụmọdụ mgbe niile maka ndị na-echere; nke a bụ omenala ndị dị n'Ebe Ọdịda Anyanwụ, ma usoro nke ịmepụta ngwa dị otú ahụ na-adọrọ mmasị n'ọnọdụ ọ bụla.

Anyị na -echetara: maka ndị na-agụ Habr niile - ego 10 ruble mgbe ị na-edebanye aha na nkuzi Skillbox ọ bụla site na iji koodu mgbasa ozi Habr.

Skillbox na-atụ aro: Usoro bara uru Onye nrụpụta ekwentị PRO.

Nke a bụ ihe ngwa ahụ dị ka ọ na-arụ ọrụ:

Ị na-abanye pasentị chọrọ nke ngụkọta ego, ọnụ ọgụgụ nke ndị sonyere na nzukọ, wee nweta nsonaazụ - ọnụọgụ ego ị ga-ahapụ.

Na-amalite

Ngwa zuru ezu interface dị ka nke a:




Ihe omume mbụ - nbudata ntọala oru ngo. Mepee ya na Android Studio 3.0 ma ọ bụ karịa. Anyị na-ewu ma malite ọrụ ahụ ma hụ ihuenyo ọcha. Ihe niile dị mma, otu ahụ ka ọ kwesịrị ịdị.

Edere omume onye ọrụ n'ime ọrụ ahụ n'usoro oge iji mee ka ihe niile doo anya. Ka ilele ya, mepee View -> Windows ngwaọrụ -> TODO.

Изучаем проект и открываем colors.xml для оценки цветовой палитры. В strings.xml размещены текстовые данные (подписи), а в styles.xml есть несколько шрифтовых шаблонов.

Mmepe ngalaba ọnụ ahịa

Mepee activity_main.xml ma tinye koodu dị n'okpuru na 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"/>

Ugbu a ị nwere ike ịke ụkpụrụ ndekọ aha ma ọ bụ jiri agba egwu egwu material.io ngwá ọrụ.

Ugbu a ọrụ a dị ka nke a:

Dịka ị na-ahụ, a na-agbakọ ọnụ ahịa dabere na data onye ọrụ tinyere.

Mmepe nke ngalaba akaụntụ

Tinye koodu dị n'okpuru na LinearLayout mgbe ngalaba mmefu (#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>

Anyị na-emechi LinearLayout mgbe ndepụta TODO gasịrị, wee tinye koodu ọhụrụ, tinye ya n'ime 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"/>

Ebe isi ọrụ nke ngwa a bụ ịgbakọ ụgwọ onye ọ bụla maka onye ọ bụla so na nnọkọ oriri na ọṅụṅụ, costPersonTextView na-arụ ọrụ bụ isi.

EditText na-amachi ntinye n'otu ahịrị, oke a ga-edoberịrị ka ọ bụrụ NọmbaDecimal inputType.

Anyị na-amalite ọrụ ahụ maka ule wee tinye parampat maka mmebi izugbe (iko agbajiri agbaji, efere, wdg)

Mmepe nke ngalaba "Ndị mmadụ na ndụmọdụ".

Ka ịgbakwunye nhọrọ olu ọnụ, mado koodu dị n'okpuru n'ime ngalaba LinearLayout ọhụrụ (#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>

Nkebi nke koodu a dị mkpa iji gbakọọ ọnụọgụ ọnụ n'ụzọ ziri ezi. Uru ederede ndabara bụ 20. A na-enye ImageButton akara ngosi na nchekwa nwere ikike ide.

Detuo ngalaba ahụ kpamkpam wee tinye ihe ndị a (#5):

• ImageButton ids (wepụ bọtịnụ ndị mmadụ, tinye ndị mmadụ)
• Ederede TextView (nọmba OfPeopleStaticText, ọnụọgụ nke mmadụTextView)
• DefaultText maka nọmbaOfPeopleTextView (ga-abụrịrị 4).

Ugbu a, mgbe ịmalitere ngwa ahụ, enwere ohere ịgbakwunye ego akwụkwọ ọnụahịa, bọtịnụ "Tinye / Wepụ" na-arụkwa ọrụ, mana ọ nweghị ihe na-eme.

Na-agbakwụnye Echiche

Mepee MainActivity.kt ma tinye nke a na ọrụ initViews (#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
 
}

Na-emecha bọtịnụ

Iji tinye nkwado maka ịpị bọtịnụ, anyị na-emejuputa View.OnClickListener na ọkwa klaasị (#7):

klaasị MainActivity: AppCompatActivity(), View.OnClickListener {

Ọ gaghị ekwe omume ịchịkọta ọrụ a ugbu a; ịkwesịrị ịme usoro ole na ole ọzọ (#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()
        }
    }

N'ihe banyere bọtịnụ na mgba ọkụ, Kotlin na-ahazi ihe niile dị mma! Tinye koodu dị n'okpuru maka ọrụ mmụba na mbelata
(#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()
        }
    }

N'ebe a, koodu ahụ na-eji ụkpụrụ kachasị (MAX_TIP & MAX_PEOPLE) kpuchido ọrụ ịrị elu. Na mgbakwunye, koodu ahụ na-eji ụkpụrụ kacha nta na-echekwa ọrụ mbelata (MIN_TIP & MIN_PEOPLE).

Ugbu a, anyị na-ejikọta bọtịnụ na ndị na-ege ntị na ọrụ initViews (#13):

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

Ị nwere ike tinye ugbu a mkpokọta mmebi, ndụmọdụ na ọnụ ọgụgụ ndị sonyere na nzukọ. Ọfọn, ugbu a ihe kacha mkpa ...

Ngalaba ngụkọta ego

Koodu a na-agbakọ ọnụ ahịa (#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)
 
}

Ọfọn, ebe a na-akpọ ọrụ nke na-eme ka o kwe omume iburu n'uche ọnụ ọgụgụ ndị mmadụ na ụlọ ọrụ ma gbakọọ ndụmọdụ (#15):

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

Ka anyị malite ngwa ahụ. Ọ na-ele anya ma na-arụ ọrụ nke ọma. Ma ọ nwere ike ịka mma.

Ọ bụrụ na ị nwaa iwepu ego ụgwọ ahụ wee mụbaa ọnụ ọgụgụ ndụmọdụ ma ọ bụ ndị enyi, ngwa ahụ ga-adaba n'ihi na enwebeghị ego nlele maka uru efu efu. Ọzọkwa, ọ bụrụ na ị na-agbalị ịgbanwe ego ụgwọ, ụgwọ agaghị emelite.

Nzọụkwụ ikpeazụ

Tinye TextWatcher (#16):

klaasị MainActivity: AppCompatActivity(), View.OnClickListener, TextWatcher {

Mgbe ahụ, anyị gbakwunyere onye na-ege ntị BillEditText (#17):

BillEditText.addTextChangedListener(nke a)

Na mgbakwunye, anyị na-agbakwunye koodu iji mebie 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) {}

Ọfọn, ugbu a ihe niile na-arụ ọrụ! Ekele, ịdela "Ntụpọ Mgbakọ" nke gị na Kotlin.

Skillbox na-atụ aro:

• Ihe ọmụmụ bara uru nke afọ abụọ "Abụ m onye nrụpụta webụ PRO".
• N'ezie online "C# onye mmepụta".
• Ihe ọmụmụ otu afọ bara uru "Onye nrụpụta PHP si 0 ruo PRO".

isi: www.habr.com