Créer une application de lancer de dés interactive de base

Dans cet atelier de programmation, vous allez créer une application Android dés à lancer où les utilisateurs pourront cliquer sur un Buttonpour lancer un dé. Le résultat du lancer s'affiche 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 du code Kotlin pour détecter ce qui se passe lorsque vous cliquez sur l'icône Button.

Prerequisites

• Créer et exécuter une application "Hello, World!" & Android dans Android Studio.
• Utiliser TextViews et ImageViews dans une application
• Comment modifier les attributs d'un élément TextView dans l'éditeur de mise en page
• Extraire du texte dans une ressource de chaîne afin de faciliter la traduction de votre application et la réutilisation des chaînes
• Principes de base de la programmation Kotlin enseignés dans les précédents ateliers de programmation.

Points abordés

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

Ce que vous allez faire

• Application permettant de lancer un dé et de lancer un dé sur Button pour mettre à jour le texte à l'écran avec 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é.

Créer un projet d'activité vide

1. Si vous avez déjà ouvert un projet dans Android Studio, accédez à File > New > New Project... (Fichier et créer et modifier un 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 "Dés rouleau", avec un niveau d'API minimal de 19 (KitKat).

Important:Si vous ne savez pas comment créer un projet dans Android Studio, consultez Créer et exécuter votre première application Android pour en savoir plus.

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

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, avec seulement le symbole "Hello World" TextView.
   

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 symbole "Hello World" TextView. Le TextView et le Button seront situés dans un ConstraintLayout, qui est un type de ViewGroup.

Lorsque Views figure dans ViewGroup, les Views sont considérés comme des enfants du parentViewGroup. Dans le cas de votre application, TextView et Button seraient considérés comme des enfants du parent ConstraintLayout.

Vous pouvez ajouter un Button en tant qu'enfant du ConstraintLayout existant dans votre application.

Remarque: Tout comme dans une arborescence de vues, les vues parent peuvent être des vues enfant, tandis que les vues enfants peuvent être les parents d'autres enfants.

Ajouter un bouton à la mise en page

1. Faites glisser un Button à partir de la palette vers la vue Conception, en le plaçant sous le "Hello World" TextView.
   
2. Sous la palette de l'arborescence des composants, vérifiez que les Button et les TextView sont bien répertoriés sous le ConstraintLayout (en tant qu'enfants du ConstraintLayout).
3. Notez qu'une erreur indique que la contrainte Button n'est pas appliquée. Étant donné que la classe Button est au sein d'une ConstraintLayout, vous devez définir des contraintes verticales et horizontales pour la positionner.

Positionnez le bouton

Dans cette étape, vous allez ajouter une contrainte verticale entre le haut de la Button et le bas de TextView. Cette action permettra de positionner Button en dessous de TextView.

1. Dans la vue Design, appuyez de manière prolongée sur le cercle blanc avec une bordure bleue en haut du Button. Faites glisser le curseur afin qu'une flèche le suit. Relâchez le bouton lorsque vous atteignez le bord inférieur du "Hello World" TextView. Cela permet de définir une contrainte de mise en page, et le Button glisse vers le bas juste en dessous de TextView.
   
2. Examinez les attributs sur la droite de l'éditeur de mise en page.
3. Dans le Widget Contrainte,notez une nouvelle contrainte de mise en page définie au bas de la TextView, Haut → BottomOf textView (0dp). (0dp) signifie qu'une marge de 0 est affichée. Une erreur se produit également si des contraintes horizontales sont manquantes.
   
4. Ajoutez une contrainte horizontale du côté gauche de l'élément Button vers le côté gauche de l'élément ConstraintLayout parent.
5. Répétez l'opération sur le côté droit, en associant le bord droit de Button au bord droit de ConstraintLayout. Le résultat doit ressembler à ceci :

6. Avec Button toujours sélectionné, le widget de contrainte doit se présenter comme suit : Notez que deux contraintes supplémentaires ont été ajoutées: Start → StartOf parent (0dp) et End → parentOf (0dp). Cela signifie que Button est centré horizontalement dans le parent, ConstraintLayout.
   

7. Exécutez l'application. Elle devrait ressembler à la capture d'écran ci-dessous. Vous pouvez cliquer sur le Button, mais il ne fait rien pour l'instant. Continuons !

Modifier le texte du bouton

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

Au lieu d'afficher le bouton Button (bouton), remplacez-le par un élément indiquant la fonction du bouton: &rollt;Roll".

1. Dans l'éditeur de mise en page, avec l'option Button sélectionnée, accédez à Attributs, remplacez le texte par Roll, puis appuyez sur la touche Enter (Return sur Mac).

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

