Говоримо вам како да направите једноставну апликацију за израчунавање савета у Котлину. Тачније, Котлин 1.3.21, Андроид 4, Андроид Студио 3. Чланак ће бити занимљив, пре свега, за оне који почињу свој пут у развоју Андроид апликација. Омогућава вам да разумете шта и како функционише унутар апликације.
Овај калкулатор ће вам добро доћи када треба да израчунате количину бакшиша од компаније која одлучи да проведе време у ресторану или кафићу. Наравно, не остављају сви увек напојницу конобарима, ово је више западњачка традиција, али процес развоја такве апликације је у сваком случају занимљив.
Подсећамо: за све читаоце „Хабра“ – попуст од 10 рубаља при упису на било који курс Скиллбок користећи промотивни код „Хабр“.
Скиллбок препоручује: Практични курс .
Овако апликација изгледа у раду:
Уписујете жељени проценат од укупног износа, број учесника састанка и добијате резултат – износ напојнице који треба да оставите.
Геттинг стартед
Комплетан интерфејс апликације изгледа овако:
Прва акција - . Отворите га у Андроид Студију 3.0 или новијој. Градимо и покрећемо пројекат и видимо бели екран. Све је у реду, тако треба.
Акције корисника су записане у пројекту хронолошким редом како би све било јасно. Да бисте га видели, отворите Приказ -> Прозори алата -> ТОДО.
Проучавамо пројекат и отварамо цолорс.кмл да проценимо палету боја. стрингс.кмл садржи текстуалне податке (потписе), а стилес.кмл садржи неколико шаблона фонтова.
Развој секције трошкова
Отворите ацтивити_маин.кмл и додајте код испод у ЛинеарЛаиоут (#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"/>Сада можете стилизовати директоријум вредности или се играти бојама користећи .
Сада пројекат изгледа овако:
Као што видите, трошкови се израчунавају на основу података које унесе корисник.
Развој одељења за рачуне
Додајте код испод у ЛинеарЛаиоут након одељка за трошкове (#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>Затварамо ЛинеарЛаиоут након листе ТОДО-а, а затим додајемо нови код, стављајући га унутар ЛинеарЛаиоут-а (#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"/>Пошто је главни задатак апликације израчунавање појединачних трошкова за сваког учесника у ресторанском скупу, главну улогу има цостПерПерсонТектВиев.
ЕдитТект ограничава унос на један ред, овај параметар мора бити подешен на НумберДецимал инпутТипе.
Покрећемо пројекат за тестирање и уносимо параметре за општа оштећења (разбијене чаше, тањири итд.)
Развој одељка „Људи и савети“.
Да бисте додали избор волумена савета, налепите код испод у нови одељак ЛинеарЛаиоут (#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):
- ИД-ови ИмагеБуттон (одузмиПеоплеБуттон, аддПеоплеБуттон)
- ТектВиев ИД-ови(нумберОфПеоплеСтатицТект, нумберОфПеоплеТектВиев)
- Подразумевани текст за нумберОфПеоплеТектВиев (мора бити 4).
Сада, када покренете апликацију, постоји могућност да додате износ фактуре, дугмад „Додај/Одузми“ такође функционишу, али се још ништа не дешава.
Додавање погледа
Отворите МаинАцтивити.кт и додајте ово у функцију инитВиевс (#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
}Завршавање дугмади
Да бисмо додали подршку за кликове на дугме, имплементирамо Виев.ОнЦлицкЛистенер на нивоу класе (#7):
цласс МаинАцтивити: АппЦомпатАцтивити(), Виев.ОнЦлицкЛистенер {
Неће бити могуће компајлирати пројекат тренутно, потребно је да извршите још неколико корака (#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()
}
}Овде код штити функције повећања са максималним вредностима (МАКС_ТИП & МАКС_ПЕОПЛЕ). Поред тога, код штити функције смањења минималним вредностима (МИН_ТИП & МИН_ПЕОПЛЕ).
Сада повезујемо дугмад са слушаоцима у функцији инитВиевс (#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() {
…
}Хајде да покренемо апликацију. Изгледа и ради одлично. Али могло би бити боље.
Ако покушате да уклоните износ рачуна, а затим повећате број савета или пријатеља, апликација ће се срушити јер још нема провере за нулту вредност трошкова. Штавише, ако покушате да промените износ рачуна, трошкови се неће ажурирати.
Завршни кораци
Додајте ТектВатцхер (#16):
цласс МаинАцтивити: АппЦомпатАцтивити(), Виев.ОнЦлицкЛистенер, ТектВатцхер {
Затим уграђујемо слушалац биллЕдитТект (#17):
биллЕдитТект.аддТектЦхангедЛистенер(ово)
Плус додајемо код за извршавање ТектВатцхер-а (#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) {}
Па, сада апсолутно све функционише! Честитамо, написали сте сопствени „калкулатор савета“ у Котлину.
Скиллбок препоручује:
- Двогодишњи практични курс .
- Онлајн курс .
- Практична година курса .
Извор: ввв.хабр.цом