Изградба на калкулатор за бакшиш во Котлин: како функционира?

Ви покажуваме како да креирате едноставна апликација за пресметка на бакшиш во Котлин. Да бидам попрецизен, Kotlin 1.3.21, Android 4, Android Studio 3. Статијата ќе биде интересна, пред се, за оние кои го започнуваат своето патување во развивање на Android апликации. Ви овозможува да разберете што и како функционира внатре во апликацијата.

Таквиот калкулатор е корисен кога треба да ја пресметате количината на бакшиш од компанија што ќе одлучи да помине време во ресторан или кафуле. Се разбира, не секој и не секогаш остава чај за келнерите, ова е повеќе западна традиција, но процесот на развој на таква апликација е интересен во секој случај.

Потсетуваме: за сите читатели на „Хабр“ - попуст од 10 рубли при запишување на кој било курс Skillbox користејќи го промотивниот код „Хабр“.

Skillbox препорачува: Практичен курс „Mobile Developer PRO.

Еве како изгледа апликацијата кога работи:

Го внесувате саканиот процент од вкупниот износ, бројот на учесници на состанокот и го добивате резултатот - количината на бакшишот што треба да се остави.

Да започнеме

Целосниот интерфејс на апликацијата изгледа вака:




Првата акција - преземање на базата на проектот. Отворете го во Android Studio 3.0 или понова верзија. Ние го градиме и работиме проектот и гледаме бел екран. Сè е во ред, како што треба да биде.

Дејствата на корисниците се напишани во проектот по хронолошки редослед, така што сè е јасно. За да го видите, отворете View -> Tool Windows -> TODO.

Го проучуваме проектот и отвораме бои.xml за да ја оцениме палетата на бои. strings.xml содржи текстуални податоци (наслови), а styles.xml содржи неколку шаблони за фонтови.

Развој на делот за трошоци

Отворете го activity_main.xml и додајте го кодот подолу во 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"/>

Сега можете да го стилизирате директориумот со вредности или да играте со бои користејќи Material.io алатка.

Сега проектот изгледа вака:

Како што можете да видите, пресметката на трошоците се базира на податоците внесени од корисникот.

Развој на делот за сметка

Додајте го кодот подолу во LinearLayout по делот за трошоци (#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>

Затворете го LinearLayout по списокот TODOs, а потоа додадете го новиот код, ставајќи го во 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"/>

Бидејќи главната задача на апликацијата е да ги пресмета индивидуалните трошоци за секој од учесниците на собирите во ресторанот, главната улога ја игра costPerPersonTextView.

EditText го ограничува внесувањето на една линија, овој параметар мора да биде поставен на NumberDecimal inputType.

Го започнуваме проектот за тестот и ги внесуваме параметрите на вкупната штета (скршени чаши, чинии итн.)

Развој на делот „Луѓе и совети“.

За да додадете избирач на износот на бакшишот, залепете го кодот подолу во нов дел 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>

Овој дел од кодот е потребен за прецизно пресметување на износот на бакшишот. Стандардната вредност на текстот е 20. Копчињата за слика се обезбедени со икони во папка со дозволи за пишување.

Копирајте го целиот дел и додајте го следново (#5):

• Идентификатори на копчињата за слики (одземете го копчето за луѓе, додадете го копчето за луѓе)
• TextView ID (numberOfPeopleStaticText, numberOfPeopleTextView)
• Стандарден текст за numberOfPeopleTextView (треба да биде 4).

Сега, при стартување на апликацијата, можно е да се додаде износот на фактурата, работат и копчињата Додај/Одземи, но засега ништо не се случува.

Додадете прегледи

Отворете MainActivity.kt и додајте го ова во функцијата 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
 
}

Завршување на копчињата

За да додадете поддршка за кликање на копчињата, имплементирајте View.OnClickListener на ниво на класа (#7):

класа MainActivity: AppCompatActivity(), View.OnClickListener {

Составувањето на проектот во моментов нема да работи, треба да извршите уште неколку чекори (# 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()
        }
    }

Во однос на копчињата и прекинувачите, Котлин има сè организирано многу кул! Додадете го кодот подолу на сите функции за зголемување и намалување
(#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()
        }
    }

Овде кодот ги штити функциите за зголемување со максимални вредности (MAX_TIP и MAX_PEOPLE). Покрај тоа, кодот ги штити функциите за намалување со минимални вредности (MIN_TIP и MIN_PEOPLE).

Сега ги врзуваме копчињата за слушателите во функцијата initViews (#13):

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

Сега можете да додадете вкупна штета, совети и број на учесници на состанокот. Па, сега најважното...

Дел за трошоци

Овој код ги пресметува трошоците (#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)
 
}

Па, овде се нарекува функција која овозможува да се земе предвид бројот на луѓе во компанијата и да се пресмета врвот (#15):

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

Ја стартуваме апликацијата. Изгледа и работи одлично. Но, може да биде подобро.

Ако се обидете да го отстраните износот на сметката и потоа да го зголемите бројот на совети или пријатели, апликацијата ќе падне бидејќи сè уште нема проверка за нула трошоци. Покрај тоа, ако се обидете да го промените износот на фактурата, трошоците нема да се ажурираат.

Последни чекори

Додај TextWatcher (#16):

класа MainActivity: AppCompatActivity(), View.OnClickListener, TextWatcher {

Потоа го вградуваме слушателот billEditText (#17):

billEditText.addTextChangedListener(ова)

Плус додадете код за да се изврши 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) {}

Па, сега сè функционира! Честитки, напишавте свој „Калкулатор за бакшиш“ во Котлин.

Skillbox препорачува:

• Двегодишен практичен курс „Јас сум PRO Web Developer“.
• Онлајн курс „C# програмер“.
• Практичен годишен курс „Програмер на PHP од 0 до PRO“.

Извор: www.habr.com