Vi viser deg hvordan du lager en enkel tipsberegningsapplikasjon i Kotlin. For å være mer presis, Kotlin 1.3.21, Android 4, Android Studio 3. Artikkelen vil først og fremst være interessant for de som starter reisen sin med å utvikle Android-applikasjoner. Den lar deg forstå hva og hvordan som fungerer inne i applikasjonen.
En slik kalkulator er nyttig når du skal regne ut mengden tips fra et selskap som bestemmer seg for å tilbringe tid på en restaurant eller kafé. Selvfølgelig, ikke alle og ikke alltid forlater te til servitører, dette er mer en vestlig tradisjon, men prosessen med å utvikle en slik applikasjon er interessant i alle fall.
Vi minner om: for alle lesere av "Habr" - en rabatt på 10 000 rubler når du melder deg på et hvilket som helst Skillbox-kurs ved å bruke kampanjekoden "Habr".
Skillbox anbefaler: Praktisk kurs .
Slik ser appen ut når den kjører:
Du legger inn ønsket prosentandel av totalbeløpet, antall deltakere på møtet og får resultatet – mengden tips som skal stå igjen.
Komme i gang
Hele grensesnittet til appen ser slik ut:
Første handling - . Åpne den i Android Studio 3.0 eller nyere. Vi bygger og driver prosjektet og ser en hvit skjerm. Alt er bra, som det skal være.
Brukerhandlinger skrives i prosjektet i kronologisk rekkefølge, slik at alt er klart. For å se den, åpne Vis -> Verktøyvinduer -> TODO.
Vi studerer prosjektet og åpner colors.xml for å evaluere fargepaletten. strings.xml inneholder tekstdata (bildetekster), og styles.xml inneholder flere skriftmaler.
Kostnadsseksjonsutvikling
Åpne activity_main.xml og legg til koden nedenfor i 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"/>Nå kan du style verdikatalogen eller leke med farger ved å bruke .
Nå ser prosjektet slik ut:
Som du kan se, er kostnadsberegningen basert på dataene som er lagt inn av brukeren.
Utvikling av kontodelen
Legg til koden nedenfor i det lineære oppsettet etter utgiftsdelen (#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>Lukk LinearLayout etter TODOs-listen, og legg deretter til den nye koden, plasser den inne i 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"/>Siden hovedoppgaven til applikasjonen er å beregne individuelle kostnader for hver av deltakerne i samlingene i restauranten, spiller costPerPersonTextView hovedrollen.
EditText begrenser inndata til én linje, denne parameteren må settes til NumberDecimal inputType.
Vi starter prosjektet for testen og legger inn parametrene for den totale skaden (ødelagte kopper, tallerkener, etc.)
Utvikling av delen "Mennesker og tips".
For å legge til en tipsbeløpsvelger, lim inn koden nedenfor i en ny LinearLayout-seksjon (#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>Denne kodebiten er nødvendig for nøyaktig å beregne tipsbeløpet. Standard tekstverdi er 20. ImageButtons er utstyrt med ikoner i en mappe med skriverettigheter.
Kopier hele delen og legg til følgende (#5):
- ImageButton-ID-er (subtractPeopleButton, addPeopleButton)
- TextView-ID-er (numberOfPeopleStaticText, numberOfPeopleTextView)
- Standardtekst for NumberOfPeopleTextView (skal være 4).
Nå, når du starter applikasjonen, er det mulig å legge til fakturabeløpet, Legg til / Trekk fra-knappene fungerer også, men så langt skjer ingenting.
Legg til visninger
Åpne MainActivity.kt og legg dette til initViews-funksjonen (#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
}Etterbehandling av knappene
For å legge til støtte for knappeklikk, implementer View.OnClickListener på klassenivå (#7):
klasse MainActivity: AppCompatActivity(), View.OnClickListener {
Å kompilere prosjektet akkurat nå vil ikke fungere, du må utføre noen flere trinn (# 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år det gjelder knapper og brytere, har Kotlin alt organisert veldig kult! Legg til koden nedenfor til alle funksjoner for økning og reduksjon
(#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()
}
}Her beskytter koden inkrementfunksjoner med maksimale verdier (MAX_TIP & MAX_PEOPLE). I tillegg beskytter koden dekrementeringsfunksjoner med minimumsverdier (MIN_TIP & MIN_PEOPLE).
Nå binder vi knappene til lytterne i initViews-funksjonen (#13):
private fun initViews() {
...
addTipButton.setOnClickListener(this)
subtractTipButton.setOnClickListener(this)
addPeopleButton.setOnClickListener(this)
subtractPeopleButton.setOnClickListener(this)
//TODO #15: Bind EditText to TextWatcher
}
Du kan nå legge til totalskade, tips og antall møtedeltakere. Vel, nå er det viktigste...
Kostnadsdelen
Denne koden beregner kostnadene (#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)
}Vel, her kalles det en funksjon som gjør det mulig å ta hensyn til antall personer i bedriften og beregne tipset (#15):
private fun incrementTip() {
…
}
private fun decrementTip() {
…
}
private fun incrementPeople() {
…
}
private fun decrementPeople() {
…
}Vi starter applikasjonen. Det ser og fungerer utmerket. Men det kunne vært bedre.
Hvis du prøver å fjerne regningsbeløpet og deretter øke antall hint eller venner, vil appen krasje fordi det ikke er noen sjekk for null kostnader ennå. I tillegg, hvis du prøver å endre fakturabeløpet, vil ikke kostnadene bli oppdatert.
Siste trinn
Legg til TextWatcher (#16):
klasse MainActivity: AppCompatActivity(), View.OnClickListener, TextWatcher {
Så bygger vi inn billEditText-lytteren (#17):
billEditText.addTextChangedListener(this)
Legg i tillegg til kode for å kjøre 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) {}
Vel, nå fungerer alt! Gratulerer, du har skrevet din egen "Tipping Calculator" i Kotlin.
Skillbox anbefaler:
- Toårig praktisk kurs .
- Online kurs .
- Praktisk årskurs .
Kilde: www.habr.com