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

Principes de base d'Android en Kotlin 02.2 : Ajouter des éléments interactifs

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.

Ce que vous devez déjà savoir

Créer une application Android de base en Kotlin.
Exécuter une application Android sur un émulateur ou sur un appareil
Créer une mise en page linéaire à l'aide de l'éditeur de mise en page d'Android Studio
Créer une application simple qui utilise LinearLayout, TextView, ScrollView et un bouton avec un gestionnaire de clics.

Points abordés

Comment obtenir des saisies utilisateur à l'aide d'une vue EditText.
Comment définir le texte d'une vue TextView à l'aide du texte de la vue EditText.
Utiliser View et ViewGroup
Découvrez comment modifier la visibilité d'un View.

Objectifs de l'atelier

Ajoutez de l'interactivité à l'application AboutMe, qui provient d'un atelier de programmation précédent.
Ajoutez un EditText pour que l'utilisateur puisse saisir du texte.
Ajoutez un Button et implémentez son gestionnaire de clics.

Dans cet atelier de programmation, vous allez étendre l'application AboutMe pour ajouter de l'interaction utilisateur. Vous ajoutez un champ de pseudo, un bouton DONE (OK) et une vue de texte pour afficher le pseudo. Une fois que l'utilisateur a saisi un pseudo et appuyé sur le bouton OK, la vue de texte est mise à jour pour afficher le pseudo saisi. L'utilisateur peut modifier à nouveau le pseudo en appuyant sur la vue du texte.

Application AboutMe

Dans cette tâche, vous allez ajouter un champ de saisie EditText pour permettre à l'utilisateur de saisir un pseudo.

Étape 1 : Premiers pas

Si vous n'avez pas encore l'application AboutMe d'un atelier de programmation précédent, téléchargez le code de démarrage AboutMeInteractive-Starter. Il s'agit du même code que celui que vous avez terminé dans un atelier de programmation précédent.
Ouvrez le projet AboutMeInteractive-Starter dans Android Studio.
Exécutez l'application. Vous voyez une vue de texte de nom, une image d'étoile et un long segment de texte dans une vue de défilement.

Notez que l'utilisateur ne peut modifier aucun texte.

Les applications sont plus intéressantes si l'utilisateur peut interagir avec elles, par exemple en saisissant du texte. Pour accepter la saisie de texte, Android fournit un widget d'interface utilisateur (UI) appelé edit text. Vous définissez un texte de modification à l'aide de EditText, une sous-classe de TextView. Un champ de texte modifiable permet à l'utilisateur de saisir et de modifier du texte, comme illustré dans la capture d'écran ci-dessous.

Étape 2 : Ajouter un EditText

Dans Android Studio, ouvrez le fichier de mise en page activity_main.xml dans l'onglet Conception.
Dans le volet Palette, cliquez sur Texte.

Ab TextView, qui est un TextView, s'affiche en haut de la liste des éléments de texte dans le volet Palette. Sous Ab TextView se trouvent plusieurs vues EditText.

Dans le volet Palette, notez que l'icône de TextView affiche les lettres Ab sans soulignement. Cependant, les icônes EditText affichent Ab souligné. Le soulignement indique que la vue est modifiable.