Une chaîne codée en dur rend la traduction d'une application plus compliquée dans d'autres langues et la réutilisation des chaînes dans différentes parties de votre application. Heureusement, Android Studio propose une correction automatique.

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

Le message d'avertissement complet s'affiche.

4. Au bas du message, sous Correction suggérée, cliquez sur le bouton Corriger. Vous devrez peut-être faire défiler la page pour voir cette option.
5. La boîte de dialogue Extraire la ressource s'ouvre. Pour extraire une chaîne, vous devez utiliser le texte "Roll" et créer une ressource de chaîne appelée roll dans le fichier strings.xml (app > res > values > string.xml). Les valeurs par défaut sont correctes. Cliquez sur OK.

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

Dans la vue Design, Button doit toujours indiquer Roll.

Appliquer un style à l'élément TextView

Le message "Hello World!" devient petit, et le message n'est pas pertinent pour votre application. Dans cette étape, vous allez remplacer le petit message "Hello World" par un nombre pour afficher la valeur roulée, et agrandir la police pour qu'il soit plus facile à lire.

1. Dans l'éditeur de conception, sélectionnez le TextView pour que ses attributs apparaissent dans la fenêtre Attributs.
2. Modifiez la valeur de l'attribut textSize de l'attribut TextView pour qu'il corresponde à 36sp, afin qu'il soit lisible et facile à lire. Vous devrez peut-être faire défiler la page pour trouver textSize.

3. Effacez l'attribut text de TextView. Vous n'avez pas besoin d'afficher quoi que ce soit dans la commande TextView tant que l'utilisateur ne l'a pas lancée.

Cependant, il est très utile de voir du texte dans TextView lorsque vous modifiez la mise en page et le code pour votre application. Dans ce cas, vous pouvez ajouter au texte TextView qui n'est visible que pour l'aperçu de la mise en page, mais pas lorsque l'application est en cours d'exécution.

.

4. Sélectionnez le TextView dans l'arborescence des composants.
5. Sous Common Attributes (Attributs communs), recherchez l'attribut text (texte). Sous celui-ci, un autre attribut text (texte) associé à une icône d'outil. L'attribut text (texte) correspond à ce que voit l'utilisateur lorsque l'application est en cours d'exécution. L'attribut text [texte] associé à une icône Outils est l'attribut texte d'outil qui est juste destiné à vos développeurs.
6. Définissez le texte des outils sur"1"dans TextView (pour faire semblant que vous avez un lancer de dés). Le libellé "1" ne s'affiche que dans l'éditeur de conception dans Android Studio, mais pas lorsque vous exécutez l'application sur un appareil ou un émulateur.

Notez que ce texte n'est visible que par les développeurs d'applications. Vous n'avez donc pas besoin de lui créer une chaîne.

7. Examinez l'application dans l'aperçu. Affiche.

8. Exécutez votre application. Voici à quoi ressemble l'application lorsqu'elle s'exécute sur un émulateur. L'écran ne s'affiche pas. Cela est correct.

Bravo, vous avez terminé la modification de la mise en page !

Vous disposez d'une application avec un bouton, mais si vous appuyez dessus, rien ne se passe. Pour modifier ce comportement, vous devez écrire du code Kotlin qui lance les dés, puis met à jour l'écran lorsque l'utilisateur appuie sur le bouton.

Pour effectuer ce changement, vous devez mieux comprendre la structure d'une application Android.

Un Activity fournit la fenêtre dans laquelle votre application dessine son interface utilisateur. 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. Premier ou premier niveau, l'activité de premier niveau est souvent appelée MainActivity et est fournie par le modèle de projet. Par exemple, lorsque l'utilisateur fait défiler la liste des applications sur son appareil et appuie sur l'icône du dé position pour les dés, le système Android démarre l'MainActivity de l'application.

Dans votre code MainActivity, vous devez fournir des détails sur la mise en page Activity et 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 Le lancer de dés, un Activity affiche la mise en page TextView et Button que vous venez de créer.

Pour les applications plus complexes, plusieurs écrans peuvent être associés à plusieurs éléments Activity. Chaque élément Activity a un objectif spécifique.

Par exemple, dans une application de galerie de photos, vous pouvez disposer d'un Activity pour afficher une grille de photos, d'un deuxième Activity pour afficher une photo individuelle et d'un Activity pour modifier une photo individuelle.

Ouvrir le fichier MainActivity.kt

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

1. Ouvrez et ouvrez le fichier MainActivity.kt (app > java > com.example.diceroller > MainActivity.kt). Vous devriez voir ci-dessous ce que vous devez voir. Si vous voyez import..., 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)
   }
}

