Créer un calculateur de pourboire en Kotlin : comment ça fonctionne ?

Créer un calculateur de pourboire en Kotlin : comment ça fonctionne ?

Nous vous montrons comment créer une simple application pour calculer les pourboires en Kotlin. Plus précisément, avec Kotlin 1.3.21, Android 4 et Android Studio 3. Cet article sera surtout intéressant pour ceux qui commencent leur parcours dans le développement d'applications Android. Il permet de comprendre ce qui fonctionne et comment à l'intérieur d'une application.

Un tel calculateur sera utile lorsque vous devez calculer le montant des pourboires pour un groupe qui a décidé de passer du temps dans un restaurant ou un café. Bien sûr, tout le monde ne laisse pas toujours des pourboires aux serveurs, c'est plutôt une tradition occidentale, mais le processus de développement d'une telle application est de toute façon intéressant.

Rappelons-le : pour tous les lecteurs de « Habr » — une réduction de 10 000 roubles lors de l'inscription à tout cours Skillbox avec le code promo « Habr ».

Skillbox recommande : Cours pratique Développeur Mobile PRO.

Voici à quoi ressemble l'application en cours d'exécution :

Créer un calculateur de pourboire en Kotlin : comment ça fonctionne ?

Vous saisissez le pourcentage désiré du montant total, le nombre de participants à la rencontre et vous obtenez le résultat : le montant des pourboires à laisser.

Commencer

L'interface complète de l'application ressemble à ceci :
Créer un calculateur de pourboire en Kotlin : comment ça fonctionne ?

Créer un calculateur de pourboire en Kotlin : comment ça fonctionne ?

La première action - charger la base du projet. Ouvrez-le dans Android Studio 3.0 ou une version ultérieure. Construisez et exécutez le projet, et vous verrez un écran blanc. Tout va bien, c'est ainsi que cela devrait être.

Créer un calculateur de pourboire en Kotlin : comment ça fonctionne ?

Créer un calculateur de pourboire en Kotlin : comment ça fonctionne ?

Les actions de l'utilisateur sont décrites dans le projet dans l'ordre chronologique, afin que tout soit clair. Pour le voir, ouvrez Vue -> Fenêtres d'outils -> TODO.

Étudiez le projet et ouvrez colors.xml pour évaluer la palette de couleurs. Les données textuelles (étiquettes) se trouvent dans strings.xml, et plusieurs modèles de polices sont présents dans styles.xml.

Développement de la section des dépenses

