Créer une application interactive : Dice Roller

1. Avant de commencer

Dans cet atelier de programmation, vous allez créer une application Dice Roller sur Android : les utilisateurs pourront cliquer sur Button dans l'application pour lancer un dé. Le résultat du lancer de rôle est indiqué dans un TextView à l'écran.

Vous allez utiliser l'éditeur de mise en page dans Android Studio pour créer la mise en page de votre application, puis écrire le code en Kotlin qui déterminera le comportement de l'appli lorsque vous cliquez sur Button.

Conditions préalables

• Vous savez créer et afficher un message "Hello World !" dans Android Studio.
• Vous savez utiliser les TextViews dans une application.
• Modifier les attributs d'un TextView dans l'éditeur de mise en page.
• Vous savez extraire du texte dans une ressource de chaîne pour faciliter la traduction de votre application et la réutilisation de chaînes.
• Vous connaissez les bases de la programmation Kotlin.

Points abordés

• Ajouter un Button à une application Android
• Ajouter un comportement déclenché lorsque l'utilisateur appuie sur un Button dans l'application
• Ouvrir et modifier le code Activity d'une application
• Comment afficher un message Toast
• Mettre à jour le contenu d'un TextView pendant l'exécution de l'application

Objectifs de l'atelier

• Une application Dice Roller avec un Button permettant de lancer le dé et de mettre à jour le texte à l'écran pour afficher le résultat du lancer.

Ce dont vous avez besoin

• Un ordinateur sur lequel est installé Android Studio

Voici à quoi ressemblera l'application une fois cet atelier de programmation terminé.

2. Configurer votre application

Créer un projet "Activité vide"

1. Si vous avez déjà ouvert un projet dans Android Studio, accédez à File > New > New Project... (Fichier > Nouveau > Nouveau projet…) pour ouvrir l'écran Create New Project (Créer un projet).
2. Dans Create New Project (Créer un projet), créez un projet Kotlin à l'aide du modèle Empty Activity (Activité vide).
3. Appelez l'application "Dice Roller", avec un niveau d'API minimal de 19 (KitKat).

4. Exécutez la nouvelle application. Elle devrait ressembler à ceci.

3. Créer la mise en page de l'application

Ouvrir l'éditeur de mise en page

1. Dans la fenêtre Project (Projet), double-cliquez sur activity_main.xml (app > res > layout > activity_main.xml) pour l'ouvrir. Vous devriez voir l'éditeur de mise en page, affichant uniquement le TextView TextView "Hello World" au centre de l'application.

Vous allez maintenant ajouter un Button à votre application. Un Button est un élément d'interface utilisateur (UI) dans Android sur lequel l'utilisateur peut appuyer pour effectuer une action.

Dans cette tâche, vous allez ajouter un Button sous le TextView "Hello World". TextView et Button seront situés dans un ConstraintLayout, qui est un type de ViewGroup.

Si un ViewGroup comprend des Views, les Views sont considérées comme des enfants issus du parent ViewGroup. Dans le cas de votre application, TextView et Button sont considérés comme des enfants du parent ConstraintLayout.

Ajoutez un Button enfant du ConstraintLayout existant dans votre application.

Ajouter un bouton à la mise en page

1. À partir de la Palette, faites glisser un Button dans la vue Design (Conception). Placez l'image en dessous du TextView "Hello World".

2. En dessous de Palette dans l'arborescence des composants, vérifiez que Button et TextView sont répertoriés sousConstraintLayout (en tant qu'enfants de ConstraintLayout).
3. Vous remarquerez une erreur indiquant que la propriété Button n'est pas limitée. Étant donné que Button se trouve dans ConstraintLayout, vous devez définir des contraintes verticales et horizontales pour le positionner.

Positionner le bouton

Au cours de cette étape, vous allez ajouter une contrainte verticale du haut de Button jusqu'au bas de TextView. Ainsi, Button sera placé sous TextView.