Il n'est pas nécessaire de comprendre tous les mots du code ci-dessus, mais vous devez avoir une idée générale de son rôle. Plus vous travaillez avec Android, plus il vous connaît, plus vous l'entendez.

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

class MainActivity : AppCompatActivity() {
    ...
}

3. Notez qu'il n'y a pas de fonction main() dans votre MainActivity.
   
   Avant, vous avez appris que chaque programme Kotlin doit avoir 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 lorsque votre application est ouverte pour la première fois.
   
4. Recherchez la méthode onCreate(), qui ressemble au code ci-dessous.

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

Vous en apprendrez plus 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 le 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 propose une structure de nombreuses classes pour faciliter l'écriture d'applications Android, mais elle doit savoir exactement quelle classe vous voulez utiliser. Vous pouvez spécifier la classe à utiliser dans votre code à l'aide d'une instruction import. Par exemple, la classe Button est définie dans android.widget.Button.

Activer les importations automatiques

Il peut être fastidieux d'ajouter des instructions import lorsque vous utilisez d'autres classes. Heureusement, Android Studio vous permet de choisir les importations appropriées lorsque vous utilisez des classes fournies par d'autres personnes. Au cours de cette étape, vous allez configurer Android Studio pour ajouter automatiquement des importations lorsque cela est possible et supprimer automatiquement les importations inutilisées de votre code.

1. Dans Android Studio, ouvrez les paramètres en accédant à File > Other Settings &gt, Preferences for New Projects (Fichier &gt, Autres paramètres &gt, Préférences pour les nouveaux projets).
2. Développez Autres paramètres > Importation automatique. Dans les sections Java et Kotlin, assurez-vous que les options Ajouter des importations sans ambiguïté et Optimiser les importations à la volée (pour le projet en cours) sont cochées. Notez que chaque section comporte deux cases à cocher.
   
   Les paramètres des importations sans ambiguïté indiquent à Android Studio d'ajouter automatiquement une instruction d'importation, à condition qu'elle puisse déterminer celle à utiliser. Les paramètres Optimiser les importations indiquent à Android Studio de supprimer toutes les importations qui ne sont pas utilisées par votre code.
   
3. Enregistrez les modifications et fermez les paramètres en appuyant sur OK.

Maintenant que vous en savez un peu plus sur MainActivity, vous allez modifier l'appli pour que le fait de cliquer sur Button génère une action à l'écran.

Afficher un message lorsque l'utilisateur clique sur le bouton

Dans cette étape, vous allez indiquer que lorsque l'utilisateur clique sur le bouton, un court message s'affiche en bas de l'écran.

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 l'identifiant Button, qui lui est propre. Le code enregistre une référence à l'objet Button dans une variable appelée rollButton, et non à l'objet Button lui-même.

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

Remarque: Android attribue automatiquement des ID aux ressources de votre application. Par exemple, le bouton Roll possède un ID de ressource, et la chaîne du texte du bouton comporte également un ID de ressource. Les ID de ressource sont au format R.<type>.<name>, par exemple R.string.roll. Pour les ID View, <type> est id, par exemple, 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.

Important : Lorsqu'il attribue un objet à une variable, Kotlin ne copie pas l'intégralité de l'objet chaque fois qu'il enregistre une référence. Vous pouvez considérer une référence comme un numéro de sécurité sociale ou un autre numéro d'identification national. Le numéro fait référence à une personne, mais pas à la personne elle-même. Lorsque vous copiez le numéro, vous ne copiez pas la personne.

La méthode onCreate() devrait maintenant 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 fichier Button.
   Vérifiez qu'il y a maintenant trois instructions d'importation : la troisième a été ajoutée automatiquement.
   

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

Remarque:Si l'importation automatique n'a pas fonctionné, Button est surligné en rouge. Pour ajouter manuellement l'importation appropriée, placez le curseur de texte dans le mot Button, puis appuyez sur Alt+Enter (Option+Enter sur un Mac).

Vous devez ensuite associer le code à Button afin que celui-ci puisse être exécuté lorsque l'utilisateur appuie sur le Button. Un écouteur de clics est un code permettant de définir la procédure à suivre en cas d'appui ou de clic. Il s'agit d'un code assis uniquement à l'écoute, de sorte que l'utilisateur ne puisse cliquer que sur le Button.

3. Utilisez l'objet rollButton et définissez un écouteur de clics sur celui-ci en appelant la méthode setOnClickListener().

rollButton.setOnClickListener {
}

Au cours de la saisie, Android Studio peut afficher plusieurs suggestions. Pour ce cas, sélectionnez l'option setOnClickListener {...}.