Pour chacune des vues EditText, Android définit différents attributs et le système affiche la méthode de saisie logicielle appropriée (par exemple, un clavier à l'écran).
Faites glisser un texte brut PlainText dans l'arborescence des composants et placez-le sous name_text et au-dessus de star_image.
Utilisez le volet Attributs pour définir les attributs suivants dans la vue EditText.

Attribut	Valeur
`id`	`nickname_edit`
`layout_width`	`match_parent` (par défaut)
`layout_height`	`wrap_content` (par défaut)

Exécutez votre application. Au-dessus de l'image en forme d'étoile, vous voyez un champ de texte avec le texte par défaut "Name" (Nom).

Dans cette tâche, vous allez styliser votre vue EditText en ajoutant un indice, en modifiant l'alignement du texte, en définissant le style sur NameStyle et en définissant le type d'entrée.

Étape 1 : Ajouter un texte d'indice

Ajoutez une ressource de chaîne pour l'indice dans le fichier string.xml.

<string name="what_is_your_nickname">What is your Nickname?</string>

Utilisez le volet Attributs pour définir les attributs suivants sur la vue EditText :

Attribut	Valeur
`style`	`NameStyle`
`textAlignment`	(centre)
`hint`	`@string/what_is_your_nickname`

Dans le volet Attributs, supprimez la valeur Name de l'attribut text. La valeur de l'attribut text doit être vide pour que l'indice s'affiche.

Étape 2 : Définissez l'attribut inputType

L'attribut inputType spécifie le type d'entrée que les utilisateurs peuvent saisir dans la vue EditText. Le système Android affiche le champ de saisie et le clavier à l'écran appropriés, en fonction du type de saisie défini.

Pour afficher tous les types d'entrée possibles, dans le volet Attributs, cliquez sur le champ inputType ou sur les trois points ... à côté du champ. Une liste s'ouvre et affiche tous les types de saisie que vous pouvez utiliser. Le type de saisie actuellement actif est coché. Vous pouvez sélectionner plusieurs types de saisie.

Par exemple, pour les mots de passe, utilisez la valeur textPassword. Le champ de texte masque la saisie de l'utilisateur.

Pour les numéros de téléphone, utilisez la valeur phone. Un clavier numérique s'affiche et l'utilisateur ne peut saisir que des chiffres.

Définissez le type d'entrée pour le champ du pseudo :

Définissez l'attribut inputType sur textPersonName pour le texte à modifier nickname_edit.
Dans le volet Arborescence des composants, notez l'avertissement autoFillHints. Cet avertissement ne s'applique pas à cette application et dépasse le cadre de cet atelier de programmation. Vous pouvez donc l'ignorer. (Pour en savoir plus sur la saisie automatique, consultez Optimiser votre application pour la saisie automatique.)
Dans le volet Attributs , vérifiez les valeurs des attributs suivants de la vue EditText :

Attribut	Valeur
`id`	`nickname_edit`
`layout_width`	`match_parent` (par défaut)
`layout_height`	`wrap_content` (par défaut)
`style`	`@style/NameStyle`
`inputType`	`textPersonName`
`hint`	`"@string/what_is_your_nickname"`
`text`	(vide)

Un Button est un élément d'interface utilisateur sur lequel l'utilisateur peut appuyer pour effectuer une action. Un bouton peut se composer de texte, d'une icône ou des deux.

Dans cette tâche, vous allez ajouter un bouton OK sur lequel l'utilisateur appuiera après avoir saisi un pseudo. Le bouton permet de remplacer la vue EditText par une vue TextView qui affiche le pseudo. Pour modifier le surnom, l'utilisateur peut appuyer sur la vue TextView.

Étape 1 : Ajouter un bouton "DONE" (TERMINÉ)

Faites glisser un bouton du volet Palette vers l'arborescence des composants. Placez le bouton sous le texte de modification nickname_edit.
Créez une ressource de chaîne nommée done. Attribuez la valeur Done à la chaîne.

<string name="done">Done</string>

Utilisez le volet Attributs pour définir les attributs suivants sur la vue Button que vous venez d'ajouter :

Attribut	Valeurs
`id`	`done_button`
`text`	`@string/done`
`layout_gravity`	`center_horizontal`
`layout_width`	`wrap_content`

L'attribut layout_gravity centre la vue dans sa mise en page parente, LinearLayout.

Remplacez le style par Widget.AppCompat.Button.Colored, qui est l'un des styles prédéfinis fournis par Android. Vous pouvez sélectionner le style dans le menu déroulant ou dans la fenêtre Ressources.

Ce style change la couleur du bouton en couleur d'accentuation, colorAccent. La couleur d'accentuation est définie dans le fichier res/values/colors.xml.

Le fichier colors.xml contient les couleurs par défaut de votre application. Vous pouvez ajouter de nouvelles ressources de couleur ou modifier celles existantes dans votre projet, en fonction des besoins de votre application.

Exemple de fichier colors.xml :

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#008577</color>
   <color name="colorPrimaryDark">#00574B</color>
   <color name="colorAccent">#D81B60</color>
</resources>

Étape 2 : Mettez en forme le bouton "DONE" (OK)

Dans le volet Attributs, ajoutez une marge supérieure en sélectionnant Layout_Margin > Top. Définissez la marge supérieure sur layout_margin, qui est définie dans le fichier dimens.xml.
Définissez l'attribut fontFamily sur roboto dans le menu déroulant.
Passez à l'onglet Texte et vérifiez le code XML généré pour le bouton qui vient d'être ajouté.

<Button
   android:id="@+id/done_button"
   style="@style/Widget.AppCompat.Button.Colored"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="@dimen/layout_margin"
   android:fontFamily="@font/roboto"
   android:text="@string/done" />

Étape 3 : Modifiez la ressource de couleur

Dans cette étape, vous allez modifier la couleur d'accentuation du bouton pour qu'elle corresponde à la barre d'application de votre activité.

Ouvrez res/values/colors.xml et remplacez la valeur de colorAccent par #76bf5e.

<color name="colorAccent">#76bf5e</color>

Vous pouvez voir la couleur correspondant au code hexadécimal dans la marge de gauche de l'éditeur de fichier.

Notez le changement de couleur du bouton dans l'éditeur de conception.

Exécutez votre application. Un bouton DONE (TERMINÉ) stylisé devrait s'afficher sous le champ de texte.

Une fois que l'utilisateur a saisi un pseudo et appuyé sur le bouton DONE (OK), le pseudo s'affiche dans une vue TextView. Dans cette tâche, vous allez ajouter une vue de texte avec un arrière-plan coloré. La vue de texte affiche le pseudo de l'utilisateur au-dessus de star_image.

Étape 1 : Ajouter une TextView pour le pseudo

Faites glisser une vue de texte du volet Palette vers l'arborescence des composants. Placez la vue de texte sous done_button et au-dessus de star_image.
Utilisez le volet Attributs pour définir les attributs suivants pour la nouvelle vue TextView :

Attribut	Valeur
`id`	`nickname_text`
`style`	`NameStyle`
`textAlignment`	(centre)

Étape 2 : Modifiez la visibilité de TextView

Vous pouvez afficher ou masquer des vues dans votre application à l'aide de l'attribut visibility. Cet attribut accepte l'une des trois valeurs suivantes :

visible : la vue est visible.
Invisible : masque la vue, mais celle-ci occupe toujours de l'espace dans la mise en page.
gone : masque la vue, qui n'occupe aucun espace dans la mise en page.

Dans le volet Attributs, définissez la visibility de la vue de texte nickname_text sur gone, car vous ne voulez pas que votre application affiche cette vue de texte au début.

Notez que lorsque vous modifiez l'attribut dans le volet Attributs, la vue nickname_text disparaît de l'éditeur de conception. La vue est masquée dans l'aperçu de la mise en page.
Remplacez la valeur de l'attribut text de la vue nickname_text par une chaîne vide.

Le code XML généré pour ce TextView doit ressembler à ceci :

<TextView
   android:id="@+id/nickname_text"
   style="@style/NameStyle"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:textAlignment="center"
   android:visibility="gone"
   android:text="" />

L'aperçu de votre mise en page doit se présenter comme suit :

Un gestionnaire de clics sur l'objet Button (ou sur n'importe quelle vue) spécifie l'action à effectuer lorsque l'utilisateur appuie sur le bouton (vue). La fonction qui gère l'événement de clic doit être implémentée dans le Activity qui héberge la mise en page avec le bouton (vue).

