Cette page a été traduite par l'API Cloud Translation.

Principes de base d'Android en Kotlin 01.2 : Anatomie d'une application de base

Cet atelier de programmation fait partie du cours Principes de base d'Android en Kotlin. Vous tirerez pleinement parti de ce cours en suivant les ateliers de programmation dans l'ordre. Tous les ateliers de programmation du cours sont listés sur la page de destination des ateliers de programmation Principes de base d'Android en Kotlin.

Introduction

Jusqu'à présent, vous avez tout configuré et Android Studio a créé beaucoup de code pour vous. Avant de modifier tout ce code, il est important de savoir ce que vous venez de créer et comment parcourir les fichiers sources d'une application Android.

Dans cet atelier de programmation, vous allez en apprendre davantage sur les principaux composants d'une application Android et ajouter une interactivité simple à une application avec un bouton.

Ce que vous devez déjà savoir

Installer et ouvrir Android Studio
Découvrez comment créer un projet d'application.
Savoir exécuter une application sur un émulateur ou un appareil physique

Points abordés

Modifier le fichier de mise en page de l'application
Découvrez comment créer une application avec un comportement interactif.
Beaucoup de nouveaux termes. Consultez le glossaire du vocabulaire pour obtenir des explications simples sur les termes et les concepts.

Objectifs de l'atelier

Explorez le fichier Kotlin MainActivity et le fichier de mise en page de l'activité.
Modifiez la mise en page de l'activité au format XML.
Ajoutez un élément Button à la mise en page de l'activité.
Extrayez les chaînes codées en dur dans un fichier de ressources de chaîne.
Implémentez des méthodes de gestion des clics pour afficher des messages à l'écran lorsque l'utilisateur appuie sur un Button.

Dans cet atelier de programmation, vous allez créer un projet d'application appelé DiceRoller et ajouter une interactivité de base avec un bouton. Chaque fois que l'utilisateur clique sur le bouton, la valeur du texte affiché change. Voici à quoi ressemble l'application DiceRoller finale pour cet atelier de programmation :

Dans le dernier atelier de programmation, vous avez découvert les principales parties d'un projet d'application, y compris les répertoires java et res. Dans cette tâche, vous allez vous concentrer sur les deux fichiers les plus importants qui composent votre application : le fichier Kotlin MainActivity et le fichier de mise en page activity_main.xml.

Étape 1 : Examinez MainActivity

MainActivity est un exemple de Activity. Activity est une classe Android de base qui dessine l'interface utilisateur (UI) d'une application Android et reçoit les événements d'entrée. Lorsque votre application se lance, elle lance l'activité spécifiée dans le fichier AndroidManifest.xml.

De nombreux langages de programmation définissent une méthode principale qui démarre le programme. Les applications Android ne disposent pas de méthode principale. Le fichier AndroidManifest.xml indique plutôt que MainActivity doit être lancé lorsque l'utilisateur appuie sur l'icône du lanceur d'applications. Pour lancer une activité, l'OS Android utilise les informations du fichier manifeste pour configurer l'environnement de l'application et construire l'MainActivity. Ensuite, MainActivity effectue une configuration à son tour.

Chaque activité est associée à un fichier de mise en page. L'activité et la mise en page sont connectées par un processus appelé gonflement de la mise en page. Lorsque l'activité démarre, les vues définies dans les fichiers de mise en page XML sont transformées (ou "gonflées") en objets de vue Kotlin en mémoire. Une fois cela fait, l'activité peut dessiner ces objets à l'écran et les modifier de manière dynamique.

Dans Android Studio, sélectionnez File > New > New Project (Fichier > Nouveau > Nouveau projet) pour créer un projet. Utilisez l'activité vide et cliquez sur Suivant.
Nommez le projet DiceRoller et vérifiez toutes les autres valeurs pour le nom et l'emplacement du projet. Assurez-vous que la case "Utiliser les artefacts AndroidX" est cochée. Cliquez sur Terminer.
Dans le volet Project > Android, développez java > com.example.android.diceroller. Double-cliquez sur MainActivity. L'éditeur de code affiche le code dans MainActivity.
Sous le nom du package et les instructions d'importation se trouve la déclaration de classe pour MainActivity. La classe MainActivity étend AppCompatActivity.

