Ti mostriamo come creare una semplice applicazione per il calcolo delle mance in Kotlin. Per essere più precisi, Kotlin 1.3.21, Android 4, Android Studio 3. L'articolo sarà interessante, prima di tutto, per coloro che iniziano il loro viaggio nello sviluppo di applicazioni Android. Ti permette di capire cosa e come funziona all'interno dell'applicazione.
Tale calcolatore è utile quando è necessario calcolare la quantità di mance da un'azienda che decide di trascorrere del tempo in un ristorante o in un bar. Certo, non tutti e non sempre lasciano il tè ai camerieri, questa è più una tradizione occidentale, ma il processo di sviluppo di un'applicazione del genere è comunque interessante.
Ti ricordiamo: per tutti i lettori di "Habr" - uno sconto di 10 rubli al momento dell'iscrizione a qualsiasi corso Skillbox utilizzando il codice promozionale "Habr".
Skillbox consiglia: Corso pratico .
Ecco come appare l'app quando è in esecuzione:
Inserisci la percentuale desiderata dell'importo totale, il numero di partecipanti alla riunione e ottieni il risultato: la quantità di mance che dovrebbero essere lasciate.
Начинаем
L'interfaccia completa dell'app è simile a questa:
Prima azione - . Aprilo in Android Studio 3.0 o versioni successive. Costruiamo ed eseguiamo il progetto e vediamo uno schermo bianco. Va tutto bene, come dovrebbe essere.
Le azioni dell'utente sono scritte nel progetto in ordine cronologico, in modo che tutto sia chiaro. Per visualizzarlo, apri Visualizza -> Tool Windows -> TODO.
Studiamo il progetto e apriamo colors.xml per valutare la tavolozza dei colori. strings.xml contiene dati di testo (didascalie) e styles.xml contiene diversi modelli di font.
Sviluppo della sezione dei costi
Apri activity_main.xml e aggiungi il codice seguente a 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"/>Ora puoi modellare la directory dei valori o giocare con i colori usando .
Ora il progetto si presenta così:
Come puoi vedere, il calcolo del costo si basa sui dati inseriti dall'utente.
Sviluppo della sezione account
Aggiungi il codice seguente al LinearLayout dopo la sezione delle spese (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>Chiudi LinearLayout dopo l'elenco TODO, quindi aggiungi il nuovo codice, inserendolo all'interno di 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"/>Poiché il compito principale dell'applicazione è calcolare i costi individuali per ciascuno dei partecipanti agli incontri nel ristorante, costPerPersonTextView svolge il ruolo principale.
EditText limita l'input a una riga, questo parametro deve essere impostato su NumberDecimal inputType.
Avviamo il progetto per il test e inseriamo i parametri del danno totale (tazze, piatti rotti, ecc.)
Sviluppo della sezione "Persone e Suggerimenti".
Per aggiungere un selettore dell'importo della mancia, incolla il codice qui sotto in una nuova sezione 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>Questo pezzo di codice è necessario per calcolare con precisione l'importo della mancia. Il valore di testo predefinito è 20. Gli ImageButton sono dotati di icone in una cartella con permessi di scrittura.
Copia l'intera sezione e aggiungi quanto segue (n. 5):
- ID ImageButton (subtractPeopleButton, addPeopleButton)
- ID TextView (numberOfPeopleStaticText, numberOfPeopleTextView)
- DefaultText per numberOfPeopleTextView (dovrebbe essere 4).
Ora, all'avvio dell'applicazione, è possibile aggiungere l'importo della fattura, funzionano anche i pulsanti Aggiungi / Sottrai, ma non succede ancora nulla.
Aggiungi visualizzazioni
Apri MainActivity.kt e aggiungilo alla funzione 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
}Finire i bottoni
Per aggiungere il supporto per i clic sui pulsanti, implementa View.OnClickListener a livello di classe (#7):
classe MainActivity: AppCompatActivity(), View.OnClickListener {
La compilazione del progetto in questo momento non funzionerà, è necessario eseguire alcuni passaggi in più (# 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()
}
}
In termini di pulsanti e interruttori, Kotlin ha organizzato tutto alla grande! Aggiungi il codice seguente a tutte le funzioni di incremento e decremento
(#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()
}
}Qui il codice protegge le funzioni di incremento con valori massimi (MAX_TIP e MAX_PEOPLE). Inoltre, il codice protegge le funzioni di decremento con valori minimi (MIN_TIP e MIN_PEOPLE).
Ora leghiamo i pulsanti agli ascoltatori nella funzione initViews (#13):
private fun initViews() {
...
addTipButton.setOnClickListener(this)
subtractTipButton.setOnClickListener(this)
addPeopleButton.setOnClickListener(this)
subtractPeopleButton.setOnClickListener(this)
//TODO #15: Bind EditText to TextWatcher
}
Ora puoi aggiungere danni totali, suggerimenti e il numero di partecipanti alla riunione. Bene, ora la cosa più importante...
Sezione costi
Questo codice calcola i costi (#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)
}Bene, qui viene chiamata una funzione che consente di tenere conto del numero di persone in azienda e calcolare la mancia (#15):
private fun incrementTip() {
…
}
private fun decrementTip() {
…
}
private fun incrementPeople() {
…
}
private fun decrementPeople() {
…
}Lanciamo l'applicazione. Sembra e funziona alla grande. Ma potrebbe essere migliore.
Se provi a rimuovere l'importo del conto e poi aumenti il numero di suggerimenti o amici, l'app andrà in crash perché non c'è ancora il controllo per i costi zero. Inoltre, se provi a modificare l'importo della fattura, gli addebiti non verranno aggiornati.
Passi finali
Aggiungi TextWatcher (#16):
classe MainActivity: AppCompatActivity(), View.OnClickListener, TextWatcher {
Quindi incorporiamo il listener billEditText (#17):
billEditText.addTextChangedListener(questo)
Inoltre aggiungi il codice per eseguire 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) {}
Bene, ora funziona tutto! Congratulazioni, hai scritto il tuo "Calcolatrice di mance" in Kotlin.
Skillbox consiglia:
- Corso pratico di due anni .
- Corso online .
- Corso pratico annuale .
Fonte: habr.com