Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

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

Kotlin Fundamentals 02.2: ajouter de l'interactivité aux utilisateurs

Cet atelier de programmation fait partie du cours Android Kotlin Fundamentals. Vous tirerez le meilleur parti de ce cours si vous suivez les ateliers de programmation dans l'ordre. Tous les ateliers de programmation du cours sont répertoriés sur la page de destination des ateliers de programmation Android Kotlin Fundamentals.

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éation d'une application simple qui utilise LinearLayout, TextView, ScrollView et un bouton avec un gestionnaire de clics.

Points abordés

Obtenir les entrées utilisateur à l'aide d'une vue EditText
Comment définir du texte dans une vue TextView à l'aide du texte de la vue EditText
Travaillez avec View et ViewGroup.
Modifier la visibilité d'un View

Objectifs de l'atelier

Ajoutez de l'interactivité à l'application aboutMe, qui est issue d'un atelier de programmation précédent.
Ajoutez un élément EditText pour que l'utilisateur puisse saisir du texte.
Ajouter un objet Button et implémenter son gestionnaire de clics.

Dans cet atelier de programmation, vous allez améliorer l'applicationAboutMe pour ajouter une interaction utilisateur. Vous allez ajouter un champ de pseudo, un bouton OK et une vue de texte pour afficher le pseudo. Une fois que l'utilisateur a saisi un pseudo, il appuie sur le bouton OK pour afficher le pseudo saisi. L'utilisateur peut modifier à nouveau le pseudo en appuyant sur la vue textuelle.

Application MeMe

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 ne disposez pas déjà de l'application À propos 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 vous avez terminé dans un atelier de programmation précédent.
Ouvrez le projet aboutMeInteractive-Starter dans Android Studio.
Exécutez l'application. Celle-ci s'affiche avec le texte de son nom, une étoile et un long segment de texte dans la vue à faire défiler.

Notez que l'utilisateur ne peut pas modifier le texte.

Les applications sont plus intéressantes si les utilisateurs peuvent interagir avec l'application, par exemple s'ils peuvent saisir du texte. Pour accepter la saisie de texte, Android fournit un widget d'interface utilisateur (UI) appelé Modifier le texte. Pour définir un texte de modification, utilisez EditText, une sous-classe de TextView. Le texte modifié permet à l'utilisateur de saisir et de modifier du texte, comme illustré dans la capture d'écran ci-dessous.

Étape 2: Ajoutez un TextText

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

AbTextView, qui est un TextView, s'affiche en haut de la liste des éléments de texte du volet Palette. Sous Ab TextView, plusieurs vues EditText s'affichent.

Dans le volet Palette, notez que l'icône en forme de TextView affiche les lettres Ab sans trait de soulignement. En revanche, les icônes EditText montrent le trait de soulignement Ab. Le trait de soulignement indique que la vue peut être modifiée.

