Li Kotlin hesabkerek serişteyê çêbikin: ew çawa dixebite?

Em nîşanî we didin ka meriv çawa li Kotlin serîlêdanek hesabkirina tîpa hêsan biafirîne. Zêdetir, Kotlin 1.3.21, Android 4, Android Studio 3. Gotar dê berî her tiştî ji bo kesên ku dest bi rêwîtiya xwe di pêşvebirina sepanên Android-ê de dikin balkêş be. Ew dihêle hûn fêm bikin ka çi û çawa di hundurê serîlêdanê de dixebite.

Hesabkerek wusa bikêr e dema ku hûn hewce ne ku mîqdara serişteyên pargîdaniyek ku biryar dide ku wextê xwe li xwaringehek an qehwexaneyekê derbas bike hesab bikin. Bê guman, ne her kes û ne her gav çayê ji garsonan re dihêle, ev bêtir kevneşopiyek rojavayî ye, lê pêvajoya pêşvebirina serîlêdanek wusa di her rewşê de balkêş e.

Em bînin bîra xwe: ji bo hemî xwendevanên "Habr" - dema ku hûn beşdarî qursek Skillbox-ê bi karanîna koda danasînê ya "Habr" têne qeyd kirin 10 rubleyan dakêşin.

Skillbox pêşniyar dike: Kursa pratîk "Pêşvebirê Mobîl PRO.

Li vir dema ku sepan dimeşe çawa xuya dike:

Hûn rêjeya xwestinê ya mîqdara giştî, hejmara beşdarên civînê dinivîsin û encamê digirin - çendeya serişteyên ku divê werin hiştin.

Destpêkirin

Navbera tevahî ya sepanê wiha xuya dike:




Çalakiya yekem - daxistina bingeha projeyê. Wê di Android Studio 3.0 an nûtir de vekin. Em projeyê ava dikin û dimeşînin û ekranek spî dibînin. Her tişt baş e, wekî ku divê bibe.

Kiryarên bikarhêner di projeyê de bi rêza kronolojîk têne nivîsandin, da ku her tişt zelal be. Ji bo dîtina wê, Dîtin -> Amûr Windows -> TODO vekin.

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

Pêşveçûna beşa lêçûn

Activity_main.xml vekin û koda jêrîn li LinearLayout (#1) zêde bikin:

<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"/>

Naha hûn dikarin pelrêça nirxan şêwaz bikin an bi rengan bikar bînin bilîzin amûra materyal.io.

Niha proje bi vî rengî xuya dike:

Wekî ku hûn dikarin bibînin, hesabê lêçûn li ser daneyên ku ji hêla bikarhêner ve hatî nivîsandin ve girêdayî ye.

Pêşveçûna beşa hesabê

Koda jêrîn li LinearLayout-ê piştî Beşa Lêçûn (#2) zêde bikin:

<LinearLayout
    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_orientation="vertical"
    android_background="@color/colorAccent">
 
<! — TODO #3: Build Bill Section →
 
… 
</LinearLayout>

Piştî navnîşa TODOs LinearLayout bigire, û paşê koda nû lê zêde bike, li hundurê LinearLayout (#3) bi cîh bike:

<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"/>

Ji ber ku peywira sereke ya serîlêdanê hesabkirina lêçûnên kesane ji bo her yek ji beşdarên civînên li restorantê ye, costPerPersonTextView rola sereke dilîze.

EditText têketinê bi yek rêzê ve sînordar dike, divê ev parametre wekî NumberDecimal inputType were danîn.

Em ji bo ceribandinê dest bi projeyê dikin û pîvanên zirara tevahî (kupên şikestî, lewhe, hwd.) dinivîsin.

Pêşxistina beşa "Mirov û Serişteyan".

Ji bo ku hilbijêrek mîqdara tîpê lê zêde bikin, koda jêrîn li beşa LinearLayout ya nû (#4) bixin:

<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>

Ev perçeya kodê pêdivî ye ku meriv bi qasê tîpê rast hesab bike. Nirxa nivîsê ya xwerû 20 e. Bişkokên Wêne bi îkonan di peldankekê de bi destûra nivîsandinê têne peyda kirin.

Tevahiya beşê kopî bikin û jêrîn lê zêde bikin (#5):

• Nasnameyên ImageButton (jêkirinaPeopleButton, addPeopleButton)
• Nasnameyên TextView (numberOfPeopleStaticText, numberOfPeopleTextView)
• DefaultText ji bo numberOfPeopleTextView (divê 4 be).

Naha, dema ku serîlêdanê dest pê dike, mimkun e ku meriv mîqdara fatûreyê lê zêde bike, bişkokên Add / Subtract jî dixebitin, lê heya nuha tiştek çênabe.

Dîtinan zêde bikin

MainActivity.kt vekin û vê li fonksiyona initViews (#6) zêde bikin:

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
 
}

Dawîkirina bişkokan

Ji bo zêdekirina piştgirî ji bo klîkên bişkojkê, View.OnClickListener di asta polê de bicîh bikin (#7):

class MainActivity: AppCompatActivity(), View.OnClickListener {

Berhevkirina projeyê naha dê nexebite, hûn hewce ne ku çend gavên din jî bikin (# 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()
        }
    }

Di warê bişkok û guheztan de, Kotlin her tişt pir xweş organîze ye! Koda jêrîn li hemî fonksiyonên zêdekirin û kêmkirinê zêde bikin
(#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()
        }
    }

Li vir kod fonksiyonên zêdebûnê bi nirxên herî zêde diparêze (MAX_TIP & MAX_PEOPLE). Digel vê yekê, kod fonksiyonên kêmbûnê bi nirxên hindiktirîn diparêze (MIN_TIP & MIN_PEOPLE).

Naha em bişkokan di fonksiyona initViews (#13) de bi guhdaran ve girê didin:

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

Naha hûn dikarin zirara tevahî, serişte û hejmara beşdarên civînê lê zêde bikin. Erê, niha ya herî girîng ...

Beşa mesrefê

Ev kod lêçûnên hesab dike (#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)
 
}

Welê, li vir fonksiyonek tê gotin ku gengaz dike ku meriv hejmara mirovên di pargîdaniyê de bigire û tîpê (#15) hesab bike:

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

Em serlêdanê dikin. Ew baş xuya dike û dixebite. Lê ew dikare çêtir be.

Ger hûn hewl bidin ku mîqdara fatûreyê rakin û dûv re hejmara pêşnîyaran an hevalan zêde bikin, sepan dê têk biçe ji ber ku hêj lêçûnek sifir tune ye. Wekî din, heke hûn hewl bidin ku mîqdara fatûreyê biguhezînin, lêçûn nayên nûve kirin.

gavên dawî

TextWatcher zêde bike (#16):

çîna MainActivity: AppCompatActivity(), View.OnClickListener, TextWatcher {

Dûv re em guhdariya billEditText (#17) bi cih dikin:

billEditText.addTextChangedListener(ev)

Zêdetir kodê zêde bikin da ku TextWatcher (#18) bicîh bikin:

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) {}

Welê, niha her tişt dixebite! Pîroz be, we li Kotlinê "Hesabkarê Tipandinê" ya xwe nivîsand.

Skillbox pêşniyar dike:

• Kursa pratîkî ya du-salî "Ez Pêşdebirek Webê ya PRO me".
• Kursa serhêl "C# Developer".
• Kursa sala pratîk "Pêşvebirê PHP ji 0 heta PRO".

Source: www.habr.com