class MainActivity : AppCompatActivity() { ...

Notez la méthode onCreate(). Les activités n'utilisent pas de constructeur pour initialiser l'objet. Au lieu de cela, une série de méthodes prédéfinies (appelées "méthodes de cycle de vie") sont appelées lors de la configuration de l'activité. L'une de ces méthodes de cycle de vie est onCreate(), que vous remplacez toujours dans votre propre application. Vous en apprendrez plus sur les méthodes de cycle de vie dans un prochain atelier de programmation.

Dans onCreate(), vous spécifiez la mise en page associée à l'activité et vous gonflez la mise en page. La méthode setContentView() effectue ces deux opérations.

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

La méthode setContentView() fait référence à la mise en page à l'aide de R.layout.activity_main, qui est en fait une référence entière. La classe R est générée lorsque vous compilez votre application. Elle inclut tous les éléments de l'application, y compris le contenu du répertoire res.R

Dans ce cas, R.layout.activity_main fait référence à la classe R générée, au dossier layout et au fichier de mise en page activity_main.xml. (Les ressources n'incluent pas les extensions de fichier.) Vous ferez référence à de nombreuses ressources de l'application (y compris les images, les chaînes et les éléments du fichier de mise en page) à l'aide de références similaires dans la classe R.

Étape 2 : Examinez et explorez le fichier de mise en page de l'application

Toutes les activités de votre application sont associées à un fichier de mise en page dans le répertoire res/layout de l'application. Un fichier de mise en page est un fichier XML qui exprime l'apparence d'une activité. Un fichier de mise en page définit les vues et leur emplacement sur l'écran.

Les vues sont des éléments tels que du texte, des images et des boutons qui étendent la classe View. Il existe de nombreux types de vues, y compris TextView, Button, ImageView et CheckBox.

Dans cette tâche, vous allez examiner et modifier le fichier de mise en page de l'application.

Dans le volet Project > Android (Projet > Android), développez res > layout, puis double-cliquez sur activity_main.xml. L'éditeur de mise en page s'ouvre. Android Studio inclut cet éditeur, qui vous permet de créer la mise en page de votre application de manière visuelle et de prévisualiser sa conception. Vous en apprendrez davantage sur l'éditeur de mise en page dans un prochain atelier de programmation.
Pour afficher le fichier de mise en page au format XML, cliquez sur l'onglet Text (Texte) en bas de la fenêtre.
Supprimez tout le code XML existant dans l'éditeur de mise en page. La mise en page par défaut que vous obtenez avec un nouveau projet est un bon point de départ si vous travaillez avec l'éditeur de conception Android Studio. Pour cette leçon, vous allez travailler avec le fichier XML sous-jacent pour créer une mise en page à partir de zéro.
Copiez et collez ce code dans la mise en page :

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout   
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

</LinearLayout>

Examinons maintenant le code :

L'élément racine ou de premier niveau de la mise en page est un élément <LinearLayout>. La vue LinearLayout est un ViewGroup. Les groupes de vues sont des conteneurs qui contiennent d'autres vues et aident à spécifier la position des vues à l'écran.

Toutes les vues et tous les groupes de vues que vous ajoutez à votre mise en page sont organisés dans une hiérarchie, avec l'élément XML le plus haut comme racine de cette hiérarchie. La vue racine peut contenir d'autres vues et groupes de vues, et les groupes de vues contenus peuvent contenir d'autres vues et groupes de vues. Lorsque votre application exécute la hiérarchie de vues dans votre fichier de mise en page XML, elle devient une hiérarchie d'objets lorsque la mise en page est gonflée. Dans ce cas, le groupe de vues racine est une mise en page linéaire, qui organise ses vues enfants de manière linéaire, les unes après les autres (verticalement ou horizontalement).

La racine par défaut que vous obtenez pour un nouveau projet Android est un ConstraintLayout, qui fonctionne bien en coordination avec l'éditeur de mise en page. Pour cette application, vous utilisez un groupe de vues LinearLayout, qui est plus simple que la mise en page contrainte. Vous en apprendrez beaucoup plus sur les groupes de vues et la mise en page contrainte dans la prochaine leçon.
Dans la balise LinearLayout, notez l'attribut android:layout_width. La largeur de ce LinearLayout est définie sur match parent, ce qui la rend identique à celle de son parent. Comme il s'agit de la vue racine, la mise en page s'étend sur toute la largeur de l'écran.
Notez l'attribut android:layout_height, qui est défini sur wrap_content. Cet attribut fait en sorte que la hauteur de la LinearLayout corresponde à la hauteur combinée de toutes les vues qu'elle contient, qui pour l'instant n'est que la TextView.
Examinez l'élément <TextView>. Cet élément TextView, qui affiche du texte, est le seul élément visuel de votre application DiceRoller. L'attribut android:text contient la chaîne à afficher, en l'occurrence la chaîne "Hello World!".
Notez les attributs android:layout_width et android:layout_height de l'élément <TextView>, qui sont tous deux définis sur wrap_content. Le contenu de la vue de texte est le texte lui-même. La vue n'occupe donc que l'espace nécessaire au texte.

L'application de lancer de dés n'est pas très utile si l'utilisateur ne peut pas lancer les dés et voir le résultat. Pour commencer, ajoutez un bouton à la mise en page pour lancer les dés, ainsi qu'un texte indiquant la valeur obtenue par l'utilisateur.

Étape 1 : Ajoutez un bouton à la mise en page

Ajoutez un élément Button à la mise en page sous la vue de texte en saisissant <Button, puis appuyez sur Entrée. Un bloc Button s'affiche. Il se termine par /> et inclut les attributs layout_width et layout_height.

<Button
   android:layout_width=""
   android:layout_height="" />

Définissez les attributs layout_width et layout_height sur "wrap_content". Avec ces valeurs, le bouton a la même largeur et la même hauteur que le libellé de texte qu'il contient.
Ajoutez un attribut android:text au bouton et attribuez-lui la valeur "Roll". L'élément Button se présente désormais comme suit :

<Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Roll" />

Pour les vues Button, l'attribut text correspond au libellé du bouton. Dans l'éditeur de mise en page, l'attribut est mis en surbrillance en jaune, ce qui indique un conseil ou un avertissement. Dans ce cas, la mise en surbrillance en jaune est due au fait que la chaîne "Roll" est codée en dur dans le libellé du bouton, alors qu'elle devrait être une ressource. Vous en saurez plus sur les ressources de chaîne dans la section suivante.

Étape 2 : Extrayez les ressources de chaîne

Au lieu de coder en dur les chaînes dans vos fichiers de mise en page ou de code, il est recommandé de placer toutes les chaînes de votre application dans un fichier distinct. Ce fichier s'appelle strings.xml et se trouve parmi les ressources de l'application, dans le répertoire res/values/.

Le fait de placer les chaînes dans un fichier distinct facilite leur gestion, en particulier si vous les utilisez plusieurs fois. De plus, les ressources de chaîne sont obligatoires pour traduire et localiser votre application, car vous devez créer un fichier de ressources de chaîne pour chaque langue.

Android Studio vous aide à vous souvenir de placer vos chaînes dans un fichier de ressources grâce à des conseils et des avertissements.

Cliquez une fois sur la chaîne "Roll" dans l'attribut android:text de la balise <Button>.
Appuyez sur Alt+Enter (Option+Enter sur macOS), puis sélectionnez Extract string resource (Extraire la ressource de chaîne) dans le menu pop-up.
Saisissez roll_label pour le nom de la ressource.
Cliquez sur OK. Une ressource de chaîne est créée dans le fichier res/values/string.xml, et la chaîne de l'élément Button est remplacée par une référence à cette ressource :
android:text="@string/roll_label"
Dans le volet Projet > Android, développez res > values, puis double-cliquez sur strings.xml pour afficher vos ressources de chaîne dans le fichier strings.xml :

<resources>
   <string name="app_name">DiceRoller</string>
   <string name="roll_label">Roll</string>
</resources>

Étape 3 : Définissez le style et la position des vues

Votre mise en page contient désormais une vue TextView et une vue Button. Dans cette tâche, vous allez organiser les vues du groupe de vues pour les rendre plus attrayantes.

Cliquez sur l'onglet Conception pour afficher un aperçu de la mise en page. Pour le moment, les deux vues sont côte à côte et en haut de l'écran.
Cliquez sur l'onglet Texte pour revenir à l'éditeur XML. Ajoutez l'attribut android:orientation à la balise LinearLayout et attribuez-lui la valeur "vertical". L'élément <LinearLayout> devrait désormais se présenter comme suit :

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   tools:context=".MainActivity">

Le groupe de vues LinearLayout positionne les vues qu'il contient les unes après les autres sur une ligne, soit horizontalement dans une rangée, soit verticalement dans une pile. La valeur par défaut est "horizontal". Comme vous souhaitez que TextView soit empilé sur Button, définissez l'orientation sur "vertical". La conception se présente maintenant comme ceci, avec le bouton sous le texte :

Ajoutez l'attribut android:layout_gravity à TextView et à Button, et attribuez-lui la valeur "center_horizontal". Cela aligne les deux vues au centre de l'axe horizontal. Les éléments TextView et Button devraient désormais se présenter comme suit :

<TextView   
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:text="Hello World!" />

<Button
   android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="@string/roll_label" />

Ajoutez l'attribut android:layout_gravity à la mise en page linéaire et attribuez-lui la valeur "center_vertical". Votre élément LinearLayout devrait maintenant se présenter comme suit :

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:layout_gravity="center_vertical"
   tools:context=".MainActivity">

Pour augmenter la taille du texte dans la vue de texte, ajoutez l'attribut android:textSize à l'élément <TextView> avec la valeur "30sp". L'abréviation sp signifie pixels indépendants de l'échelle. Il s'agit d'une mesure permettant de dimensionner le texte indépendamment de la qualité d'affichage de l'appareil. L'élément TextView devrait désormais se présenter comme suit :

<TextView   
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:textSize="30sp"
   android:text="Hello World!" />

Compilez et exécutez votre application.

Le texte et le bouton sont désormais bien placés, et le texte est plus grand dans la vue de texte. Le bouton n'a pas encore de fonctionnalité. Par conséquent, rien ne se passe lorsque vous cliquez dessus. Vous vous en occuperez ensuite.

Étape 4 : Obtenez une référence au bouton dans le code

Le code Kotlin dans MainActivity est chargé de définir les parties interactives de votre application, par exemple ce qui se passe lorsque vous appuyez sur un bouton. Pour écrire une fonction qui s'exécute lorsque l'utilisateur clique sur le bouton, vous devez obtenir une référence à l'objet Button dans votre mise en page gonflée dans MainActivity. Pour obtenir une référence au bouton :

Attribuez un ID à Button dans le fichier XML.
Utilisez la méthode findViewById() dans votre code pour obtenir une référence à View avec un ID spécifique.

Une fois que vous avez une référence à la vue Button, vous pouvez appeler des méthodes sur cette vue pour la modifier de manière dynamique lors de l'exécution de l'application. Par exemple, vous pouvez ajouter un gestionnaire de clics qui exécute du code lorsque l'utilisateur appuie sur le bouton.

Ouvrez le fichier de mise en page activity_main.xml, s'il n'est pas déjà ouvert, puis cliquez sur l'onglet Text.
Ajoutez l'attribut android:id au bouton et donnez-lui un nom (dans ce cas, "@+id/roll_button""). Votre élément <Button> ressemble maintenant à ceci :

<Button
   android:id="@+id/roll_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:text="@string/roll_label" />

Lorsque vous créez un ID pour une vue dans le fichier de mise en page XML, Android Studio crée une constante entière avec le nom de cet ID dans la classe R générée. Ainsi, si vous nommez une vue roll_button, Android Studio génère et crée une constante entière appelée roll_button dans la classe R. Le préfixe "@+id" du nom de l'ID indique au compilateur d'ajouter cette constante d'ID à la classe R. Tous les ID de vue de votre fichier XML doivent comporter ce préfixe.

Ouvrez le fichier Kotlin MainActivity. Dans onCreate(), après setContentView(), ajoutez la ligne suivante :

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

Utilisez la méthode findViewById() pour obtenir une référence View pour la vue que vous avez définie dans la classe XML. Dans ce cas, vous obtenez la référence Button à partir de la classe R et de l'ID roll_button, puis vous attribuez cette référence à la variable rollButton.

Notez qu'Android Studio met en surbrillance la classe Button en rouge et la souligne pour indiquer qu'il s'agit d'une référence non résolue et que vous devez importer cette classe avant de pouvoir l'utiliser. Une info-bulle indiquant le nom de classe complet peut également s'afficher :
Appuyez sur Alt+Enter (Option+Enter sur un Mac) pour accepter le nom de classe complet.

Étape 5 : Ajouter un gestionnaire de clics pour afficher un toast

Un gestionnaire de clics est une méthode appelée chaque fois que l'utilisateur clique ou appuie sur un élément d'UI cliquable, comme un bouton. Pour créer un gestionnaire de clics, vous avez besoin des éléments suivants :

Méthode qui effectue une opération.
La méthode setOnClickHandler(), qui connecte le Button à la méthode du gestionnaire.

Dans cette tâche, vous allez créer une méthode de gestion des clics pour afficher un Toast. (Un toast est un message qui s'affiche à l'écran pendant un court instant.) Vous connectez la méthode du gestionnaire de clics à Button.

Dans votre classe MainActivity, après onCreate(), créez une fonction privée appelée rollDice().

private fun rollDice() {
  
}

Ajoutez cette ligne à la méthode rollDice() pour afficher un Toast lorsque rollDice() est appelé :

Toast.makeText(this, "button clicked", 
   Toast.LENGTH_SHORT).show()

Pour créer un toast, appelez la méthode Toast.makeText(). Cette méthode nécessite trois éléments :

Un objet Context. L'objet Context vous permet de communiquer avec l'OS Android et d'obtenir des informations sur son état actuel. Vous avez besoin d'un Context ici pour que l'objet Toast puisse indiquer à l'OS d'afficher le toast. Étant donné que AppCompatActivity est une sous-classe de Context, vous pouvez simplement utiliser le mot clé this pour le contexte.
Message à afficher, ici "button clicked".
la durée d'affichage du message. La méthode show() à la fin affiche le toast.

Dans onCreate(), après l'appel de findViewById(), ajoutez cette ligne pour attribuer rollDice() en tant que gestionnaire de clics à l'objet rollButton :

rollButton.setOnClickListener { rollDice() }

La définition complète de votre classe MainActivity se présente maintenant comme suit :

class MainActivity : AppCompatActivity() {

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

        val rollButton: Button = findViewById(R.id.roll_button)
        rollButton.setOnClickListener { rollDice() }
    }

    private fun rollDice() {
        Toast.makeText(this, "button clicked",
            Toast.LENGTH_SHORT).show()
    }
}

Compilez et exécutez votre application. Chaque fois que vous appuyez sur le bouton, un toast doit s'afficher.

Dans cette tâche, vous allez modifier la méthode rollDice() pour changer le texte dans TextView. Pour la première étape, vous remplacez le texte "Hello World!" par la chaîne "Dice Rolled!". Pour la deuxième étape, vous affichez un nombre aléatoire compris entre un et six.

Étape 1 : Afficher une chaîne

Ouvrez activity_main.xml et ajoutez un ID à TextView.

android:id="@+id/result_text"

Ouvrez MainActivity. Dans la méthode rollDice(), mettez en commentaire la ligne permettant d'afficher Toast.
Utilisez la méthode findViewById() pour obtenir une référence à TextView par son ID. Attribuez la référence à une variable resultText.

val resultText: TextView = findViewById(R.id.result_text)

Attribuez une nouvelle chaîne à la propriété resultText.text pour modifier le texte affiché. Vous pouvez ignorer l'astuce qui vous invite à extraire cette chaîne dans une ressource, car il s'agit simplement d'une chaîne temporaire.

resultText.text = "Dice Rolled!"

Compilez et exécutez l'application. Notez que lorsque vous appuyez sur le bouton Roll, la valeur TextView est désormais mise à jour.

Étape 2 : Afficher un nombre aléatoire

Enfin, dans cette tâche, vous allez ajouter de l'aléatoire au clic sur le bouton pour simuler le lancer de dés. Chaque fois que l'utilisateur clique ou appuie sur le bouton, votre code choisit un nombre aléatoire entre 1 et 6 et met à jour TextView. La tâche de génération d'un nombre aléatoire n'est pas spécifique à Android. Vous utilisez la classe Random pour ce faire.

En haut de la méthode rollDice(), utilisez la méthode Random.nextInt() pour obtenir un nombre aléatoire compris entre 1 et 6 :

val randomInt = Random().nextInt(6) + 1

Définissez la propriété text sur la valeur de l'entier aléatoire, sous forme de chaîne :

resultText.text = randomInt.toString()

Compilez et exécutez l'application. Chaque fois que vous appuyez sur le bouton Roll (Lancer), le nombre affiché dans la vue de texte change.

Projet Android Studio : DiceRoller

Défi : Ajoutez un deuxième bouton à l'application, intitulé "Count Up" (Compter), qui s'affiche juste en dessous du bouton Roll (Lancer). Lorsque l'utilisateur appuie sur le bouton Count Up (Compter), la valeur actuelle de la vue de texte du résultat doit être récupérée, incrémentée de 1 et la vue de texte doit être mise à jour. Assurez-vous de gérer les cas limites suivants :

Si la vue de texte du résultat ne contient pas encore de nombre (c'est-à-dire si la vue de texte contient toujours la chaîne par défaut "Hello World"), définissez le texte du résultat sur 1.
Si le nombre est déjà 6, ne faites rien.

Code de solution du défi de programmation

Projet Android Studio : DiceRoller-challenge

Activités

MainActivity est une sous-classe de AppCompatActivity, qui est elle-même une sous-classe de Activity. Activity est une classe Android de base qui est chargée de dessiner l'UI d'une application Android et de recevoir les événements d'entrée.
Toutes les activités sont associées à un fichier de mise en page, qui est un fichier XML dans les ressources de l'application. Le fichier de mise en page porte le nom de l'activité, par exemple activity_main.xml.
La méthode setContentView() dans MainActivity associe la mise en page à l'activité et la développe lorsque l'activité est créée.
L'inflation de mise en page est un processus qui transforme les vues définies dans les fichiers de mise en page XML en objets de vue Kotlin en mémoire. Une fois la mise en page gonflée, Activity peut dessiner ces objets à l'écran et les modifier de manière dynamique.

Vues

Tous les éléments d'UI de la mise en page de l'application sont des sous-classes de la classe View et sont appelés vues. TextView et Button sont des exemples de vues.
Les éléments View peuvent être regroupés dans un élément ViewGroup. Un groupe de vues sert de conteneur pour les vues ou les autres groupes de vues qu'il contient. LinearLayout est un exemple de groupe de vues qui organise ses vues de manière linéaire.

Afficher les attributs

Les attributs android:layout_width et android:layout_height indiquent le poids et la hauteur d'une vue. La valeur match_parent étire la vue sur la largeur ou la hauteur de son parent. La valeur wrap_content réduit la vue pour l'adapter à son contenu.
L'attribut android:text indique le texte qu'une vue doit afficher (si cette vue affiche du texte). Pour les boutons, android:text correspond au libellé du bouton.
L'attribut android:orientation d'un groupe de vues LinearLayout organise les éléments de vue qu'il contient. La valeur horizontal organise les vues de gauche à droite. Une valeur de vertical organise les vues de haut en bas.
L'attribut android:layout_gravity détermine l'emplacement d'une vue et de tous ses enfants.
L'attribut android:textSize définit la taille du texte dans une vue de texte. Les tailles de texte sont spécifiées en unités sp (pixels indépendants de l'échelle). En utilisant des unités sp, vous pouvez dimensionner le texte indépendamment de la qualité d'affichage de l'appareil.

Strings

Au lieu de coder en dur les chaînes dans la mise en page, il est recommandé d'utiliser des ressources de chaîne.
Les ressources de chaîne sont contenues dans le fichier values/res/string.xml.
Pour extraire des chaînes, utilisez Alt+Enter (Option+Enter sur un Mac). Sélectionnez Extraire les ressources de chaîne dans le menu pop-up.

Utiliser les vues

Pour connecter votre code Kotlin à une vue que vous avez définie dans la mise en page, vous devez obtenir une référence à l'objet de vue une fois la vue développée. Attribuez un ID (android:id) à la vue dans la mise en page, puis utilisez la méthode findViewById() pour obtenir l'objet de vue associé.
Lorsque vous créez un ID pour une vue dans le fichier de mise en page XML, Android Studio crée une constante entière avec le nom de cet ID dans la classe R générée. Vous pouvez ensuite utiliser cette référence R.id dans la méthode findViewById().
Vous pouvez définir les attributs d'un objet de vue dans votre code Kotlin directement par nom de propriété. Par exemple, le texte d'une vue de texte est défini par l'attribut android:text dans le fichier XML et par la propriété text en Kotlin.
Un gestionnaire de clics est une méthode appelée lorsque l'utilisateur clique ou appuie sur un élément d'UI. Pour associer une méthode de gestionnaire de clics à une vue telle qu'un bouton, utilisez la méthode setOnClickListener().

Utiliser les toasts

Un toast est une vue qui affiche un message simple dans une petite fenêtre pop-up.

Pour créer un toast, appelez la méthode de fabrique makeText() sur la classe Toast avec trois arguments :

Le contexte de l'application Activity
Message à afficher, par exemple une ressource de chaîne
Durée, par exemple Toast.LENGTH_SHORT

Pour afficher le toast, appelez show().

Cours Udacity :

Développer des applications Android avec Kotlin

Documentation pour les développeurs Android :

Autre :

Glossaire des mots et concepts de vocabulaire

Cette section répertorie les devoirs possibles pour les élèves qui suivent cet atelier de programmation dans le cadre d'un cours animé par un enseignant. Il revient à l'enseignant d'effectuer les opérations suivantes :

Attribuer des devoirs si nécessaire
Indiquer aux élèves comment rendre leurs devoirs
Noter les devoirs

Les enseignants peuvent utiliser ces suggestions autant qu'ils le souhaitent, et ne doivent pas hésiter à attribuer d'autres devoirs aux élèves s'ils le jugent nécessaire.

Si vous suivez cet atelier de programmation par vous-même, n'hésitez pas à utiliser ces devoirs pour tester vos connaissances.

Modifier une application

Ouvrez l'application DiceRoller. Ajoutez un bouton "Réinitialiser" à l'application, juste en dessous du bouton Lancer. Faites en sorte que ce bouton réinitialise la vue du texte du résultat sur 0.

Répondre aux questions suivantes

Question 1

Quelle méthode d'un élément Activity gonfle la mise en page de l'application et rend ses vues disponibles en tant qu'objets ?

onCreate()
setClickListener()
setContentView()
show()

Question 2

Quel attribut de vue permet de définir la largeur d'une vue afin qu'elle s'adapte au contenu ?

android:view_width="wrap"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_width="match_parent"

Envoyer votre application pour qu'elle soit notée

Vérifiez que l'application dispose des éléments suivants :

La mise en page de l'application doit inclure une vue de texte et deux boutons.
Le code de l'application doit définir deux gestionnaires de clics, un pour chaque bouton.
Le gestionnaire de clics qui réinitialise la vue de texte doit définir la propriété de texte sur 0.

Passez à la leçon suivante : 1.3 Ressources d'image et compatibilité

Pour obtenir des liens vers d'autres ateliers de programmation de ce cours, consultez la page de destination des ateliers de programmation Principes de base d'Android en Kotlin.