L'écouteur de clics a généralement ce format, où la vue transmise est celle qui a reçu le clic ou le geste d'appui.

private fun clickHandlerFunction(viewThatIsClicked: View) {
// Add code to perform the button click event
}

Vous pouvez associer la fonction d'écouteur de clics aux événements de clic sur les boutons de deux manières :

Dans la mise en page XML, vous pouvez ajouter l'attribut android:onClick à l'élément <Button>. Exemple :

<Button
   android:id="@+id/done_button"
   android:text="@string/done"
   ...
   android:onClick="clickHandlerFunction"/>

Vous pouvez le faire par programmation au moment de l'exécution, dans onCreate() de Activity, en appelant setOnClickListener. Exemple :

myButton.setOnClickListener {
   clickHanderFunction(it)
}

Dans cette tâche, vous allez ajouter un écouteur de clics pour done_button de manière programmatique. Vous ajoutez l'écouteur de clics dans l'activité correspondante, qui est MainActivity.kt.

Votre fonction d'écouteur de clics, appelée addNickname, effectuera les actions suivantes :

Récupérez le texte de la zone de modification nickname_edit.
Définissez le texte dans la vue de texte nickname_text.
Masquez le texte à modifier et le bouton.
Affichez le pseudo TextView.

Étape 1 : Ajouter un écouteur de clics

Dans Android Studio, dans le dossier java, ouvrez le fichier MainActivity.kt.
Dans MainActivity.kt et dans la classe MainActivity, ajoutez une fonction appelée addNickname. Incluez un paramètre d'entrée appelé view de type View. Le paramètre view est la View sur laquelle la fonction est appelée. Dans ce cas, view sera une instance de votre bouton DONE.

private fun addNickname(view: View) {
}

Dans la fonction addNickname, utilisez findViewById() pour obtenir une référence au texte à modifier nickname_edit et à la vue de texte nickname_text.

val editText = findViewById<EditText>(R.id.nickname_edit)
val nicknameTextView = findViewById<TextView>(R.id.nickname_text)