1. Dans la vue Design (Conception), en haut du Button, appuyez de manière prolongée sur le cercle blanc avec une bordure bleue. Faites glisser le pointeur. Il sera suivi par une flèche. Relâchez le pointeur lorsque vous atteignez le bord inférieur du TextView "Hello World". Vous établissez ainsi une contrainte de mise en page, et Button glisse juste en dessous de TextView.

2. Consultez la section Attributes (Attributs) à droite de l'éditeur de mise en page.
3. Dans le widget de contrainte, vous remarquerez une nouvelle contrainte de mise en page définie en bas de TextView : Top → BottomOf textView (0dp). (0dp) signifie que la marge est de 0. De plus, une erreur s'est produite, car aucune contrainte horizontale n'a été définie.

4. Ajoutez une contrainte horizontale de la gauche de Button jusqu'à la gauche du ConstraintLayout parent.
5. Répétez cette étape sur le côté droit en connectant le bord droit de Button au bord droit du ConstraintLayout. Voici le résultat attendu :

6. Lorsque Button est sélectionné, le widget de contrainte doit ressemble à ceci. Notez deux contraintes supplémentaires qui ont été ajoutées : Start → StartOf parent (0dp) et End → EndOf parent (0dp). Cela signifie que Button est centré horizontalement dans son parent, ConstraintLayout.

7. Exécutez l'application. Elle doit ressembler à la capture d'écran ci-dessous. Vous pouvez cliquer sur Button, mais rien ne se passe. Continuons.

Modifier le texte du bouton

Vous allez apporter quelques modifications supplémentaires à l'interface utilisateur dans l'éditeur de mise en page.

Renommez le libellé de Button pour qu'il affiche l'action qu'il déclenche : "Roll" (Lancer).

1. Dans l'éditeur de mise en page, après avoir sélectionné Button, accédez à Attributes (Attributs), puis remplacez le texte par Roll (Lancer), et appuyez sur la touche Enter (Return sur Mac).

2. Dans l'arborescence des composants, un triangle orange s'affiche à côté de Button. Si vous passez le pointeur sur le triangle, un message s'affiche. Android Studio a détecté une chaîne codée en dur, "Roll" (Lancer), dans le code de votre application et suggère d'utiliser plutôt une ressource de chaîne.

Avec une chaîne codée en dur, l'application est plus difficile à traduire dans d'autres langues, et il est plus difficile de réutiliser des chaînes dans différentes parties de votre application. Heureusement, Android Studio vous offre une solution automatisée.

3. Dans l'arborescence des composants, cliquez sur le triangle orange.

Le message d'avertissement complet s'affiche.

