🥇Kotlin-də ipucu kalkulyatoru yaratmaq: bu necə işləyir?

Kotlin-də sadə tip hesablama tətbiqini necə yaratmağı sizə göstəririk. Daha dəqiq desək, Kotlin 1.3.21, Android 4, Android Studio 3. Məqalə, ilk növbədə, Android proqramlarının hazırlanmasında öz səyahətinə başlayanlar üçün maraqlı olacaq. Bu proqram daxilində nəyin və necə işlədiyini anlamağa imkan verir.

Belə bir kalkulyator, bir restoranda və ya kafedə vaxt keçirməyə qərar verən bir şirkətdən məsləhətlərin miqdarını hesablamaq lazım olduqda faydalıdır. Əlbəttə ki, hamı deyil və həmişə ofisiantlar üçün çay buraxmır, bu daha çox Qərb ənənəsidir, lakin hər halda belə bir tətbiqin hazırlanması prosesi maraqlıdır.

Xatırladırıq: "Habr" ın bütün oxucuları üçün - "Habr" promosyon kodundan istifadə edərək hər hansı bir Skillbox kursuna yazılarkən 10 000 rubl endirim.

Skillbox tövsiyə edir: Praktik kurs "Mobil Developer PRO.

Tətbiq işləyərkən belə görünür:

Siz ümumi məbləğin istədiyiniz faizini, yığıncaqda iştirak edənlərin sayını daxil edirsiniz və nəticə əldə edirsiniz - qalmalı olan məsləhətlərin miqdarı.

Başlanğıc

Proqramın tam interfeysi belə görünür:

İlk hərəkət - Layihə bazasını yükləyin. Onu Android Studio 3.0 və ya daha yeni versiyada açın. Layihəni qurub icra edirik və ağ ekran görürük. Hər şey yaxşı, olması lazım olduğu kimidir.

İstifadəçinin hərəkətləri layihədə xronoloji ardıcıllıqla yazılır ki, hər şey aydın olsun. Onu görmək üçün View -> Tool Windows -> TODO açın.

Layihəni öyrənirik və rəng palitrasını qiymətləndirmək üçün colors.xml faylını açırıq. strings.xml mətn məlumatlarını (başlıqları), styles.xml isə bir neçə şrift şablonunu ehtiva edir.

Xərc Bölməsinin İnkişafı

activity_main.xml-ni açın və aşağıdakı kodu LinearLayout-a əlavə edin (#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"/>

İndi dəyərlər qovluğuna stil verə və ya istifadə edərək rənglərlə oynaya bilərsiniz material.io aləti.

İndi layihə belə görünür:

Gördüyünüz kimi, dəyərin hesablanması istifadəçi tərəfindən daxil edilmiş məlumatlara əsaslanır.

Hesab bölməsinin inkişafı

Xərc Bölməsindən (№2) sonra LinearLayout-a aşağıdakı kodu əlavə edin:

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

TODOs siyahısından sonra LinearLayout-u bağlayın və sonra onu LinearLayout-a yerləşdirərək yeni kodu əlavə edin (№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"/>

Tətbiqin əsas vəzifəsi restoranda keçirilən toplantılarda iştirak edənlərin hər biri üçün fərdi xərcləri hesablamaq olduğundan, costPerPersonTextView əsas rol oynayır.

EditText girişi bir sətirlə məhdudlaşdırır, bu parametr NumberDecimal inputType olaraq təyin edilməlidir.

Test üçün layihəyə başlayırıq və ümumi zərərin parametrlərini (sınmış fincanlar, boşqablar və s.)

"İnsanlar və məsləhətlər" bölməsinin inkişafı

İpucu məbləği seçicisi əlavə etmək üçün aşağıdakı kodu yeni LinearLayout bölməsinə yapışdırı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>

Bu kod parçası ipucu məbləğini dəqiq hesablamaq üçün tələb olunur. Defolt mətn dəyəri 20-dir. ImageButtons yazma icazəsi olan qovluqda nişanlar ilə təmin edilir.

Bütün bölməni kopyalayın və aşağıdakıları əlavə edin (№ 5):

ImageButton idləri (subtractPeopleButton, addPeopleButton)
TextView id-ləri (numberOfPeopleStaticText, numberOfPeopleTextView)
numberOfPeopleTextView üçün DefaultText (4 olmalıdır).

İndi tətbiqi işə salarkən faktura məbləğini əlavə etmək mümkündür, Əlavə et / Çıxart düymələri də işləyir, lakin hələlik heç nə baş vermir.

Baxışlar əlavə edin

MainActivity.kt-ni açın və bunu initViews funksiyasına əlavə edin (#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
 
}

Düymələrin tamamlanması

Düymə kliklərinə dəstək əlavə etmək üçün sinif səviyyəsində View.OnClickListener tətbiq edin (#7):

sinif MainActivity: AppCompatActivity(), View.OnClickListener {

Layihəni hazırda tərtib etmək işləməyəcək, daha bir neçə addım yerinə yetirməlisiniz (# 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()
        }
    }

Düymələr və açarlar baxımından Kotlin hər şeyi çox gözəl təşkil edir! Aşağıdakı kodu bütün artırma və azaltma funksiyalarına əlavə edin
(#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()
        }
    }

Burada kod artım funksiyalarını maksimum dəyərlərlə qoruyur (MAX_TIP & MAX_PEOPLE). Bundan əlavə, kod azalma funksiyalarını minimum dəyərlərlə qoruyur (MIN_TIP & MIN_PEOPLE).

İndi düymələri initViews funksiyasında dinləyicilərə bağlayırıq (#13):

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

İndi siz ümumi zərər, məsləhətlər və görüş iştirakçılarının sayını əlavə edə bilərsiniz. Yaxşı, indi ən vacib şey ...

Xərclər bölməsi

Bu kod xərcləri hesablayır (№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)
 
}

Yaxşı, burada şirkətdəki insanların sayını nəzərə almağa və ipucunu hesablamağa imkan verən bir funksiya çağırılır (№15):

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

Tətbiqi işə salırıq. Görünür və əla işləyir. Amma daha yaxşı ola bilərdi.

Hesab məbləğini silməyə və sonra göstərişlərin və ya dostların sayını artırmağa cəhd etsəniz, hələ sıfır xərc yoxlaması olmadığı üçün proqram qəzaya uğrayacaq. Üstəlik, faktura məbləğini dəyişməyə cəhd etsəniz, ödənişlər yenilənməyəcək.

Son addımlar

TextWatcher əlavə edin (#16):

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

Sonra billEditText dinləyicisini yerləşdirdik (#17):

billEditText.addTextChangedListener(bu)

Əlavə olaraq TextWatcher-i (#18) yerinə yetirmək üçün kod əlavə edin:

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

Yaxşı, indi hər şey işləyir! Təbrik edirik, siz Kotlin dilində öz "Tipping Calculator" yazdınız.

Skillbox tövsiyə edir:

İki illik praktik kurs "Mən PRO Veb Tərtibatçıyam".

Onlayn kurs "C# Developer".

Praktiki il kursu "PHP tərtibçisi 0-dan PRO".

Mənbə: www.habr.com

Kotlin-də ipucu kalkulyatoru qurmaq: necə işləyir?