Pour chaque vue EditText, Android définit différents attributs, et le système affiche la méthode de saisie flexible appropriée (comme un clavier à l'écran).
Faites glisser un texte en texte brut dans l'arborescence des composants, puis placez-le sous le name_text et au-dessus du 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 de l'étoile, un texte de modification s'affiche avec le texte par défaut &name;Nom.

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

Étape 1: Ajoutez du texte d'aide

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ées que les utilisateurs peuvent saisir dans la vue EditText. Le système Android affiche le champ de saisie approprié et le clavier à l'écran, en fonction du type de saisie défini.

Pour afficher tous les types d'entrées possibles, cliquez sur le champ inputType dans le volet Attributs, ou sur les trois points ... à côté du champ. Une liste contenant tous les types d'entrées à utiliser s'affiche. Le type d'entrée 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 l'entrée 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 de saisie pour le champ "Pseudo" :

Définissez l'attribut inputType sur textPersonName nickname_edit pour le texte d'édition.
Dans le volet Arborescence des composants, affichez un 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 la saisie automatique pour votre application.
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 être composé de texte, d'une icône, ou des deux à la fois et une icône.

Dans cette tâche, vous allez ajouter un bouton DONE (OK) que l'utilisateur appuie après avoir saisi un pseudo. Le bouton remplace la vue EditText par une vue TextView qui affiche le pseudo. Pour le modifier, l'utilisateur peut appuyer sur la vue TextView.

Étape 1: Ajouter un bouton "OK"

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 chaîne la valeur Done,

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

Utilisez le volet Attributs pour définir les attributs suivants dans 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.

Définissez le style sur 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 modifie la couleur d'accentuation du bouton en 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 des ressources de couleur ou modifier les couleurs existantes dans votre projet, en fonction des exigences 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: Appliquer un style au bouton "OK"

Dans le volet Attributs, ajoutez une marge supérieure en sélectionnant Layout_Margin > Top. Marge supérieure définie sur layout_margin, définie dans le fichier dimens.xml.
Définissez la valeur de l'attribut d'fontFamily sur roboto dans le menu déroulant.
Accédez à l'onglet Text (Texte) et vérifiez le code XML généré pour le bouton que vous venez d'ajouter.

<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 modifiez la couleur d'accentuation du bouton pour qu'elle corresponde à la barre d'application.

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

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

La couleur correspondant au code hexadécimal apparaît dans la marge gauche de l'éditeur de fichiers.

Notez la modification de la couleur des boutons dans l'éditeur de conception.

Exécutez votre application. Un bouton stylisé OK doit s'afficher sous le texte de modification.

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

Étape 1: Ajoutez un TextView pour l'alias

Faites glisser une vue textuelle depuis le volet Palette vers l'arborescence des composants. Placez la vue Texte sous le done_button et au-dessus du 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é du TextView

Vous pouvez afficher ou masquer des vues dans votre application à l'aide de l'attribut visibility. Les valeurs possibles pour cet attribut sont les suivantes:

visible: la vue est visible.
Invisible: masque la vue, mais elle continue de prendre de la place dans la mise en page.
gone: la vue est masquée. Elle n'occupe aucun espace dans la mise en page.

Dans le volet Attributs, définissez la valeur visibility de la vue textuelle nickname_text sur gone, car vous ne souhaitez pas que cette application affiche d'abord cette vue Texte.

Quand vous modifiez l'attribut, 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 devrait 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 devrait ressembler à ceci:

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 la Activity qui héberge la mise en page à l'aide du bouton (vue).

L'écouteur de clics utilise le format générique suivant : la vue transmise est celle qui a enregistré le clic ou l'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 des 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() du 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. Ajoutez l'écouteur de clics dans l'activité correspondante, à savoir MainActivity.kt.

La fonction d'écouteur de clics, appelée addNickname, fonctionnera comme suit:

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

Étape 1: Ajoutez un écouteur de clics

Dans le dossier java d'Android Studio, ouvrez le fichier MainActivity.kt.
Dans MainActivity.kt, 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 le View sur lequel la fonction est appelée. Dans ce cas, view sera une instance de votre bouton DONE (OK).

private fun addNickname(view: View) {
}

Dans la fonction addNickname, utilisez findViewById() pour obtenir une référence au texte de modification nickname_edit et à l'affichage du 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 Texte nicknameTextView sur le texte saisi par l'utilisateur dans le editText, ce qui s'effectue grâce à 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 devez faire la même chose de façon programmatique.

editText.visibility = View.GONE

Masquez le bouton DONE (OK) en définissant la propriété visibility sur View.GONE. Vous avez déjà renseigné 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, définissez la propriété visibility sur View.VISIBLE pour que la vue TextView soit visible.

nicknameTextView.visibility = View.VISIBLE

Étape 2: Associez l'écouteur de clics au bouton OK

Maintenant que vous avez une fonction qui définit l'action à effectuer lorsque vous appuyez sur le bouton DONE (OK), vous devez associer la fonction à la vue Button.

Dans MainActivity.kt, à la fin de la fonction onCreate(), obtenez une référence à la vue DONEButton (OK). 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 à la 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 de modification et le bouton sont remplacés par la vue Texte de l'alias.

Notez que même lorsque l'utilisateur appuie sur le bouton OK, le clavier reste visible. Ce comportement est le comportement par défaut.

Étape 3: Masquez le clavier

Dans cette étape, vous allez ajouter du code pour masquer le clavier lorsque l'utilisateur appuie sur le bouton DONE (OK).

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 l'application. Notez qu'après avoir appuyé sur OK,le clavier est masqué.

L'utilisateur ne peut pas modifier le pseudo après avoir appuyé sur le bouton OK. Dans la tâche suivante, vous allez rendre l'application plus interactive et ajouter des fonctionnalités pour que l'utilisateur puisse mettre à jour le pseudo.

Dans cette tâche, vous allez ajouter un écouteur de clics à la vue Texte de l'alias. L'écouteur de clics masque l'affichage du texte du pseudo, affiche le texte de la modification et indique le bouton OK.

Étape 1: Ajoutez un écouteur de clics

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

private fun updateNickname (view: View) {
}

Dans la fonction updateNickname, obtenez une référence au texte de modification nickname_edit, ainsi qu'une référence au bouton DONE (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 de modification, afficher le bouton OK et masquer la vue textuelle.

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 textuelle 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 de l'alias TextView. Le texte de l'alias disparaît, et le texte de modification et 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. Il est difficile pour l'utilisateur de comprendre que le texte de l'alias est cliquable. Dans la tâche suivante, vous allez ajouter un curseur et un style à la vue Texte de l'alias.

Étape 2: Placez le curseur dans la vue EditText et affichez le clavier

À la fin de la fonction updateNickname, sélectionnez l'option 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: Ajoutez une couleur d'arrière-plan à la vue TextView de l'alias

Définissez la couleur d'arrière-plan de la vue Texte nickname_text sur @color/colorAccent et ajoutez une marge intérieure inférieure de @dimen/small_padding. Ces modifications permettront à l'utilisateur de savoir qu'il est possible de cliquer sur la vue Texte de l'alias.

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

Exécutez votre application finale. Le texte de modification est sélectionné, le pseudo s'affiche dans le texte de modification et le style du texte du pseudo est stylisé.

Maintenant, montrez votre application interactive MeMe à un ami !

Projet Android Studio: AboutMeInteractive

L'éditeur de mise en page dans Android Studio est un éditeur de conception visuelle. L'éditeur de mise en page vous permet de créer la mise en page de votre application en faisant glisser des éléments de l'interface utilisateur dans la mise en page.
EditText est un élément d'interface utilisateur 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 être composé de texte, d'une icône, ou des deux à la fois et une icône.

Écouteurs de clics

Vous pouvez renvoyer n'importe quelle réponse View à un appui en y ajoutant un écouteur de clic.
La fonction qui définit l'écouteur de clics reçoit le View sur lequel l'utilisateur clique.

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>.
De manière automatisée, 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 effectuent cet atelier de programmation dans le cadre d'un cours animé par un enseignant. C'est à l'enseignant de procéder comme suit:

Si nécessaire, rendez-les.
Communiquez aux élèves comment rendre leurs devoirs.
Notez les devoirs.

Les enseignants peuvent utiliser ces suggestions autant qu'ils le souhaitent, et ils n'ont pas besoin d'attribuer les devoirs de leur choix.

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

Répondez à ces questions.

Question 1

À quoi correspond EditText une sous-classe ?

View
LinearLayout
TextView
Button

Question 2

Quelle valeur de l'attribut visibility est définie sur une vue si elle est masquée afin que sa vue soit masquée et n'occupe pas d'espace dans la mise en page ?

visible
Invisible
gone
hide

Question 3

Pour les vues EditText, il n'est pas recommandé de fournir des indications, car celles-ci encombrent le champ de saisie. Vrai ou faux ?

Vrai
Faux

Question 4

Parmi les affirmations suivantes concernant l'affichage de Button, laquelle est vraie ?

Une vue Button est un groupe de vues.
Vous ne pouvez avoir que trois vues Button par écran.
Button vues sont cliquables. Lors de chaque clic, l'écouteur de clics associé effectue une action.
Button est une extension de ImageView.

Démarrez la leçon suivante: 2.3: Contrainte de mise en page avec l'éditeur de mise en page.

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