Entre les accolades, vous indiquez ce qui doit se produire lorsque vous appuyez sur le bouton. Pour le moment, votre application doit afficher un Toast, c'est-à-dire un court message présenté à 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, indiquez au Toast de s'afficher en appelant la méthode show().

toast.show()

Voici à quoi ressemble la classe MainActivity mise à jour. 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 sur une seule ligne sans variable. Il s'agit d'un schéma courant dans un autre code.

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

6. Exécutez l'application, puis cliquez sur le bouton Roll (Roll). Le message toast devrait s'afficher au bas de l'écran et disparaître rapidement.

Bravo, Un message s'est affiché lorsque l'utilisateur a cliqué sur le bouton. 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, vous allez écrire un code pour mettre à jour le TextView à l'écran lorsque l'utilisateur clique sur le bouton Roll (Lancer).

1. Revenir à activity_main.xml (app > res > layout >activity_main.xml)
2. Cliquez sur TextView.
3. Notez que l'id est textView.
   
4. Ouvrez MainActivity.kt (app > java > com.example.diceroller > MainActivity.kt)
5. Supprimez les lignes de code qui créent et affichent le 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 à cette référence.

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

8. Dans resultTextView, saisissez le texte entre guillemets.
   

resultTextView.text = "6"

Cette opération est semblable à celle que vous avez exécutée en définissant le texte dans les Attributs, mais maintenant dans votre code, le texte doit donc se trouver entre guillemets. Lorsque cette valeur est définie de manière explicite, cela signifie que, pour le moment, TextView affiche toujours 6. Vous allez ajouter le code pour lancer les dés et afficher différentes valeurs pour la tâche suivante.

La classe MainActivity devrait 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. Elle doit mettre à jour le TextView avec la valeur"6".

Le seul problème qu'il manque, c'est de lancer les dés. Vous pouvez réutiliser la classe Dice de l'atelier de programmation précédent, qui gère la logique pour lancer un dé.

Ajouter la classe "Dés"