4. Au bas du message, sous Suggested Fix (Correction suggérée), cliquez sur le bouton Fix (Corriger). (Vous devrez peut-être faire défiler l'écran vers le bas.)
5. La boîte de dialogue Extract Resource (Extraire la ressource) s'ouvre alors. Pour extraire une chaîne, vous devez prendre le texte "Roll" (Lancer) et créer une ressource de chaîne nommée roll dans strings.xml (app > res > values > string.xml). Les valeurs par défaut étant correctes, cliquez sur OK.

6. Notez que dans Attributes (Attributs), l'attribut text de Button indique désormais @string/roll, en référence à la ressource que vous venez de créer.

Dans la vue Design (Conception), le Button doit toujours indiquer Roll (Lancer).

Appliquer un style à TextView

Le message "Hello World!" est petit et n'est pas adapté à votre application. Au cours de cette étape, vous allez remplacer le petit "Hello, World!" par un chiffre qui affiche la valeur du lancer de dés, et agrandir la police pour une meilleure lisibilité.

1. Dans l'éditeur de conception, sélectionnez TextView afin que ses attributs apparaissent dans la fenêtre Attributes (Attributs).
2. Définissez la valeur textSize de TextView sur 36sp afin que la police soit plus large et plus lisible. Vous devrez peut-être faire défiler la page jusqu'à textSize.

3. Effacez l'attribut text de TextView. Vous n'avez pas besoin d'afficher quoi que ce soit dans TextView tant que l'utilisateur ne lance pas le dé.

Toutefois, lorsque vous modifiez la mise en page et le code de votre application, il est très utile de voir du texte dans TextView. Pour ce faire, vous pouvez ajouter à TextView un texte qui s'affiche uniquement sur l'aperçu de la mise en page, mais pas lorsque l'application est en cours d'exécution.

4. Sélectionnez TextView dans l'arborescence des composants.
5. Sous Common Attributes (Attributs communs), recherchez l'attribut text et, en dessous, un autre attribut text avec une icône Outils. L'attribut text est le texte qui s'affiche lorsque l'application est en cours d'exécution. L'attribut text avec une icône Outils est l'attribut "tools:text" réservé aux développeurs.
6. Définissez tools:text sur "1" dans TextView (pour faire comme le résultat du lancer de dés indiquait 1). Le "1" ne s'affiche que dans l'éditeur de conception d'Android Studio. Il ne s'affiche pas lorsque vous exécutez l'application sur un appareil ou un émulateur.

Étant donné que ce texte n'est visible que par les développeurs d'applications, vous n'avez pas besoin de créer de ressource de chaîne.

7. Examinez votre application dans l'aperçu. Le chiffre 1 s'affiche.

8. Exécutez votre application. Voici ce à quoi ressemble l'application lorsqu'elle est exécutée sur un émulateur. Le chiffre 1 ne s'affiche pas. Ce comportement est correct.

Bravo, vous avez terminé la mise en page !

Vous disposez maintenant d'une application avec un bouton, mais rien ne se passe lorsque vous appuyez dessus. Pour changer cela, vous devez écrire du code en Kotlin afin de lancer les dés et mettre à jour l'écran lorsque l'utilisateur appuie sur le bouton.

Pour apporter cette modification, vous devez mieux comprendre la structure d'une application Android.

4. Introduction aux activités

Un Activity fournit la fenêtre dans laquelle votre application dessine son UI. En règle générale, une Activity occupe la totalité de l'écran de votre application en cours d'exécution. Chaque application possède une ou plusieurs activités. L'activité de premier niveau est souvent appelée MainActivity. Elle est fournie dans le modèle du projet. Par exemple, lorsque l'utilisateur fait défiler la liste des applications sur son appareil et appuie sur l'icône de lancer de dés, le système Android démarre l'application MainActivity.

Dans votre code MainActivity, vous devez fournir des détails sur la mise en page de Activity et sur la manière dont l'utilisateur doit interagir avec elle.

• Dans l'application Carte d'anniversaire, un Activity affiche le message et l'image d'anniversaire.
• Dans l'application Dice Roller, un Activity affiche la mise en page TextView et Button que vous venez de créer.

Pour les applications plus complexes, il peut y avoir plusieurs écrans et plusieurs Activity. Chaque Activity a un objectif spécifique.

Par exemple, une application de galerie photo peut inclure un élément Activity pour afficher une grille de photos, un deuxième Activity pour afficher une photo individuelle et un troisième Activity pour retoucher une photo individuelle.

Ouvrir le fichier MainActivity.kt

Vous allez ajouter du code pour répondre à un appui sur un bouton dans MainActivity. Pour ce faire, vous devez en savoir plus sur le code MainActivity déjà présent dans votre application.

1. Ouvrez le fichier MainActivity.kt (app > java > com.example.diceroller > MainActivity.kt). Ci-dessous, vous verrez ce qui s'affiche. Si import... s'affiche, cliquez sur ... pour développer les importations.

package com.example.diceroller

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
   }
}

Vous n'avez pas besoin de comprendre tous les mots du code ci-dessus, mais vous devez connaître son fonctionnement général. Plus vous travaillerez avec le code Android, plus il deviendra familier et mieux vous le comprendrez.

