Elmondjuk, hogyan hozhat létre egyszerű alkalmazást a tippek kiszámításához a Kotlinban. Pontosabban Kotlin 1.3.21, Android 4, Android Studio 3. A cikk elsősorban azok számára lesz érdekes, akik az Android alkalmazásfejlesztésben kezdik útjukat. Lehetővé teszi, hogy megértse, mi és hogyan működik az alkalmazáson belül.
Ez a számológép hasznos lesz, ha ki kell számítania a borravalók mennyiségét egy olyan cégtől, amely úgy dönt, hogy egy étteremben vagy kávézóban tölti az idejét. Természetesen nem mindenki hagy borravalót a pincérekre, ez inkább nyugati hagyomány, de egy ilyen alkalmazás kidolgozásának folyamata mindenesetre érdekes.
Emlékeztetünk: a "Habr" minden olvasója számára - 10 000 rubel kedvezmény, ha a "Habr" promóciós kóddal bármely Skillbox tanfolyamra jelentkezik.
A Skillbox a következőket ajánlja: Gyakorlati tanfolyam .
Így néz ki az alkalmazás működés közben:
Beírja a teljes összeg kívánt százalékát, a találkozó résztvevőinek számát, és megkapja az eredményt - a borravaló összegét, amelyet meg kell hagynia.
Első lépések
Az alkalmazás teljes felülete így néz ki:
Első akció - . Nyissa meg az Android Studio 3.0 vagy újabb verziójában. Felépítjük és elindítjuk a projektet, és fehér képernyőt látunk. Minden rendben van, ennek így kell lennie.
A felhasználói műveletek időrendi sorrendben vannak megírva a projektben, hogy minden világos legyen. A megtekintéséhez nyissa meg a Nézet -> Eszközablakok -> TODO lehetőséget.
Tanulmányozzuk a projektet, és megnyitjuk a colors.xml fájlt a színpaletta értékeléséhez. A strings.xml szöveges adatokat (aláírásokat) tartalmaz, a styles.xml pedig számos betűtípussablont tartalmaz.
Költségrész fejlesztés
Nyissa meg az activity_main.xml fájlt, és adja hozzá az alábbi kódot a LinearLayouthoz (#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"/>Most stílusozhatja az értékkönyvtárat, vagy játszhat a színekkel .
A projekt most így néz ki:
Mint látható, a költségeket a felhasználó által megadott adatok alapján számítják ki.
A számlák rész fejlesztése
Adja hozzá az alábbi kódot a LinearLayouthoz a Költség rész után (#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>A TODO-k listája után bezárjuk a LinearLayout-ot, majd új kódot adunk hozzá, és a LinearLayout-ba helyezzük (#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"/>Mivel az alkalmazás fő feladata az egyéni költségek kiszámítása egy éttermi összejövetelen minden résztvevő számára, a costPerPersonTextView játssza a főszerepet.
Az EditText egy sorra korlátozza a bevitelt, ezt a paramétert NumberDecimal inputType értékre kell állítani.
Elindítjuk a projektet a teszthez, és megadjuk az általános sérülések paramétereit (törött csészék, tányérok stb.)
Az „Emberek és tippek” rész fejlesztése
Tippmennyiség kiválasztásához illessze be az alábbi kódot az új LinearLayout szakaszba (#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>Ez a kódrész szükséges a borravaló összegének pontos kiszámításához. Az alapértelmezett szövegérték 20. Az ImageButtons ikonokkal van ellátva egy írási jogosultsággal rendelkező mappában.
Másolja ki teljesen a részt, és adja hozzá a következőket (#5):
- ImageButton azonosítók (SubtractPeopleButton, AddPeopleButton)
- TextView azonosítók (numberOfPeopleStaticText, numberOfPeopleTextView)
- DefaultText for numberOfPeopleTextView (4-nek kell lennie).
Most az alkalmazás elindításakor van lehetőség a számlaösszeg hozzáadására, működnek a „Hozzáadás/Kivonás” gombok is, de még nem történik semmi.
Nézetek hozzáadása
Nyissa meg a MainActivity.kt fájlt, és adja hozzá az initViews függvényhez (#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
}A gombok befejezése
A gombkattintások támogatásához osztályszinten implementáljuk a View.OnClickListener programot (#7):
class MainActivity: AppCompatActivity(), View.OnClickListener {
A projektet jelenleg nem lehet lefordítani, még néhány lépést kell végrehajtania (#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()
}
}
A gombok és kapcsolók tekintetében Kotlin mindent nagyon klasszul szervez! Adja hozzá az alábbi kódot az összes növelő és csökkentő függvényhez
(#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()
}
}Itt a kód maximális értékekkel védi a növelési függvényeket (MAX_TIP és MAX_PEOPLE). Ezenkívül a kód minimális értékekkel védi a csökkentő függvényeket (MIN_TIP és MIN_PEOPLE).
Most társítjuk a gombokat a figyelőkhöz az initViews függvényben (#13):
private fun initViews() {
...
addTipButton.setOnClickListener(this)
subtractTipButton.setOnClickListener(this)
addPeopleButton.setOnClickListener(this)
subtractPeopleButton.setOnClickListener(this)
//TODO #15: Bind EditText to TextWatcher
}
Most hozzáadhatja az összes kártérítést, a tippeket és a megbeszélés résztvevőinek számát. Nos, most a legfontosabb...
Költségszámítás rész
Ez a kód kiszámítja a költségeket (#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)
}Nos, itt egy függvényt hívnak, amely lehetővé teszi a cég létszámának figyelembevételét és a tippek kiszámítását (#15):
private fun incrementTip() {
…
}
private fun decrementTip() {
…
}
private fun incrementPeople() {
…
}
private fun decrementPeople() {
…
}Indítsuk el az alkalmazást. Remekül néz ki és működik. De lehetne jobb is.
Ha megpróbálja eltávolítani a számla összegét, majd növeli a borravalók vagy barátok számát, az alkalmazás összeomlik, mert még nincs ellenőrzés a nulla költség értékére vonatkozóan. Sőt, ha megpróbálja módosítani a számla összegét, a díjak nem frissülnek.
Utolsó lépések
TextWatcher hozzáadása (#16):
class MainActivity: AppCompatActivity(), View.OnClickListener, TextWatcher {
Ezután beágyazzuk a billEditText figyelőt (#17):
billEditText.addTextChangedListener(this)
Ezenkívül kódot adunk a TextWatcher futtatásához (#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) {}
Nos, most teljesen minden működik! Gratulálunk, Ön megírta a saját „Bicc-kalkulátorát” Kotlin nyelven.
A Skillbox a következőket ajánlja:
- Két éves gyakorlati tanfolyam .
- Online tanfolyam .
- Gyakorlati évfolyam .
Forrás: will.com