Ukážeme vám, ako vytvoriť jednoduchú aplikáciu na výpočet prepitného v Kotline. Presnejšie Kotlin 1.3.21, Android 4, Android Studio 3. Článok bude zaujímavý predovšetkým pre tých, ktorí začínajú svoju púť vo vývoji Android aplikácií. Umožňuje vám pochopiť, čo a ako funguje vo vnútri aplikácie.
Takáto kalkulačka je užitočná, keď potrebujete vypočítať množstvo tipov od spoločnosti, ktorá sa rozhodne stráviť čas v reštaurácii alebo kaviarni. Samozrejme, nie každý a nie vždy nechá čaj pre čašníkov, ide skôr o západnú tradíciu, ale proces vývoja takejto aplikácie je v každom prípade zaujímavý.
Pripomíname vám: pre všetkých čitateľov „Habr“ - zľava 10 000 rubľov pri registrácii do akéhokoľvek kurzu Skillbox pomocou propagačného kódu „Habr“.
Skillbox odporúča: Praktický kurz .
Takto vyzerá aplikácia, keď je spustená:
Zadáte požadované percento z celkovej sumy, počet účastníkov stretnutia a získate výsledok - množstvo sprepitného, ktoré by vám malo zostať.
Začíname
Celé rozhranie aplikácie vyzerá takto:
Prvá akcia - . Otvorte ho v Android Studio 3.0 alebo novšom. Vybudujeme a spustíme projekt a vidíme bielu obrazovku. Všetko je v poriadku, ako má byť.
Akcie používateľov sú v projekte zapísané v chronologickom poradí, aby bolo všetko jasné. Ak ho chcete zobraziť, otvorte Zobraziť -> Nástroj Windows -> TODO.
Preštudujeme si projekt a otvoríme súbor colors.xml na vyhodnotenie farebnej palety. strings.xml obsahuje textové údaje (titulky) a styles.xml obsahuje niekoľko šablón písiem.
Vývoj nákladovej sekcie
Otvorte activity_main.xml a pridajte nižšie uvedený kód do 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"/>Teraz môžete štylizovať adresár hodnôt alebo hrať s farbami pomocou .
Teraz projekt vyzerá takto:
Ako vidíte, výpočet nákladov je založený na údajoch zadaných používateľom.
Vývoj sekcie účtu
Pridajte nižšie uvedený kód do LinearLayout za sekciu výdavkov (#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>Zatvorte LinearLayout po zozname TODOs a potom pridajte nový kód umiestnením do 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"/>Keďže hlavnou úlohou aplikácie je vypočítať individuálne náklady pre každého z účastníkov stretnutí v reštaurácii, hlavnú úlohu zohráva costPerPersonTextView.
EditText obmedzuje vstup na jeden riadok, tento parameter musí byť nastavený na NumberDecimal inputType.
Spustíme projekt na skúšku a zadáme parametre celkového poškodenia (rozbité šálky, taniere atď.)
Vývoj sekcie „Ľudia a tipy“.
Ak chcete pridať volič sumy prepitného, prilepte nižšie uvedený kód do novej sekcie 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>Tento kód je potrebný na presný výpočet sumy prepitného. Predvolená textová hodnota je 20. ImageButtons sú vybavené ikonami v priečinku s oprávneniami na zápis.
Skopírujte celú sekciu a pridajte nasledujúce (#5):
- ID obrázkových tlačidiel (subtractPeopleButton, addPeopleButton)
- ID TextView (numberOfPeopleStaticText, numberOfPeopleTextView)
- DefaultText for numberOfPeopleTextView (malo by byť 4).
Teraz pri spustení aplikácie je možné pripočítať sumu faktúry, fungujú aj tlačidlá Pridať / Odčítať, no zatiaľ sa nič nedeje.
Pridať zobrazenia
Otvorte MainActivity.kt a pridajte to do funkcie 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
}Dokončenie tlačidiel
Ak chcete pridať podporu pre kliknutia na tlačidlá, implementujte View.OnClickListener na úrovni triedy (#7):
class MainActivity: AppCompatActivity(), View.OnClickListener {
Kompilácia projektu práve teraz nebude fungovať, musíte vykonať niekoľko ďalších krokov (# 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()
}
}
Pokiaľ ide o tlačidlá a spínače, Kotlin má všetko organizované veľmi cool! Pridajte nižšie uvedený kód do všetkých funkcií zvýšenia a zníženia
(#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()
}
}Tu kód chráni inkrementačné funkcie s maximálnymi hodnotami (MAX_TIP & MAX_PEOPLE). Okrem toho kód chráni dekrementačné funkcie s minimálnymi hodnotami (MIN_TIP & MIN_PEOPLE).
Teraz pripojíme tlačidlá k poslucháčom vo funkcii initViews (#13):
private fun initViews() {
...
addTipButton.setOnClickListener(this)
subtractTipButton.setOnClickListener(this)
addPeopleButton.setOnClickListener(this)
subtractPeopleButton.setOnClickListener(this)
//TODO #15: Bind EditText to TextWatcher
}
Teraz môžete pridať celkové poškodenie, tipy a počet účastníkov stretnutia. No a teraz to najdôležitejšie...
Sekcia nákladov
Tento kód vypočítava náklady (#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)
}Tu sa volá funkcia, ktorá umožňuje brať do úvahy počet ľudí v spoločnosti a vypočítať prepitné (#15):
private fun incrementTip() {
…
}
private fun decrementTip() {
…
}
private fun incrementPeople() {
…
}
private fun decrementPeople() {
…
}Spustíme aplikáciu. Vyzerá a funguje skvele. Ale mohlo by to byť lepšie.
Ak sa pokúsite odstrániť sumu účtu a potom zvýšiť počet tipov alebo priateľov, aplikácia spadne, pretože zatiaľ neexistuje kontrola nulových nákladov. Okrem toho, ak sa pokúsite zmeniť sumu faktúry, poplatky sa neaktualizujú.
Záverečné kroky
Pridať TextWatcher (#16):
class MainActivity: AppCompatActivity(), View.OnClickListener, TextWatcher {
Potom vložíme poslucháč billEditText (#17):
billEditText.addTextChangedListener(this)
Plus pridajte kód na spustenie aplikácie 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) {}
No, teraz všetko funguje! Gratulujeme, napísali ste si vlastnú „Tipovaciu kalkulačku“ v Kotline.
Skillbox odporúča:
- Dvojročný praktický kurz .
- Online kurz .
- Praktický ročníkový kurz .
Zdroj: hab.com