Създаване на калкулатор за бакшиши в Kotlin: как работи?

Показваме ви как да създадете просто приложение за изчисляване на бакшиши в Kotlin. За да бъдем по-точни, Kotlin 1.3.21, Android 4, Android Studio 3. Статията ще бъде интересна преди всичко за тези, които започват своето пътуване в разработването на приложения за Android. Позволява ви да разберете какво и как работи вътре в приложението.

Такъв калкулатор е полезен, когато трябва да изчислите размера на бакшишите от компания, която реши да прекара време в ресторант или кафене. Разбира се, не всеки и не винаги оставя чай на сервитьорите, това е по-скоро западна традиция, но процесът на разработване на такова приложение във всеки случай е интересен.

Напомняме ви: за всички читатели на "Habr" - отстъпка от 10 000 рубли при записване във всеки курс Skillbox, използвайки промоционалния код на "Habr".

Skillbox препоръчва: Практически курс „Мобилен разработчик PRO.

Ето как изглежда приложението, когато работи:

Въвеждате желания процент от общата сума, броя на участниците в срещата и получавате резултата - количеството бакшиши, което трябва да оставите.

Първи стъпки

Пълният интерфейс на приложението изглежда така:




Първо действие - изтегляне на базата на проекта. Отворете го в Android Studio 3.0 или по-нова версия. Създаваме и изпълняваме проекта и виждаме бял екран. Всичко е наред, както трябва да бъде.

Действията на потребителите са записани в проекта в хронологичен ред, така че всичко да е ясно. За да го видите, отворете View -> Tool Windows -> TODO.

Проучваме проекта и отваряме colors.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 след списъка със задачи и след това добавете новия код, като го поставите вътре в 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. ImageButtons се предоставят с икони в папка с разрешения за запис.

Копирайте целия раздел и добавете следното (#5):

• Идентификатори на ImageButton (изваждане на PeopleButton, добавяне на PeopleButton)
• TextView идентификатори (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()
        }
    }

По отношение на бутоните и превключвателите, Kotlin има всичко организирано много готино! Добавете кода по-долу към всички функции за увеличаване и намаляване
(#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(this)

Освен това добавете код за изпълнение на 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) {}

Е, сега всичко работи! Поздравления, написахте свой собствен „Калкулатор за бакшиши“ в Kotlin.

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

• Двугодишен практически курс „Аз съм PRO уеб програмист“.
• Онлайн курс "C# разработчик".
• Практически годишен курс „PHP разработчик от 0 до PRO“.

Източник: www.habr.com