We laten u zien hoe u in Kotlin een eenvoudige applicatie voor het berekenen van fooien kunt maken. Om preciezer te zijn, Kotlin 1.3.21, Android 4, Android Studio 3. Het artikel zal in de eerste plaats interessant zijn voor degenen die hun reis beginnen met het ontwikkelen van Android-applicaties. Hiermee kunt u begrijpen wat en hoe binnen de applicatie werkt.
Zo'n rekenmachine is handig als je het aantal fooien moet berekenen van een bedrijf dat besluit tijd door te brengen in een restaurant of café. Natuurlijk laat niet iedereen en niet altijd thee achter voor obers, dit is meer een westerse traditie, maar het proces van het ontwikkelen van een dergelijke applicatie is in ieder geval interessant.
Herinnering: voor alle lezers van "Habr" - een korting van 10 roebel bij inschrijving voor een Skillbox-cursus met behulp van de promotiecode "Habr".
Skillbox beveelt aan: Praktische cursus .
Zo ziet de applicatie er in gebruik uit:
U voert het gewenste percentage van het totaalbedrag in, het aantal deelnemers aan de bijeenkomst en krijgt het resultaat: het aantal fooien dat overblijft.
Aan de slag
De volledige interface van de app ziet er als volgt uit:
Eerste actie - . Open het in Android Studio 3.0 of hoger. We bouwen en voeren het project uit en zien een wit scherm. Alles is in orde, zoals het zou moeten zijn.
Gebruikersacties worden in chronologische volgorde in het project geschreven om alles duidelijk te maken. Om het te bekijken, open je Beeld -> Hulpprogramma's -> TODO.
We bestuderen het project en openen Colors.xml om het kleurenpalet te evalueren. strings.xml bevat tekstgegevens (bijschriften) en stijlen.xml bevat verschillende lettertypesjablonen.
Ontwikkeling kostensectie
Open Activity_main.xml en voeg de onderstaande code toe aan 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"/>Nu kunt u de waardenmap stylen of met kleuren spelen met behulp van .
Nu ziet het project er als volgt uit:
Zoals u kunt zien, is de kostenberekening gebaseerd op de gegevens die door de gebruiker zijn ingevoerd.
Ontwikkeling van het accountgedeelte
Voeg de onderstaande code toe aan de LinearLayout na de Expense-sectie (#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>Sluit de LinearLayout na de TODOs-lijst en voeg vervolgens de nieuwe code toe, plaats deze in de 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"/>Omdat de hoofdtaak van de applicatie het berekenen van de individuele kosten is voor elk van de deelnemers aan de bijeenkomsten in het restaurant, speelt de costPerPersonTextView de hoofdrol.
EditText beperkt de invoer tot één regel. Deze parameter moet worden ingesteld op NumberDecimal inputType.
We lanceren het project voor de test en voeren de parameters in voor algemene schade (gebroken kopjes, borden, enz.)
Ontwikkeling van de rubriek "Mensen en Tips".
Om een fooibedragkiezer toe te voegen, plakt u de onderstaande code in een nieuwe LinearLayout-sectie (#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>Dit stukje code is nodig om het fooibedrag nauwkeurig te berekenen. De standaard tekstwaarde is 20. ImageButtons zijn voorzien van pictogrammen in een map met schrijfrechten.
Kopieer de hele sectie en voeg het volgende toe (#5):
- ImageButton-ID's (aftrekkenPeopleButton, addPeopleButton)
- TextView-ID's (numberOfPeopleStaticText, numberOfPeopleTextView)
- DefaultText voor numberOfPeopleTextView (moet 4 zijn).
Wanneer u nu de applicatie start, is er de mogelijkheid om het factuurbedrag toe te voegen, de knoppen “Optellen/Aftrekken” werken ook, maar er gebeurt nog niets.
Weergaven toevoegen
Open MainActivity.kt en voeg dit toe aan de initViews-functie (#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
}Het afwerken van de knoppen
Om ondersteuning voor het klikken op knoppen toe te voegen, implementeert u View.OnClickListener op klasniveau (#7):
klasse MainActivity: AppCompatActivity(), View.OnClickListener {
Het project nu compileren zal niet werken, je moet nog een paar stappen uitvoeren (# 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()
}
}
Qua knoppen en schakelaars heeft Kotlin alles heel gaaf georganiseerd! Voeg de onderstaande code toe aan alle verhogings- en verlagingsfuncties
(#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()
}
}Hier beschermt de code de ophoogfuncties met maximale waarden (MAX_TIP & MAX_PEOPLE). Bovendien beschermt de code de decrement-functies met minimumwaarden (MIN_TIP & MIN_PEOPLE).
Nu binden we de knoppen aan de luisteraars in de initViews-functie (#13):
private fun initViews() {
...
addTipButton.setOnClickListener(this)
subtractTipButton.setOnClickListener(this)
addPeopleButton.setOnClickListener(this)
subtractPeopleButton.setOnClickListener(this)
//TODO #15: Bind EditText to TextWatcher
}
U kunt nu de totale schade, fooien en het aantal deelnemers aan de vergadering toevoegen. Nou, nu het allerbelangrijkste...
Kostensectie
Deze code berekent de 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)
}Welnu, hier wordt een functie genoemd die het mogelijk maakt om rekening te houden met het aantal mensen in het bedrijf en de fooi te berekenen (#15):
private fun incrementTip() {
…
}
private fun decrementTip() {
…
}
private fun incrementPeople() {
…
}
private fun decrementPeople() {
…
}Laten we de applicatie starten. Het ziet er geweldig uit en werkt geweldig. Maar het kan beter.
Probeer je het factuurbedrag te verwijderen en vervolgens het aantal hints of vrienden te verhogen, dan crasht de app omdat er nog geen controle op nulkosten is. Als u bovendien het factuurbedrag probeert te wijzigen, worden de kosten niet bijgewerkt.
Laatste stappen
Voeg TextWatcher (#16) toe:
klasse MainActivity: AppCompatActivity(), View.OnClickListener, TextWatcher {
Vervolgens sluiten we de billEditText-listener (#17) in:
billEditText.addTextChangedListener(dit)
Bovendien voegen we code toe om TextWatcher (#18) uit te voeren:
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) {}
Nou, nu werkt alles! Gefeliciteerd, je hebt je eigen "Tipping Calculator" geschreven in Kotlin.
Skillbox beveelt aan:
- Tweejarige praktijkopleiding .
- Online cursus .
- Praktische jaarcursus .
Bron: www.habr.com