Ouvrez activity_main.xml et ajoutez le code situé ci-dessous dans LinearLayout (#1) :

Vous pouvez maintenant configurer le style du répertoire values ou jouer avec les couleurs en utilisant l'outil material.io.

Actuellement, le projet ressemble à ceci :

Créer un calculateur de pourboire en Kotlin : comment ça fonctionne ?
Comme vous pouvez le voir, le calcul des dépenses est effectué à partir des données saisies par l'utilisateur.

Développement de la section des factures

Ajoutez le code ci-dessous dans LinearLayout après la section des dépenses (#2) :

<! — TODO #3: Construire la section de facture →

…

Nous fermons le LinearLayout après la liste des TODOs, puis nous ajoutons un nouveau code en le plaçant à l'intérieur du LinearLayout (#3) :

Puisque la principale tâche de l'application est de calculer les dépenses individuelles pour chaque participant à la sortie au restaurant, le costPerPersonTextView est d'une importance primordiale.

L'EditText limite l'entrée de données à une seule ligne, et ce paramètre doit avoir la valeur NumberDecimal pour inputType.

Créer un calculateur de pourboire en Kotlin : comment ça fonctionne ?
Nous lançons le projet pour tester et saisissons les paramètres des dommages totaux (tasses et assiettes cassées, etc.).

Développement de la section "Personnes et pourboires".

Pour ajouter une sélection du montant des pourboires, insérez le code ci-dessous dans une nouvelle section LinearLayout (#4) :

Ce morceau de code est nécessaire pour calculer avec précision le montant des pourboires. La valeur par défaut du texte est de 20. Les ImageButtons sont fournis avec des icônes dans le dossier avec des droits d'écriture.

Nous copions entièrement la section et ajoutons ce qui suit (#5) :

  • Identifiants des ImageButton (subtractPeopleButton, addPeopleButton)
  • Identifiants des TextView (numberOfPeopleStaticText, numberOfPeopleTextView)
  • DefaultText pour numberOfPeopleTextView (doit être 4).

Créer un calculateur de pourboire en Kotlin : comment ça fonctionne ?

Maintenant, lors du lancement de l'application, il est possible d'ajouter le montant de la facture, les boutons « Ajouter/Soustraire » fonctionnent également, mais rien ne se passe pour l'instant.

Ajout de Views

Ouvrez MainActivity.kt et ajoutez ceci à la fonction 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
 
}

Finalisation des boutons

Pour ajouter le support du clic sur les boutons, nous allons implémenter View.OnClickListener au niveau de la classe (#7):

class MainActivity: AppCompatActivity(), View.OnClickListener {

Il ne sera pas possible de compiler le projet maintenant, il reste encore quelques étapes à effectuer (#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()
        }
    }

Concernant les boutons et les commutateurs, tout est très bien organisé en Kotlin ! Ajoutez le code ci-dessous dans toutes les fonctions d'incrément et de décrément
(#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()
        }
    }

Ce code protège les fonctions d'incrémentation avec des valeurs maximales (MAX_TIP & MAX_PEOPLE). De plus, il protège les fonctions de décrémentation avec des valeurs minimales (MIN_TIP & MIN_PEOPLE).

Nous allons maintenant lier les boutons aux écouteurs dans la fonction initViews (#13):

private fun initViews() {
 
...
 
addTipButton.setOnClickListener(this)
        subtractTipButton.setOnClickListener(this)
 
addPeopleButton.setOnClickListener(this)
        subtractPeopleButton.setOnClickListener(this)
 
//TODO #15: Bind EditText to TextWatcher
}

Créer un calculateur de pourboire en Kotlin : comment ça fonctionne ?

Nous pouvons maintenant ajouter le total des dépenses, des pourboires et le nombre de participants à la réunion. Et maintenant, la chose la plus importante...

Section des calculs des dépenses

Ce code calcule les dépenses (#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)
 
}

Et ici, la fonction est appelée, ce qui permet de prendre en compte le nombre de personnes dans le groupe et de calculer le pourboire (#15):

private fun incrementTip() {
 
…
 
}
 
private fun decrementTip() {
 
…
 
}
 
private fun incrementPeople() {
 
…
 
}
 
private fun decrementPeople() {
 
…
 
}

Nous lançons l'application. Elle est magnifique et fonctionne parfaitement. Mais cela pourrait être encore mieux.

Si vous essayez de supprimer le montant de la facture, puis d'augmenter le nombre de pourboires ou d'amis, l'application va planter car il n'y a pas encore de vérification pour une valeur de coût nulle. De plus, si vous essayez de modifier le montant de la facture, les dépenses ne seront pas mises à jour.

Étapes finales

Ajoutons TextWatcher (#16) :

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

Ensuite, intégrons l'écouteur billEditText (#17) :

billEditText.addTextChangedListener(this)

De plus, ajoutons le code pour exécuter 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) {}

Créer un calculateur de pourboire en Kotlin : comment ça fonctionne ?

Et maintenant, tout fonctionne parfaitement ! Félicitations, vous avez créé votre propre « Calculateur de pourboires » en Kotlin.

Créer un calculateur de pourboire en Kotlin : comment ça fonctionne ?

Skillbox recommande :

Source : habr.com

Acheter un hébergement fiable pour les sites avec protection DDoS, serveurs VPS VDS 🔥 Acheter un hébergement fiable pour les sites avec protection DDoS, serveurs VPS VDS | ProHoster