Wy fertelle jo hoe't jo in ienfâldige applikaasje meitsje foar it berekkenjen fan tips yn Kotlin. Mear krekter, Kotlin 1.3.21, Android 4, Android Studio 3. It artikel sil ynteressant wêze, earst fan alles, foar dyjingen dy't har reis begjinne yn Android-applikaasjeûntwikkeling. It lit jo begripe wat en hoe't it wurket yn 'e applikaasje.
Dizze rekkenmasine sil fan pas komme as jo it bedrach fan tips moatte berekkenje fan in bedriuw dat beslút tiid troch te bringen yn in restaurant of kafee. Fansels, net elkenien lit altyd in tip oan de obers dit is mear in westerske tradysje, mar it proses fan it ûntwikkeljen fan sa'n applikaasje is yn alle gefallen nijsgjirrich.
Wy herinnerje: foar alle lêzers fan "Habr" - in koarting fan 10 roebel by it ynskriuwen fan in Skillbox-kursus mei de promoasjekoade "Habr".
Skillbox advisearret: Praktyske kursus .
Dit is hoe't de applikaasje derút sjocht yn wurking:
Jo fiere it winske persintaazje fan it totale bedrach, it oantal gearkomste dielnimmers, en krije it resultaat - it bedrach fan tip dat jo moatte ferlitte.
Begjin te begjinnen
De folsleine applikaasje-ynterface sjocht der sa út:
Earste aksje - . Iepenje it yn Android Studio 3.0 of letter. Wy bouwe en lansearje it projekt en sjogge in wyt skerm. Alles is goed, sa moat it wêze.
Brûkersaksjes wurde yn it projekt yn gronologyske folchoarder skreaun om alles dúdlik te meitsjen. Om it te besjen, iepenje View -> Tool Windows -> TODO.
Wy studearje it projekt en iepenje colors.xml om it kleurpalet te evaluearjen. strings.xml befettet tekstgegevens (hântekeningen), en styles.xml befettet ferskate lettertypesjabloanen.
Untwikkeling fan kosten seksje
Iepenje activity_main.xml en foegje de koade hjirûnder ta oan de 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"/>No kinne jo de weardenmap stylearje of spielje mei kleuren brûke .
No sjocht it projekt der sa út:
Sa't jo sjen kinne, kosten wurde berekkene op basis fan de gegevens ynfierd troch de brûker.
Untwikkeling fan de rekkens seksje
Foegje de koade hjirûnder ta oan de LinearLayout nei de seksje útjeften (#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>Wy slute de LinearLayout nei de list mei TODO's, en foegje dan nije koade ta, pleatse it yn 'e 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"/>Sûnt de haadtaak fan 'e applikaasje is om yndividuele kosten te berekkenjen foar elke dielnimmer oan in restaurantgearkomste, spilet costPerPersonTextView de haadrol.
EditText beheint de ynfier ta ien rigel, dizze parameter moat ynsteld wurde op NumberDecimal inputType.
Wy lansearje it projekt foar de test en fiere de parameters yn foar algemiene skea (brutsen bekers, platen, ensfh.)
Untwikkeling fan 'e seksje "Minsken en tips".
Om in seleksje fan tipvolumint ta te foegjen, plak de koade hjirûnder yn 'e nije LinearLayout-seksje (#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>Dizze seksje fan koade is nedich om it tipbedrach sekuer te berekkenjen. De standert tekstwearde is 20. ImageButtons wurde foarsjoen fan ikoanen yn in map mei skriuwrjochten.
Kopiearje de seksje folslein en foegje it folgjende ta (#5):
- ImageButton-id's (PeopleButton subtractearje,PeopleButton tafoegje)
- TextView ids (numberOfPeopleStaticText, numberOfPeopleTextView)
- Standerttekst foar numberOfPeopleTextView (moat 4 wêze).
No, as jo de applikaasje starte, is d'r in kâns om it faktuerbedrach ta te foegjen, de knoppen "Tafoegje / subtractearje" wurkje ek, mar der bart noch neat.
Views tafoegje
Iepenje MainActivity.kt en foegje dit ta oan de funksje 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
}Finishing de knoppen
Om stipe ta te foegjen foar klikken op knop, implementearje wy View.OnClickListener op klassenivo (#7):
class MainActivity: AppCompatActivity(), View.OnClickListener {
It sil no net mooglik wêze om it projekt te kompilearjen, jo moatte noch in pear stappen útfiere (#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()
}
}
Wat knoppen en skeakels oanbelanget, organisearret Kotlin alles heul cool! Foegje de koade hjirûnder ta oan alle tanimmende en fermindere funksjes
(#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()
}
}Hjir beskermet de koade de ynkrementfunksjes mei maksimale wearden (MAX_TIP & MAX_PEOPLE). Derneist beskermet de koade de ferminderingsfunksjes mei minimale wearden (MIN_TIP & MIN_PEOPLE).
No assosjearje wy de knoppen mei harkers yn 'e funksje initViews (#13):
private fun initViews() {
...
addTipButton.setOnClickListener(this)
subtractTipButton.setOnClickListener(this)
addPeopleButton.setOnClickListener(this)
subtractPeopleButton.setOnClickListener(this)
//TODO #15: Bind EditText to TextWatcher
}
Jo kinne no totale skea, tips, en it oantal gearkomste dielnimmers tafoegje. No, no it wichtichste ...
Kosten berekkening seksje
Dizze koade berekkent kosten (#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)
}No, hjir wurdt in funksje neamd dy't it mooglik makket om rekken te hâlden mei it oantal minsken yn it bedriuw en tips te berekkenjen (#15):
private fun incrementTip() {
…
}
private fun decrementTip() {
…
}
private fun incrementPeople() {
…
}
private fun decrementPeople() {
…
}Litte wy de applikaasje starte. It sjocht en wurket geweldich. Mar it koe better.
As jo besykje it rekkenbedrach te ferwiderjen en dan it oantal tips of freonen te ferheegjen, sil de applikaasje crashe, om't d'r noch gjin kontrôle is foar de nulkostenwearde. Boppedat, as jo besykje it rekkenbedrach te feroarjen, wurde de kosten net bywurke.
Finale stappen
TextWatcher tafoegje (#16):
klasse MainActivity: AppCompatActivity(), View.OnClickListener, TextWatcher {
Dan ynbêde wy de rekkenEditText-harker yn (#17):
billEditText.addTextChangedListener(dit)
Plus wy foegje koade ta om TextWatcher út te fieren (#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, no wurket absolút alles! Lokwinske, jo hawwe jo eigen "Tip Calculator" skreaun yn Kotlin.
Skillbox advisearret:
- Twa jier praktyske kursus .
- Online kursus .
- Praktyske jierkursus .
Boarne: www.habr.com