2. Examinez le code Kotlin de la classe MainActivity, identifiée par le mot clé class suivi de son nom.

class MainActivity : AppCompatActivity() {
    ...
}

3. Notez qu'il n'existe aucune fonction main() dans votre MainActivity.

Précédemment, vous avez appris que chaque programme en Kotlin doit disposer d'une fonction main(). Les applications Android fonctionnent différemment. Au lieu d'appeler une fonction main(), le système Android appelle la méthode onCreate() de votre MainActivity à la première ouverture de votre application.

4. Recherchez la méthode onCreate(), dont le code ressemble à ceci.

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
   }

Vous en apprendrez davantage sur override dans un prochain atelier de programmation. Vous n'avez donc pas à vous en soucier pour l'instant. Le reste de la méthode onCreate() configure MainActivity en utilisant le code des importations et en définissant la mise en page de départ avec setContentView().

5. Notez les lignes commençant par import.

Android fournit un framework de nombreuses classes pour faciliter le codage d'applications Android, mais il a besoin de savoir exactement quelle classe vous voulez utiliser. Vous pouvez spécifier quelle classe du framework utiliser dans votre code à l'aide d'une instruction import. Par exemple, la classe Button est définie dans android.widget.Button.

Activer l'importation automatique

N'oubliez pas d'ajouter des instructions import lorsque vous utilisez davantage de classes. Heureusement, Android Studio vous aide à choisir les importations appropriées lorsque vous utilisez des classes fournies par d'autres utilisateurs. Au cours de cette étape, vous configurerez Android Studio afin qu'il ajoute automatiquement des importations lorsqu'il le peut et qu'il supprime automatiquement les importations inutilisées de votre code.

Sous macOS, ouvrez les paramètres sous File > New Project Setup > Preferences for New Projects (Fichier > Configuration des nouveaux projets > Paramètres des nouveaux projets). Développez Other Settings > Auto Import (Autres paramètres > Importation automatique). Dans la section Java et Kotlin, assurez-vous que les cases Add unambiguous imports on the fly (Ajouter rapidement les importations sans ambiguïté) et Optimize imports on the fly (for current project) (Optimiser rapidement les importations pour le projet actuel) sont cochées. Notez que chaque section comporte deux cases à cocher. Enregistrez les modifications et appuyez sur OK pour fermer les paramètres.

Sous Windows, ouvrez les paramètres en accédant à File > Settings > Editor > General > Auto Import (Fichier > Paramètres > Éditeur > Général > Importation automatique). Dans la section Java et Kotlin, assurez-vous que les cases Add unambiguous imports on the fly (Ajouter rapidement les importations sans ambiguïté) et Optimize imports on the fly (for current project) (Optimiser rapidement les importations pour le projet actuel) sont cochées. Notez que chaque section comporte deux cases à cocher. Enregistrez les modifications et appuyez sur OK pour fermer les paramètres.

Les paramètres d'unambiguous imports (importation sans ambiguïté) indiquent à Android Studio d'ajouter automatiquement une instruction d'importation, à condition qu'il puisse déterminer laquelle utiliser. Les paramètres Optimize imports (Optimiser les importations) indiquent à Android Studio de supprimer toutes les importations qui ne sont pas utilisées par votre code.

5. Rendre le bouton interactif

Maintenant que vous en savez un peu plus sur MainActivity, vous allez modifier l'application de sorte qu'un clic sur Button vous permette de réaliser une action à l'écran.

Afficher un message lorsque l'utilisateur clique sur le bouton

Au cours de cette étape, vous spécifierez qu'un bref message s'affiche en bas de l'écran lorsque vous cliquez sur le bouton.

1. Ajoutez le code suivant à la méthode onCreate() après l'appel setContentView(). La méthode findViewById() trouve Button dans la mise en page. R.id.button est l'ID de ressource de Button, qui est son identifiant unique.

val rollButton: Button = findViewById(R.id.button)