Définissez le texte de la vue de texte nicknameTextView sur le texte que l'utilisateur a saisi dans editText, en l'obtenant à partir de la propriété text.

nicknameTextView.text = editText.text

Masquez la vue du pseudo EditText en définissant la propriété visibility de editText sur View.GONE.

Dans une tâche précédente, vous avez modifié la propriété visibility à l'aide de l'éditeur de mise en page. Ici, vous faites la même chose de manière programmatique.

editText.visibility = View.GONE

Masquez le bouton DONE (OK) en définissant la propriété visibility sur View.GONE. Vous disposez déjà de la référence du bouton en tant que paramètre d'entrée de la fonction, view.

view.visibility = View.GONE

À la fin de la fonction addNickname, rendez la vue du pseudo TextView visible en définissant sa propriété visibility sur View.VISIBLE.

nicknameTextView.visibility = View.VISIBLE

Étape 2 : Associez l'écouteur de clics au bouton "DONE" (OK)

Maintenant que vous disposez d'une fonction qui définit l'action à effectuer lorsque l'utilisateur appuie sur le bouton DONE, vous devez associer la fonction à la vue Button.

Dans MainActivity.kt, à la fin de la fonction onCreate(), obtenez une référence à la vue DONE Button. Utilisez la fonction findViewById() et appelez setOnClickListener. Transmettez une référence à la fonction d'écouteur de clics, addNickname().

findViewById<Button>(R.id.done_button).setOnClickListener {
            addNickname(it)
        }

Dans le code ci-dessus, it fait référence à done_button, qui est la vue transmise en tant qu'argument.

Exécutez votre application, saisissez un pseudo, puis appuyez sur le bouton OK. Notez que le texte à modifier et le bouton sont remplacés par la vue de texte du pseudo.

Notez que même après que l'utilisateur a appuyé sur le bouton DONE (OK), le clavier reste visible. Il s'agit du comportement par défaut.

Étape 3 : Masquez le clavier

Dans cette étape, vous allez ajouter du code pour masquer le clavier une fois que l'utilisateur a appuyé sur le bouton DONE (TERMINÉ).

Dans MainActivity.kt, à la fin de la fonction addNickname(), ajoutez le code suivant. Pour en savoir plus sur le fonctionnement de ce code, consultez la documentation hideSoftInputFromWindow.

// Hide the keyboard.
val inputMethodManager = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
inputMethodManager.hideSoftInputFromWindow(view.windowToken, 0)

Exécutez à nouveau votre application. Notez qu'après avoir appuyé sur OK,le clavier est masqué.

Une fois que l'utilisateur a appuyé sur le bouton OK, il ne peut plus modifier le surnom. Dans la tâche suivante, vous allez rendre l'application plus interactive et ajouter une fonctionnalité permettant à l'utilisateur de modifier le pseudo.

Dans cette tâche, vous allez ajouter un écouteur de clics à la vue de texte du pseudo. L'écouteur de clics masque la vue de texte du pseudo, affiche le texte à modifier et affiche le bouton DONE (OK).

Étape 1 : Ajouter un écouteur de clics

Dans MainActivity, ajoutez une fonction d'écouteur de clics appelée updateNickname(view: View) pour la vue de texte du pseudo.

private fun updateNickname (view: View) {
}

Dans la fonction updateNickname, obtenez une référence au texte de modification nickname_edit et au bouton OK . Pour ce faire, utilisez la méthode findViewById().

val editText = findViewById<EditText>(R.id.nickname_edit)
val doneButton = findViewById<Button>(R.id.done_button)

À la fin de la fonction updateNickname, ajoutez du code pour afficher le texte à modifier, le bouton DONE et masquer la vue de texte.

editText.visibility = View.VISIBLE
doneButton.visibility = View.VISIBLE
view.visibility = View.GONE

Dans MainActivity.kt, à la fin de la fonction onCreate(), appelez setOnClickListener sur la vue de texte nickname_text. Transmettez une référence à la fonction d'écouteur de clics, qui est updateNickname().

findViewById<TextView>(R.id.nickname_text).setOnClickListener {
   updateNickname(it)
}

Exécutez votre application. Saisissez un pseudo, appuyez sur le bouton OK, puis appuyez sur la vue du pseudo TextView. La vue du pseudo disparaît, et le texte à modifier ainsi que le bouton OK deviennent visibles.

Notez que, par défaut, la vue EditText n'est pas sélectionnée et que le clavier n'est pas visible. L'utilisateur a du mal à comprendre que la vue du texte du pseudo est cliquable. Dans la tâche suivante, vous allez ajouter une mise au point et un style à la vue de texte du pseudo.

