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

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

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

Напомняме: за всички читатели на «Хабра» — отстъпка от 10 000 рубли при записване на всеки курс Skillbox с промокод «Хабр».

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

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

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

Започваме

Целият интерфейс на приложението изглежда по следния начин:




Първото действие — зареждане на основата на проекта. Отваряме я в Android Studio 3.0 или по-нова версия. Създаваме и стартираме проекта и виждаме бял екран. Всичко е наред, така и трябва да бъде.Действията на потребителя са описани в проекта в хронологичен ред, за да бъде всичко ясно. За да го видите, отворете View -> Tool Windows -> TODO.

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

Разработка на раздела за разходи.

Отваряме activity_main.xml и добавяме следния код в LinearLayout (#1):

Сега можете да настроите стила на директорията values или да експериментирате с цветовете, използвайки

инструмента material.io. Сега проектът изглежда така:.

Как виждате, изчислението на разходите се извършва на базата на данните, въведени от потребителя.

Разработка на раздела за сметки.

Добавяме кода, представен по-долу, в LinearLayout след раздела за разходи (#2):

<! — TODO #3: Build Bill Section →…

Затваряме LinearLayout след списъка TODOs и след това добавяме нов код, разположен вътре в LinearLayout (#3):

Основната задача на приложението е да изчисли индивидуалните разходи за всеки участник в ресторантските навици, така че основното значение има costPerPersonTextView.

EditText ограничава въвеждането на данни до един ред, а стойността на този параметър трябва да бъде NumberDecimal inputType.

Стартираме проекта за тест и въвеждаме параметри за общите щети (разбити чаши, чинии и т.н.)

Разработка на раздела „Хора и бакшиши“

За да добавим опция за обем на бакшишите, вмъкваме следния код в новия LinearLayout (#4):

Този блок код е необходим за точен изчисление на сумата на бакшишите. Дефолтната стойност на текста е 20. ImageButtons са снабдени с иконки в папката с права за запис.

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

• ImageButton ids (subtractPeopleButton, addPeopleButton)
• TextView ids (numberOfPeopleStaticText, numberOfPeopleTextView)
• DefaultText за numberOfPeopleTextView (трябва да бъде 4).

Сега, когато стартираме приложението, можем да добавим сумата на сметката, а бутоните „Добави/Извади“ работят, но все още нищо не се случва.

Добавяме Views

Отваряме 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: Свързване на бутоните с Listener
 
//TODO #16: Свързване на EditText с TextWatcher
 
}

Завършваме бутоните

За да добавим поддръжка за кликвания на бутоните, внедряваме View.OnClickListener на ниво клас (#7):

class 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 е много добре организирано! Добавяме следния код в всички функции increment и decrement
(#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: Свържи EditText с 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):

class 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».

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