Le code enregistre la référence à l'objet Button dans une variable appelée rollButton, et non dans l'objet Button lui-même.

La méthode onCreate() devrait désormais se présenter comme suit :

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)

   val rollButton: Button = findViewById(R.id.button)
}

2. Vérifiez qu'Android Studio a ajouté automatiquement une instruction import pour le Button. Notez qu'il existe maintenant trois instructions d'importation.

import android.os.Bundle
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity

Vous devez ensuite associer le code au Button afin qu'il s'exécute lorsque l'utilisateur appuie sur le Button. Un écouteur de clics est un extrait de code permettant de savoir quelle action déclencher lorsqu'un utilisateur appuie ou clique dans l'application. Ce code se contente d'écouter l'action entreprise, "écouter" le clic de l'utilisateur sur le Button.

3. Utilisez l'objet rollButton et définissez un écouteur de clics sur cet objet en appelant la méthode setOnClickListener(). Après le nom de la méthode, vous utiliserez des accolades au lieu des parenthèses. Il s'agit d'une syntaxe spéciale permettant de déclarer une fonction lambda. Vous en apprendrez davantage sur cet aspect dans un prochain atelier de programmation.

Entre les accolades, vous indiquez ce qui doit se passer lorsque vous appuyez sur le bouton. L'application affichera un toast, c'est-à-dire un bref message décrivant l'opération en cours.

rollButton.setOnClickListener {
}

Au fil de votre saisie, Android Studio peut afficher plusieurs suggestions. Pour ce cas, choisissez l'option setOnClickListener {...}.

Entre les accolades, indiquez ce qui doit se passer lorsque vous appuyez sur le bouton. Pour le moment, votre application affichera un Toast, c'est-à-dire un bref message qui s'affiche sur l'écran de l'utilisateur.

4. Créez un Toast avec le texte "Dice Rolled!" en appelant Toast.makeText().

val toast = Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT)

5. Ensuite, appelez show() pour demander au Toast de s'afficher.

toast.show()

Voici à quoi ressemble votre classe MainActivity. Les instructions package et import figurent toujours en haut du fichier :

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       val rollButton: Button = findViewById(R.id.button)
       rollButton.setOnClickListener {
           val toast = Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT)
           toast.show()
       }
   }
}

Vous pouvez combiner les deux lignes de l'écouteur de clics en une seule, sans variable. C'est un modèle courant que vous pourriez trouver dans d'autres codes.

Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT).show()

6. Exécutez l'application et cliquez sur le bouton Roll (Lancer). Un toast doit apparaître au bas de l'écran et disparaître rapidement.

Parfait ! Cliquer sur le bouton a fait apparaître le message. C'est la première fois que vous écrivez du code Kotlin pour Android.

Mettre à jour TextView lorsque l'utilisateur clique sur le bouton

Au lieu d'afficher un message Toast temporaire, écrivez du code pour mettre à jour le TextView à l'écran lorsque l'utilisateur clique sur le bouton Roll (Lancer).

1. Revenez à activity_main.xml (app > res > layouts > activity_main.xml).
2. Cliquez sur TextView.
3. Notez que id correspond à textView.

4. Ouvrez le fichier MainActivity.kt (app > java > com.example.diceroller > MainActivity.kt).
5. Supprimez les lignes de code qui créent et affichent Toast.

rollButton.setOnClickListener {

}

6. À la place, créez une variable appelée resultTextView pour stocker TextView.
7. Utilisez findViewById() pour rechercher textView dans la mise en page à l'aide de son ID et stocker une référence à celle-ci.

val resultTextView: TextView = findViewById(R.id.textView)

8. Attribuez la valeur "6" entre guillemets au texte de resultTextView.

resultTextView.text = "6"

Cette opération est similaire à celle que vous avez effectuée en définissant le texte dans la section Attributes (Attributs), mais vous pouvez maintenant utiliser le code, qui doit être placé entre guillemets. Si vous définissez explicitement cette valeur, TextView affiche toujours la valeur 6 pour le moment. Vous allez ajouter le code pour lancer les dés et afficher différentes valeurs dans la tâche suivante.