1. Après la dernière accolade dans 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 souligne numSides avec une ligne grise ondulée. (L'affichage peut prendre un certain temps.)
3. Pointez le curseur sur numSides. Une fenêtre pop-up s'affiche alors indiquant Property 'numSides' could be private.
   

Si vous marquez numSides comme private, le fichier ne sera accessible que dans la classe Dice. Étant donné que le seul code qui utilise numSides se trouve dans la classe Dice, vous pouvez définir cet argument private pour la classe Dice. Vous pourrez en savoir plus sur les variables private et public dans l'unité suivante.

4. Pour apporter la correction suggérée, depuis Android Studio, cliquez sur Make 'numSides' 'private'.

Créer une méthode rollDice()

Maintenant que vous avez ajouté une classe Dice à votre application, vous devez mettre à jour MainActivity pour l'utiliser. Pour mieux organiser votre code, insérez toute la logique permettant de lancer un dé en 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. Lorsque vous passez la souris sur rollDice(), Android Studio affiche le problème et propose d'autres solutions.

4. Cliquez sur Autres actions pour afficher un menu. Android Studio vous propose des tâches supplémentaires !

Conseil:Si vous rencontrez des difficultés pour pointer le curseur sur le pointeur de la souris, puis sur Autres actions, cliquez sur rollDice() et appuyez sur Alt+Enter (Option+Enter sur un Mac) pour afficher le menu.

5. Sélectionnez Create function '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 "Dés"

Au cours de cette étape, vous allez utiliser la méthode rollDice() pour créer et lancer un dé, puis afficher le résultat dans TextView.

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

val dice = Dice(6)

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

val diceRoll = dice.roll()

4. Trouvez la 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, puis utilisez-le 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 de dés doit être remplacé par d'autres valeurs que 6. Puisqu'il s'agit d'un nombre aléatoire compris entre 1 et 6, la valeur 6 peut également apparaître parfois.

Hourra !

Il est normal que votre code s'affiche légèrement après que vous avez modifié des parties de cette page pour que celle-ci fonctionne. Toutefois, avant de vous éloigner du code, effectuez des tâches de nettoyage simples. L'application pourra ainsi fonctionner de manière optimale.

Ces habitudes sont pratiquées par les développeurs Android professionnels lorsqu'ils rédigent leur code.

Guide de style Android

Lorsque vous collaborez avec d'autres équipes, ce code est idéal pour écrire du code de la même manière. Il y a donc une certaine cohérence dans le code. C'est pourquoi Android propose un Guide de style pour l'écriture du code Android : conventions de dénomination, mise en forme et autres bonnes pratiques à suivre. Suivez ces consignes lorsque vous rédigez du code Android : Kotlin Style Guide for Android Developers (Guide de style Kotlin pour les développeurs Android).

Vous trouverez ci-dessous quelques façons de vous conformer au guide de style.

Nettoyer votre code

Condensez votre code

Pour le rendre plus concis, vous pouvez le réduire en un nombre de lignes plus court. Par exemple, voici le code qui définit l'écouteur de clics sur Button.

rollButton.setOnClickListener {
    rollDice()
}

Comme les instructions de l'écouteur de clics ne comportent qu'une seule ligne, vous pouvez condenser l'appel de méthode rollDice() et les accolades en une seule ligne. En voici un aperçu : Une ligne au lieu de trois.

rollButton.setOnClickListener { rollDice() }

Modifier la mise en forme du 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 aussi accéder au menu dans Android Studio Modifier > Tout sélectionner.
2. Avec tout le texte sélectionné dans le fichier, accédez au menu d'Android Studio Code > Reformat Code (Reformater le code) ou utilisez le raccourci clavier Ctrl+Alt+L (ou Command+Option+L sur Mac).

Cela met à jour la mise en forme de votre code, qui inclut les espaces, les retraits, etc. Vous ne remarquerez peut-être aucun changement, et c'est une bonne chose. Votre code avait déjà été correctement mis en forme.

Commentez votre code

Ajoutez des commentaires à votre code pour décrire ce qu'il se passe dans le code que vous avez rédigé. À mesure que le code se complexifie, il est également important de noter pourquoi vous avez rédigé le code de la même façon que vous l'avez fait. Si vous revenez plus tard au code pour effectuer des modifications, ce code peut rester clair, mais vous ne vous souvenez peut-être pas pourquoi vous l'avez rédigé comme vous le faisiez.

Il est fréquent d'ajouter un commentaire pour chaque classe (MainActivity et Dice sont les seules classes que vous avez 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 un cours:

/**
* 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 pouvez ajouter des commentaires qui peuvent aider le lecteur de votre code. Pour rappel, 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 toutes ces modifications, nous vous recommandons de relancer votre application pour vous assurer qu'elle fonctionne toujours comme prévu.

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

Le code de la solution utilisé dans cet atelier de programmation figure dans le projet et le module indiqués ci-dessous.

URL du code de la solution: https://github.com/google-developer-training/android-basics-kotlin-create-dice-roller-with-button-app-solution

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

1. Lancez Android Studio.
2. Dans la fenêtre Welcome to Android Studio (Bienvenue sur Android Studio), cliquez sur Check out project from version control (Examiner le projet à partir du contrôle des versions).
3. Sélectionnez Git.

4. Dans la boîte de dialogue Clone Repository (Cloner le dépôt), collez l'URL de code fournie dans le champ URL.
5. Cliquez sur le bouton Tester, puis attendez qu'une fenêtre pop-up verte indique Connexion réussie.
6. Vous pouvez également modifier l'annuaire en remplaçant la valeur par défaut suggérée.

7. Cliquez sur Cloner. Android Studio commence à récupérer votre code.
8. Dans la fenêtre pop-up Règlement à partir du contrôle des versions, cliquez sur Oui.

9. Attendez qu'Android Studio s'ouvre.
10. Sélectionnez le module adapté au code de votre solution de démarrage ou de la solution.

11. Cliquez sur le bouton Exécuter pour créer et exécuter votre code.

Aide:consultez le guide d'aide et de dépannage si le code téléchargé ne se charge pas ou ne s'exécute pas correctement.

• Ajoutez un 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 confirmer que vous êtes sur la bonne voie.
• Définissez un écouteur de clic pour une Button à l'aide de setOnClickListener() afin d'ajouter le comportement lorsqu'un utilisateur clique sur une Button.
• Lorsque l'application s'exécute, vous pouvez mettre à jour l'écran en appelant des méthodes sur le TextView, le Button ou d'autres éléments d'interface utilisateur de la mise en page.
• Commentez votre code pour aider les personnes qui lisent le code.
• Modifiez votre code et nettoyez-le.

• Classe Button
• Classe Toast
• Classe TextView
• Guide de style Kotlin pour les développeurs Android

Remarque : Les bonnes pratiques sont facultatives. Elles vous permettent de mettre en pratique ce que vous avez appris dans cet atelier de programmation.

Procédez comme suit:

1. Ajoutez un autre dés à l'application. Cliquez sur le bouton Lancer pour lancer deux dés. Les résultats doivent s'afficher à l'écran dans deux TextViews différentes.

Vérifier votre travail :

Votre application terminée doit fonctionner sans erreur et afficher deux dés.