Creazione di un calcolatore di mance in Kotlin: come funziona?

Creazione di un calcolatore di mance in Kotlin: come funziona?

Spieghiamo come creare una semplice applicazione per calcolare le mance nel linguaggio Kotlin. Per essere più precisi, Kotlin 1.3.21, Android 4, Android Studio 3. L'articolo sarà interessante, in primo luogo, per coloro che iniziano il loro percorso nello sviluppo di applicazioni Android. Permette di comprendere cosa e come funziona all'interno dell'applicazione.

Questo calcolatore è utile quando è necessario calcolare l'importo delle mance di un gruppo che ha deciso di trascorrere del tempo in un ristorante o caffè. Certo, non tutti e non sempre lasciano mance ai camerieri, è più una tradizione occidentale, ma il processo di sviluppo di tale applicazione è comunque interessante.

Ricordiamo: per tutti i lettori di «Habr» — sconto di 10.000 rubli per l'iscrizione a qualsiasi corso Skillbox con il codice promozionale «Habr».

Skillbox consiglia: Corso pratico «Sviluppatore mobile PRO.

Ecco come appare l'applicazione in fase di funzionamento:

Creazione di un calcolatore di mance in Kotlin: come funziona?

Inserisci la percentuale desiderata sull'importo totale, il numero di partecipanti all'incontro e ottieni il risultato - l'importo delle mance che vale la pena lasciare.

Iniziamo

L'interfaccia completa dell'applicazione appare come segue:
Creazione di un calcolatore di mance in Kotlin: come funziona?

Creazione di un calcolatore di mance in Kotlin: come funziona?

La prima azione - caricamento delle basi del progetto. Apriamolo in Android Studio 3.0 o versione successiva. Costruiamo e avviamo il progetto e vediamo uno schermo bianco. Tutto normale, così deve essere.

Creazione di un calcolatore di mance in Kotlin: come funziona?

Creazione di un calcolatore di mance in Kotlin: come funziona?

Le azioni dell'utente sono scritte nel progetto in ordine cronologico, in modo che tutto sia chiaro. Per visualizzarlo apriamo View -> Tool Windows -> TODO.

Esploriamo il progetto e apriamo colors.xml per valutare la palette dei colori. In strings.xml sono collocati i dati testuali (etichette), mentre in styles.xml ci sono alcuni modelli di font.

Sviluppo della sezione spese