Votre classe MainActivity devrait maintenant se présenter comme suit :

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       val rollButton: Button = findViewById(R.id.button)
       rollButton.setOnClickListener {
           val resultTextView: TextView = findViewById(R.id.textView)
           resultTextView.text = "6"
       }
   }
}

9. Exécutez l'application. Cliquez sur le bouton. Le résultat devrait être mis à jour et le TextView affiche "6".

6. Ajouter la logique du lancer de dés

Il ne nous manque plus que la logique du lancer de dés. Vous pouvez réutiliser la classe Dice de l'atelier de programmation précédent, qui gère la logique du lancer de dés.

Ajouter la classe Dice

1. Après la dernière accolade de la classe MainActivity, créez la classe Dice avec une méthode roll().

class Dice(val numSides: Int) {

   fun roll(): Int {
       return (1..numSides).random()
   }
}

2. Notez qu'Android Studio peut ajouter une ligne grise ondulée sous numSides en guise de soulignage. Ceci peut mettre un certain temps à s'afficher.
3. Passez la souris sur numSides. Une fenêtre pop-up s'affiche alors pour indiquer que la propriété "numSides" peut être privée.

Si vous marquez numSides comme private, il sera uniquement accessible dans la classe Dice. Étant donné que le seul code qui utilise numSides se trouve dans la classe Dice, vous pouvez rendre cet argument private pour la classe Dice. Vous en saurez davantage sur les variables private et public dans le module suivant.

4. Apportez la modification souhaitée dans Android Studio en cliquant sur Make 'numSides' 'private' (Rendre "numSides" "privé").

Créer une méthode rollDice()

Maintenant que vous avez ajouté une classe Dice à votre application, vous allez mettre à jour MainActivity pour l'utiliser. Pour mieux organiser votre code, ajoutez toute la logique du lancer de dés dans une seule fonction.

1. Remplacez le code de l'écouteur de clics qui définit le texte sur "6" par un appel à rollDice().

rollButton.setOnClickListener {
   rollDice()
}

2. Comme rollDice() n'est pas encore défini, Android Studio signale une erreur et affiche rollDice() en rouge.
3. Si vous passez le curseur sur rollDice(), Android Studio affiche le problème et les solutions possibles.

4. Cliquez sur More actions… (Autres actions) pour afficher un menu. Android Studio vous simplifie la tâche.

5. Sélectionnez Create function 'rollDice' (Créer la fonction 'rollDice'). Android Studio crée une définition vide pour la fonction dans MainActivity.

private fun rollDice() {
    TODO("Not yet implemented")
}

Créer une instance d'objet Dice

Au cours de cette étape, vous allez faire en sorte que la méthode rollDice() crée un dé, le lance et affiche le résultat dans TextView.

1. Dans rollDice(), supprimez l'appel TODO().
2. Ajoutez du code pour créer un dé à six faces.

val dice = Dice(6)

3. Lancez les dés en appelant la méthode roll(), puis enregistrez le résultat dans une variable nommée diceRoll.

val diceRoll = dice.roll()

4. Recherchez TextView en appelant findViewById().

val resultTextView: TextView = findViewById(R.id.textView)

La variable diceRoll est un nombre, mais TextView utilise du texte. Vous pouvez utiliser la méthode toString() sur diceRoll pour la convertir en chaîne.

5. Convertissez diceRoll en chaîne et utilisez-la pour mettre à jour le texte de resultTextView.

resultTextView.text = diceRoll.toString()

La méthode rollDice() se présente comme suit :

private fun rollDice() {
    val dice = Dice(6)
    val diceRoll = dice.roll()
    val resultTextView: TextView = findViewById(R.id.textView)
    resultTextView.text = diceRoll.toString()
}

