Vă arătăm cum să creați o aplicație simplă de calcul al bacșișului în Kotlin. Mai precis, Kotlin 1.3.21, Android 4, Android Studio 3. Articolul va fi interesant, în primul rând, pentru cei care își încep călătoria în dezvoltarea aplicațiilor Android. Vă permite să înțelegeți ce și cum funcționează în interiorul aplicației.
Un astfel de calculator este util atunci când trebuie să calculați cantitatea de bacșișuri de la o companie care decide să petreacă timp într-un restaurant sau cafenea. Desigur, nu toată lumea și nu întotdeauna lasă ceai pentru ospătari, aceasta este mai mult o tradiție occidentală, dar procesul de dezvoltare a unei astfel de aplicații este interesant în orice caz.
Amintim: pentru toți cititorii „Habr” - o reducere de 10 de ruble la înscrierea la orice curs Skillbox folosind codul promoțional „Habr”.
Skillbox recomandă: Curs practic .
Iată cum arată aplicația când rulează:
Introduceți procentul dorit din suma totală, numărul de participanți la întâlnire și obțineți rezultatul - cantitatea de bacșișuri care ar trebui lăsate.
Noțiuni de bază
Interfața completă a aplicației arată astfel:
Prima acțiune - . Deschideți-l în Android Studio 3.0 sau o versiune ulterioară. Construim și rulăm proiectul și vedem un ecran alb. Totul este bine, așa cum ar trebui să fie.
Acțiunile utilizatorului sunt scrise în proiect în ordine cronologică, astfel încât totul să fie clar. Pentru a-l vizualiza, deschideți View -> Tool Windows -> TODO.
Studiem proiectul și deschidem colors.xml pentru a evalua paleta de culori. strings.xml conține date text (legende), iar styles.xml conține mai multe șabloane de fonturi.
Dezvoltarea secțiunii de costuri
Deschideți activity_main.xml și adăugați codul de mai jos la 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"/>Acum puteți stila directorul de valori sau puteți juca cu culori folosind .
Acum proiectul arată astfel:
După cum puteți vedea, calculul costului se bazează pe datele introduse de utilizator.
Dezvoltarea secțiunii de cont
Adăugați codul de mai jos la LinearLayout după secțiunea de cheltuieli (nr. 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>Închideți LinearLayout după lista TODO, apoi adăugați noul cod, plasându-l în 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"/>Deoarece sarcina principală a aplicației este de a calcula costurile individuale pentru fiecare dintre participanții la adunările din restaurant, costPersonTextView joacă rolul principal.
EditText limitează intrarea la o singură linie, acest parametru trebuie setat la NumberDecimal inputType.
Începem proiectul pentru test și introducem parametrii avariei totale (cupe sparte, farfurii etc.)
Dezvoltarea secțiunii „Oameni și sfaturi”.
Pentru a adăuga un selector al sumei de bacșiș, inserați codul de mai jos într-o nouă secțiune 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>Această bucată de cod este necesară pentru a calcula cu exactitate suma bacșișului. Valoarea implicită a textului este 20. ImageButtons sunt furnizate cu pictograme într-un folder cu permisiuni de scriere.
Copiați întreaga secțiune și adăugați următoarele (#5):
- ID-uri ImageButton (scădereaPeopleButton, addPeopleButton)
- ID-uri TextView (numberOfPeopleStaticText, numberOfPeopleTextView)
- DefaultText pentru numberOfPeopleTextView (ar trebui să fie 4).
Acum, la pornirea aplicației, este posibil să adăugați suma facturii, funcționează și butoanele Adaugă/Scădere, dar până acum nu se întâmplă nimic.
Adăugați vizualizări
Deschide MainActivity.kt și adaugă asta la funcția 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
}Terminarea butoanelor
Pentru a adăuga suport pentru clicurile pe butoane, implementați View.OnClickListener la nivel de clasă (#7):
clasa MainActivity: AppCompatActivity(), View.OnClickListener {
Compilarea proiectului chiar acum nu va funcționa, trebuie să mai efectuați câțiva pași (# 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()
}
}
În ceea ce privește butoanele și comutatoarele, Kotlin are totul organizat foarte tare! Adăugați codul de mai jos la toate funcțiile de creștere și descreștere
(#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()
}
}Aici codul protejează funcțiile de increment cu valori maxime (MAX_TIP și MAX_PEOPLE). În plus, codul protejează funcțiile de decrementare cu valori minime (MIN_TIP & MIN_PEOPLE).
Acum legăm butoanele de ascultători în funcția initViews (#13):
private fun initViews() {
...
addTipButton.setOnClickListener(this)
subtractTipButton.setOnClickListener(this)
addPeopleButton.setOnClickListener(this)
subtractPeopleButton.setOnClickListener(this)
//TODO #15: Bind EditText to TextWatcher
}
Acum puteți adăuga daune totale, sfaturi și numărul de participanți la întâlnire. Ei bine, acum cel mai important lucru...
Secțiunea de costuri
Acest cod calculează costurile (#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)
}Ei bine, aici se numește o funcție care face posibilă luarea în considerare a numărului de persoane din companie și calcularea bacșișului (#15):
private fun incrementTip() {
…
}
private fun decrementTip() {
…
}
private fun incrementPeople() {
…
}
private fun decrementPeople() {
…
}Lansăm aplicația. Arată și funcționează grozav. Dar ar putea fi mai bine.
Dacă încercați să eliminați suma facturii și apoi să creșteți numărul de indicii sau de prieteni, aplicația se va bloca deoarece nu există încă nicio verificare pentru costuri zero. Mai mult, dacă încercați să modificați suma facturii, taxele nu vor fi actualizate.
Pasi finali
Adăugați TextWatcher (#16):
clasa MainActivity: AppCompatActivity(), View.OnClickListener, TextWatcher {
Apoi încorporăm ascultătorul billEditText (#17):
billEditText.addTextChangedListener(this)
Plus adăugați cod pentru a executa 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) {}
Ei bine, acum totul funcționează! Felicitări, ați scris propriul „Calculator de bacșiș” în Kotlin.
Skillbox recomandă:
- Curs practic de doi ani .
- Curs online .
- Curs practic anual .
Sursa: www.habr.com