Apriamo activity_main.xml e aggiungiamo il codice sottostante a LinearLayout (#1):

Ora possiamo impostare lo stile della directory values o giocare con i colori, utilizzando lo strumento material.io.

Attualmente il progetto appare così:

Creazione di un calcolatore di mance in Kotlin: come funziona?
Come puoi vedere, il calcolo delle spese viene effettuato in base ai dati inseriti dall'utente.

Sviluppo della sezione conti

Aggiungiamo il codice sottostante a LinearLayout dopo la Sezione Spese (#2):

<! — TODO #3: Costruisci Sezione Conto →
 
…

Chiudiamo il LinearLayout dopo l'elenco delle TODO, quindi aggiungiamo il nuovo codice posizionandolo all'interno del LinearLayout (#3):

Poiché l'obiettivo principale dell'app è calcolare le spese individuali per ciascuno dei partecipanti alle cene nel ristorante, il valore principale è costPerPersonTextView.

EditText limita l'input dei dati a una sola riga, questo parametro deve avere il valore NumberDecimal inputType.

Creazione di un calcolatore di mance in Kotlin: come funziona?
Avviamo il progetto per un test e inseriamo i parametri del danno totale (ciotole, piatti rotti, ecc.)

Sviluppo della sezione "Persone e mance"

Per aggiungere la selezione dell'importo della mancia, inseriamo il codice riportato qui sotto in una nuova sezione LinearLayout (#4):

Questa sezione di codice è necessaria per calcolare con precisione l'ammontare della mancia. Il valore predefinito del testo è 20. Gli ImageButtons sono dotati di icone nella cartella con diritti di scrittura.

Copiamo completamente la sezione e aggiungiamo quanto segue (#5):

  • ID ImageButton (subtractPeopleButton, addPeopleButton)
  • ID TextView (numberOfPeopleStaticText, numberOfPeopleTextView)
  • DefaultText per numberOfPeopleTextView (deve essere 4).

Creazione di un calcolatore di mance in Kotlin: come funziona?

Ora, all'avvio dell'app, c'è la possibilità di aggiungere l'importo del conto, funzionano anche i pulsanti "Aggiungi/Vai" ma per ora non succede nulla.

Aggiungiamo Views

Apriamo MainActivity.kt e aggiungiamo questo nella funzione initViews (#6):

funzione privata 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: Associa i pulsanti al listener
 
//TODO #16: Associa EditText al TextWatcher
}

Ultimiamo i pulsanti

Per aggiungere il supporto al clic dei pulsanti, implementiamo View.OnClickListener a livello di classe (#7):

class MainActivity: AppCompatActivity(), View.OnClickListener {

Compilare il progetto adesso non è possibile, serve eseguire ancora alcune operazioni (#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()
        }
    }

Per quanto riguarda i pulsanti e gli switch, Kotlin è estremamente ben organizzato! Aggiungiamo il codice sottostante a tutte le funzioni di incremento e decremento
(#9–#12):

funzione privata incrementTip() {
        if (tipPercent != MAX_TIP) {
            tipPercent += TIP_INCREMENT_PERCENT
            tipTextView.text = String.format("%d%%", tipPercent)
        }
    }
 
funzione privata decrementTip() {
        if (tipPercent != MIN_TIP) {
            tipPercent -= TIP_INCREMENT_PERCENT
            tipTextView.text = String.format("%d%%", tipPercent)
        }
    }
 
funzione privata incrementPeople() {
        if (numberOfPeople != MAX_PEOPLE) {
            numberOfPeople += PEOPLE_INCREMENT_VALUE
            numberOfPeopleTextView.text = numberOfPeople.toString()
        }
    }
 
funzione privata decrementPeople() {
        if (numberOfPeople != MIN_PEOPLE) {
            numberOfPeople -= PEOPLE_INCREMENT_VALUE
            numberOfPeopleTextView.text = numberOfPeople.toString()
        }
    }

Qui il codice protegge le funzioni di incremento con i valori massimi (MAX_TIP & MAX_PEOPLE). Inoltre, il codice protegge le funzioni di decremento con i valori minimi (MIN_TIP & MIN_PEOPLE).

Ora associamo i pulsanti ai listener nella funzione initViews (#13):

funzione privata initViews() {
 
...
 
addTipButton.setOnClickListener(this)
        subtractTipButton.setOnClickListener(this)
 
addPeopleButton.setOnClickListener(this)
        subtractPeopleButton.setOnClickListener(this)
 
//TODO #15: Associa EditText al TextWatcher
}

Creazione di un calcolatore di mance in Kotlin: come funziona?

Ora è possibile aggiungere danni complessivi, mance e numero di partecipanti all'incontro. E ora, la cosa più importante...

Sezione di calcolo delle spese

Questo codice calcola le spese (#14):

funzione privata 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)
 
}

E qui viene chiamata la funzione che permette di tenere conto del numero di persone nel gruppo e calcolare le mance (#15):

funzione privata incrementaSuggerimento() {
 
…
 
}
 
fine funzione privata decrementaSuggerimento() {
 
…
 
}
 
fine funzione privata incrementaPersone() {
 
…
 
}
 
fine funzione privata decrementaPersone() {
 
…
 
}

Avviamo l'applicazione. Sembra e funziona alla grande. Ma può essere migliore.

Se provate a rimuovere l'importo del conto, e poi ad aumentare il numero di suggerimenti o amici, l'applicazione si arresterà, poiché non c'è ancora un controllo per i valori di spesa nulli. Inoltre, se provate a modificare l'importo del conto, le spese non verranno aggiornate.

Passi finali

Aggiungiamo TextWatcher (#16):

classe MainActivity: AppCompatActivity(), View.OnClickListener, TextWatcher {

Poi integriamo l'ascoltatore billEditText (#17):

billEditText.addTextChangedListener(this)

Inoltre, aggiungiamo il codice per eseguire TextWatcher (#18):

override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
        if (!billEditText.text.isEmpty()) {
            calcolaSpesa()
        }
    }
override fun afterTextChanged(s: Editable?) {}

    override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}

Creazione di un calcolatore di mance in Kotlin: come funziona?

Ora funziona tutto perfettamente! Congratulazioni, hai creato il tuo 'Calcolatore di mance' in Kotlin.

Creazione di un calcolatore di mance in Kotlin: come funziona?

Skillbox consiglia:

Fonte: habr.com

Acquista hosting affidabile per siti web con protezione DDoS, VPS VDS server 🔥 Acquista hosting affidabile per siti web con protezione DDoS, VPS VDS server | ProHoster