Construire un calculateur de pourboires en Kotlin : comment ça marche ?

Nous vous montrons comment créer une application de calcul de pourboire simple dans Kotlin. Pour être plus précis, Kotlin 1.3.21, Android 4, Android Studio 3. L'article sera intéressant, tout d'abord, pour ceux qui commencent leur parcours dans le développement d'applications Android. Il vous permet de comprendre quoi et comment fonctionne à l'intérieur de l'application.

Une telle calculatrice est utile lorsque vous devez calculer le montant des pourboires d'une entreprise qui décide de passer du temps dans un restaurant ou un café. Bien sûr, tout le monde ne laisse pas toujours le thé aux serveurs, c'est plus une tradition occidentale, mais le processus de développement d'une telle application est intéressant dans tous les cas.

Nous rappelons: pour tous les lecteurs de "Habr" - une remise de 10 000 roubles lors de l'inscription à n'importe quel cours Skillbox en utilisant le code promotionnel "Habr".

Skillbox vous recommande : Cours pratique "Développeur mobile PRO.

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

Vous entrez le pourcentage souhaité du montant total, le nombre de participants à la réunion et obtenez le résultat - le nombre de pourboires qui doivent rester.

Начинаем

L'interface complète de l'application ressemble à ceci :




Première action - téléchargement de base de projet. Ouvrez-le dans Android Studio 3.0 ou version ultérieure. Nous construisons et exécutons le projet et voyons un écran blanc. Tout va bien, comme il se doit.

Les actions de l'utilisateur sont écrites dans le projet dans l'ordre chronologique, de sorte que tout soit clair. Pour le voir, ouvrez View -> Tool Windows -> TODO.

Nous étudions le projet et ouvrons colors.xml pour évaluer la palette de couleurs. strings.xml contient des données textuelles (légendes) et styles.xml contient plusieurs modèles de polices.

Développement de la section des coûts

Ouvrez activity_main.xml et ajoutez le code ci-dessous au 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"/>

Vous pouvez maintenant styliser le répertoire des valeurs ou jouer avec les couleurs en utilisant outil material.io.

Maintenant, le projet ressemble à ceci :

Comme vous pouvez le voir, le calcul des coûts est basé sur les données saisies par l'utilisateur.

Développement de la rubrique compte

Ajoutez le code ci-dessous au LinearLayout après la section Dépenses (#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>

Fermez le LinearLayout après la liste TODOs, puis ajoutez le nouveau code, en le plaçant à l'intérieur du 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"/>

Étant donné que la tâche principale de l'application est de calculer les coûts individuels pour chacun des participants aux rassemblements dans le restaurant, le costPerPersonTextView joue le rôle principal.

EditText limite l'entrée à une ligne, ce paramètre doit être défini sur NumberDecimal inputType.

Nous commençons le projet pour le test et entrons les paramètres du dommage total (tasses, assiettes cassées, etc.)

Développement de la rubrique "Personnes et Astuces"

Pour ajouter un sélecteur de montant de pourboire, collez le code ci-dessous dans une nouvelle section 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>

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

Copiez la section entière et ajoutez ce qui suit (#5):

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

Désormais, au démarrage de l'application, il est possible d'ajouter le montant de la facture, les boutons Ajouter/Soustraire fonctionnent également, mais rien ne se passe encore.

Ajouter des vues

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
 
}

Finition des boutons

Pour ajouter la prise en charge des clics sur les boutons, implémentez View.OnClickListener au niveau de la classe (#7) :

classe MainActivity : AppCompatActivity(), View.OnClickListener {

Compiler le projet maintenant ne fonctionnera pas, vous devez effectuer quelques étapes supplémentaires (# 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()
        }
    }

En termes de boutons et de commutateurs, Kotlin a tout organisé très cool ! Ajoutez le code ci-dessous à toutes les fonctions d'incrémentation et de décrémentation
(#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()
        }
    }

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

Maintenant, nous lions 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
}

Vous pouvez maintenant ajouter le total des dégâts, les pourboires et le nombre de participants à la réunion. Eh bien, maintenant la chose la plus importante...

Rubrique Coût

Ce code calcule les coûts (#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)
 
}

Bon, ici on appelle une fonction qui permet de prendre en compte le nombre de personnes dans l'entreprise et de calculer le pourboire (#15) :

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

Nous lançons l'application. Il a l'air et fonctionne très bien. Mais ça pourrait être mieux.

Si vous essayez de supprimer le montant de la facture, puis d'augmenter le nombre d'indices ou d'amis, l'application se bloquera car il n'y a pas encore de vérification des coûts nuls. De plus, si vous essayez de modifier le montant de la facture, les frais ne seront pas mis à jour.

Étapes finales

Ajouter TextWatcher (#16):

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

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

billEditText.addTextChangedListener(this)

De plus, ajoutez du 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) {}

Bon, maintenant tout fonctionne ! Félicitations, vous avez écrit votre propre "Calculatrice de basculement" en Kotlin.

Skillbox vous recommande :

• Cours pratique de deux ans "Je suis un Développeur Web PRO".
• Cours en ligne "Développeur C#".
• Cours pratique de l'année "Développeur PHP de 0 à PRO".

Source: habr.com