6. Exécutez votre application. Le résultat du lancer de dés doit être remplacé par des valeurs autres que 6 ! Puisqu'il s'agit d'un nombre aléatoire compris entre 1 et 6, il est possible que la valeur 6 apparaisse également.

Félicitations !

7. Adopter les bonnes pratiques de codage

Votre code peut avoir l'air un peu brouillon, une fois que vous avez apporté des modifications ici et là pour faire fonctionner votre application. Rien d'anormal. Cependant, avant de laisser refroidir votre code, vous devez réaliser quelques tâches de nettoyage simples. L'application pourra ensuite fonctionner de manière optimale.

Ce sont ces habitudes que les développeurs Android professionnels adoptent en écrivant leur code.

Guide de style Android

Lorsque vous travaillez en équipe, les membres de l'équipe doivent coder de la même façon pour garantir la cohérence du code. Nous avons donc créé un guide de style qui vous aidera à écrire votre code. Il contient des explications relatives aux conventions d'attribution de nom, à la mise en forme et d'autres bonnes pratiques à suivre. Respectez les consignes de ce guide lorsque vous écrivez du code pour Android : Guide de style Kotlin pour les développeurs Android.

Voici quelques recommandations qui vous permettront de respecter le guide de style.

Nettoyer votre code

Simplifier votre code

Vous pouvez réduire le nombre de lignes présentes dans votre code pour le raccourcir. Par exemple, voici le code qui définit l'écouteur de clics sur Button.

rollButton.setOnClickListener {
    rollDice()
}

Étant donné que les instructions de l'écouteur de clics se résument à une seule ligne, vous pouvez condenser l'appel de la méthode rollDice() et les accolades sur une seule ligne. Voici ce à quoi cela devrait ressembler. Une ligne au lieu de trois !

rollButton.setOnClickListener { rollDice() }

Reformater votre code

Vous allez maintenant reformater votre code pour vous assurer qu'il respecte les conventions de mise en forme recommandées pour Android.

1. Dans la classe MainActivity.kt, sélectionnez tout le texte du fichier à l'aide du raccourci clavier Control+A sous Windows (ou Command+A sous Mac). Vous pouvez également accéder au menu d'Android Studio Edit > Select All (Modifier > Tout sélectionner).
2. Une fois le texte sélectionné, accédez au menu Code > Reformat Code (Code > Reformater le code) d'Android Studio ou utilisez le raccourci clavier Ctrl+Alt+L (ou Command+Option+L sur Mac).

Le formatage de votre code est mis à jour, y compris les espaces blancs, les retraits, etc. Vous ne verrez peut-être aucun changement, et c'est normal. Votre code a déjà été correctement formaté.

Commenter votre code

Ajoutez des commentaires à votre code pour décrire son contenu. À mesure que le code se complexifie, il est important de comprendre pourquoi il est écrit de telle ou telle manière. Si vous revenez au code pour apporter des modifications par la suite, l'objectif du code peut encore être compréhensible, mais vous ne vous souvenez peut-être pas de la raison pour laquelle vous l'avez écrit ainsi.

C'est une pratique courante d'ajouter un commentaire à chaque classe (MainActivity et Dice étant les seules classes disponibles dans votre application) et à chaque méthode que vous écrivez. Utilisez les symboles /** et */ au début et à la fin de votre commentaire pour indiquer au système qu'il ne s'agit pas de code. Ces lignes seront ignorées lorsque le système exécutera votre code.

Exemple de commentaire sur une classe :