Étape 2 : Définissez la mise au point sur la vue EditText et affichez le clavier

À la fin de la fonction updateNickname, définissez le focus sur la vue EditText. Utilisez la méthode requestFocus().

// Set the focus to the edit text.
editText.requestFocus()

À la fin de la fonction updateNickname, ajoutez du code pour rendre le clavier visible.

// Show the keyboard.
val imm = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
imm.showSoftInput(editText, 0)

Étape 3 : Ajouter une couleur d'arrière-plan à la vue TextView du pseudo

Définissez la couleur d'arrière-plan de la vue de texte nickname_text sur @color/colorAccent et ajoutez une marge intérieure inférieure de @dimen/small_padding. Ces modifications indiqueront à l'utilisateur que la vue de texte du pseudo est cliquable.

android:background="@color/colorAccent"
android:paddingBottom="@dimen/small_padding"

Exécutez votre application finale. Le texte à modifier est sélectionné, le pseudo est affiché dans le texte à modifier et la vue du texte du pseudo est stylisée.

Montrez maintenant votre application interactive AboutMe à un ami !

Projet Android Studio : AboutMeInteractive

L'outil Éditeur de mise en page d'Android Studio est un éditeur de conception visuelle. Vous pouvez utiliser l'éditeur de mise en page pour créer la mise en page de votre application en y faisant glisser des éléments d'interface utilisateur.
EditText est un élément d'UI qui permet à l'utilisateur de saisir et de modifier du texte.
Un Button est un élément d'interface utilisateur sur lequel l'utilisateur peut appuyer pour effectuer une action. Un bouton peut se composer de texte, d'une icône ou des deux.

Écouteurs de clics

Vous pouvez faire en sorte que n'importe quel View réponde à un appui en lui ajoutant un écouteur de clics.
La fonction qui définit l'écouteur de clics reçoit le View sur lequel l'utilisateur a cliqué.

Vous pouvez associer une fonction d'écouteur de clics à un View de deux manières :

Dans la mise en page XML, ajoutez l'attribut android:onClick à l'élément <View>.
Au niveau du code, utilisez la fonction setOnClickListener(View.OnClickListener) dans le Activity correspondant.

Cours Udacity :

Développer des applications Android avec Kotlin

Documentation pour les développeurs Android :

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.

Répondre aux questions suivantes

Question 1

De quoi EditText est-il une sous-classe ?

View
LinearLayout
TextView
Button

Question 2

Parmi les valeurs d'attribut visibility suivantes, laquelle, lorsqu'elle est appliquée à une vue, permet de masquer la vue afin qu'elle ne prenne pas de place dans la mise en page ?

visible
Invisible
gone
hide

Question 3

Pour les vues EditText, il est déconseillé de fournir des indications, car elles encombrent le champ de saisie. Vrai ou faux ?

Vrai
Faux

Question 4

Parmi les affirmations suivantes concernant les vues Button, laquelle est vraie ?

Une vue Button est un groupe de vues.
Vous ne pouvez disposer que de trois vues Button par écran.
Les vues Button sont cliquables et l'écouteur de clics associé effectue une action lors d'un clic.
Button est une extension de ImageView.

Passez à la leçon suivante : 2.3 : Utiliser ConstraintLayout avec l'éditeur de mise en page

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.

Principes de base d'Android en Kotlin 02.2 : Ajouter des éléments interactifs Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Ce que vous devez déjà savoir

Points abordés

Objectifs de l'atelier

Étape 1 : Premiers pas

Étape 2 : Ajouter un EditText

Étape 1 : Ajouter un texte d'indice

Étape 2 : Définissez l'attribut inputType

Étape 1 : Ajouter un bouton "DONE" (TERMINÉ)

Étape 2 : Mettez en forme le bouton "DONE" (OK)

Étape 3 : Modifiez la ressource de couleur

Étape 1 : Ajouter une TextView pour le pseudo

Étape 2 : Modifiez la visibilité de TextView

Étape 1 : Ajouter un écouteur de clics

Étape 2 : Associez l'écouteur de clics au bouton "DONE" (OK)

Étape 3 : Masquez le clavier

Étape 1 : Ajouter un écouteur de clics

Étape 2 : Définissez la mise au point sur la vue EditText et affichez le clavier

Étape 3 : Ajouter une couleur d'arrière-plan à la vue TextView du pseudo

Répondre aux questions suivantes

Question 1

Question 2

Question 3

Question 4

Principes de base d'Android en Kotlin 02.2 : Ajouter des éléments interactifs