/**
* This activity allows the user to roll a dice and view the result
* on the screen.
*/
class MainActivity : AppCompatActivity() {

Exemple de commentaire sur une méthode :

/**
* Roll the dice and update the screen with the result.
*/
private fun rollDice() {

Dans une méthode, vous êtes libre d'ajouter des commentaires pour faciliter la compréhension de votre code. N'oubliez pas que vous pouvez utiliser le symbole // au début de votre commentaire. Tout ce qui suit le symbole // sur une ligne est considéré comme un commentaire.

Exemple de deux commentaires dans une méthode :

private fun rollDice() {
   // Create new Dice object with 6 sides and roll it
   val dice = Dice(6)
   val diceRoll = dice.roll()

   // Update the screen with the dice roll
   val resultTextView: TextView = findViewById(R.id.textView)
   resultTextView.text = diceRoll.toString()
}

1. Prenez le temps d'ajouter des commentaires dans votre code.
2. Avec tous ces changements liés à la mise en forme et aux commentaires, nous vous recommandons d'exécuter à nouveau votre application pour vous assurer qu'elle fonctionne toujours comme prévu.

Voir le code de la solution pour savoir comment vous auriez pu commenter votre code.

8. Code de solution

Le code de solution de cet atelier de programmation figure dans le projet et le module ci-dessous.

Pour obtenir le code de cet atelier de programmation et l'ouvrir dans Android Studio, procédez comme suit :

Obtenir le code

1. Cliquez sur l'URL indiquée. La page GitHub du projet s'ouvre dans un navigateur.
2. Vérifiez que le nom de la branche correspond au nom spécifié dans l'atelier de programmation. Par exemple, dans la capture d'écran suivante, le nom de la branche est main.

3. Sur la page GitHub du projet, cliquez sur le bouton Code pour afficher une fenêtre pop-up.

4. Dans la fenêtre pop-up, cliquez sur le bouton Download ZIP (Télécharger le fichier ZIP) pour enregistrer le projet sur votre ordinateur. Attendez la fin du téléchargement.
5. Recherchez le fichier sur votre ordinateur (il se trouve probablement dans le dossier Téléchargements).
6. Double-cliquez sur le fichier ZIP pour le décompresser. Un dossier contenant les fichiers du projet est alors créé.

Ouvrir le projet dans Android Studio

1. Lancez Android Studio.
2. Dans la fenêtre Welcome to Android Studio (Bienvenue dans Android Studio), cliquez sur Open (Ouvrir).

Remarque : Si Android Studio est déjà ouvert, sélectionnez l'option de menu File > Open (Fichier > Ouvrir).

3. Dans l'explorateur de fichiers, accédez à l'emplacement du dossier du projet décompressé (il se trouve probablement dans le dossier Téléchargements).
4. Double-cliquez sur le dossier de ce projet.
5. Attendez qu'Android Studio ouvre le projet.
6. Cliquez sur le bouton Run (Exécuter)  pour compiler et exécuter l'application. Assurez-vous qu'elle fonctionne correctement.

9. Résumé

• Ajoutez un élément Button dans une application Android à l'aide de l'éditeur de mise en page.
• Modifiez la classe MainActivity.kt pour ajouter un comportement interactif à l'application.
• Affichez un message Toast comme solution temporaire pour vérifier que vous êtes sur la bonne voie.
• Définissez un écouteur de clics pour un Button à l'aide de setOnClickListener() afin d'ajouter le comportement associé à un clic sur un Button.
• Lorsque l'application est en cours d'exécution, vous pouvez mettre à jour ce qui s'affiche à l'écran en appelant des méthodes sur TextView, Button ou d'autres éléments d'UI dans la mise en page.
• Commentez votre code pour aider les personnes qui le liront à comprendre votre approche.
• Reformatez votre code et nettoyez-le.

10. En savoir plus

• Vocabulaire pour les bases d'Android en Kotlin
• Classe Button
• Classe Toast
• Classe TextView
• Guide de style Kotlin pour les développeurs Android

11. Pour s'entraîner

Action à effectuer :

1. Ajoutez un autre dé à l'application, de sorte que le bouton Roll (Lancer) génère les résultats de deux dés. Les résultats doivent être affichés dans deux TextViews différents à l'écran.

Vérifiez votre travail :

Une fois terminée, votre application devrait fonctionner sans erreur et afficher deux dés à l'écran.