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.
Dans cet atelier de programmation, vous allez découvrir les fragments et créer un fragment dans une application de démarrage appelée AndroidTrivia. Dans l'atelier de programmation suivant, vous en apprendrez plus sur la navigation et travaillerez sur l'application AndroidTrivia.
Ce que vous devez déjà savoir
- Les bases de Kotlin
- Créer des applications Android de base en Kotlin
- Utiliser les mises en page
Points abordés
- Ajouter un fragment en mode statique à votre application
Objectifs de l'atelier
- Créer un fragment dans une activité
Dans les trois ateliers de programmation qui composent cette leçon, vous allez travailler sur une application appelée AndroidTrivia. L'application terminée est un jeu dans lequel l'utilisateur répond à trois questions de culture générale sur le codage Android. Si l'utilisateur répond correctement aux trois questions, il remporte le jeu et peut partager ses résultats.
L'application AndroidTrivia présente les schémas et les commandes de navigation. L'application se compose de plusieurs éléments:
- Sur l'écran de titre, à gauche de la capture d'écran ci-dessus, l'utilisateur commence le jeu.
- Sur l'écran du jeu, les questions sont affichées au milieu ci-dessus. L'utilisateur joue au jeu et soumet ses réponses.
- Le panneau de navigation, situé à droite, fait glisser le panneau de l'application vers le bas et contient un menu avec un en-tête. L'icône de panneau ouvre le panneau de navigation. Le menu du panneau de navigation contient un lien vers la page "À propos" et un lien vers les règles du jeu.
Le haut de l'application affiche une vue colorée appelée barre d'application, également appelée barre d'action.
Dans cet atelier de programmation, vous allez utiliser une application de départ qui fournit un modèle de code et des classes de fragment dont vous avez besoin pour terminer l'application.
- Téléchargez le projet Android Studio AndroidTrivia-Starter.
- Ouvrez le projet dans Android Studio et exécutez l'application. Lors de l'ouverture de l'application, celle-ci ne fait qu'afficher le nom de l'application ainsi qu'un écran vide.
- Dans le volet Projet Android Studio, ouvrez la vue Projet Android pour explorer les fichiers du projet. Ouvrez le dossier app > java pour afficher la classe
MainActivity
et les classes de fragment. - Ouvrez le dossier res > layout et double-cliquez sur activity_main.xml. Le fichier
activity_main.xml
apparaît dans l'éditeur de mise en page. - Cliquez sur l'onglet Design. L'arborescence des composantspour le fichier
activity_main.xml
indique que la mise en page racine est verticaleLinearLayout
.
Dans une mise en page linéaire, toutes les vues enfants de la mise en page sont alignées verticalement.
Un fragment représente un comportement ou une partie de l'interface utilisateur (UI) dans une activité. Vous pouvez combiner plusieurs fragments dans une même activité pour créer une interface utilisateur à plusieurs volets et vous pouvez réutiliser un fragment dans plusieurs activités.
Considérez un fragment comme une section modulaire d'une activité, telle qu'une "sous-activité" que vous pouvez également utiliser dans d'autres activités:
- Un fragment a son propre cycle de vie et reçoit ses propres événements d'entrée.
- Vous pouvez ajouter ou supprimer un fragment pendant l'exécution de l'activité.
- Un fragment est défini dans une classe Kotlin.
- L'interface utilisateur d'un fragment est définie dans un fichier de mise en page XML.
L'application AndroidTrivia dispose d'une activité principale et de plusieurs fragments. La plupart des fragments et leurs fichiers de mise en page ont été définis pour vous. Dans cette tâche, vous allez créer un fragment et l'ajouter à l'activité principale de l'application.
Étape 1: Ajoutez une classe de fragment
Au cours de cette étape, vous allez créer une classe TitleFragment
vide. Commencez par créer une classe Kotlin pour un nouveau fragment:
- Dans Android Studio, cliquez n'importe où dans le volet du projet pour replacer le curseur dans les fichiers du projet. Par exemple, cliquez sur le dossier com.example.android.navigation.
- Sélectionnez File > New > Fragment > Fragment (Blank) (Fichier >, Nouveau >, Fragment et gt; Fragment (vide)).
- Pour le nom du fragment, utilisez TitleFragment. Décochez toutes les cases, y compris créez le fichier XML de mise en page, incluez des méthodes de fabrique de fragments et incluez des rappels d'interface.
- Cliquez sur Terminer.
- Ouvrez le fichier de fragment
TitleFragment.kt
s'il n'est pas déjà ouvert. Il contient la méthodeonCreateView()
, l'une des méthodes appelées pendant le cycle de vie d'un fragment. - Dans
onCreateView()
, supprimez la sectionreturn TextView(activity).apply
, y compris la ligne qui commence parsetText
. Il ne reste que la fonctiononCreateView()
avec le code suivant:
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?): View? {
}
Créer un objet de liaison
Le fragment ne peut pas être compilé maintenant. Pour compiler le fragment, vous devez créer un objet de liaison et gonfler la vue du fragment (ce qui équivaut à utiliser setContentView()
pour une activité).
- Dans la méthode
onCreateView()
dansTitleFragment.kt
, créez une variablebinding
(val binding
). - Pour gonfler la vue du fragment, appelez la méthode
DataBindingUtil.inflate()
sur l'objetBinding
du fragment, qui estFragmentTitleBinding
.
Transmettez quatre paramètres dans la méthode:
inflater
, qui est laLayoutInflater
utilisée pour gonfler la mise en page de la liaison.- Ressource de mise en page XML de la mise en page à gonfler. Utilisez l'une des mises en page déjà définies pour vous (
R.layout.fragment_title
). container
pour l'unité organisationnelleViewGroup
parente. (Ce paramètre est facultatif.)false
pour la valeurattachToParent
.
- Attribuez la liaison que
DataBindingUtil.inflate
renvoie à la variablebinding
. - Renvoyez
binding.root
à partir de la méthode, qui contient la vue gonflée. Votre méthodeonCreateView()
ressemble maintenant au code suivant:
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?): View? {
val binding = DataBindingUtil.inflate<FragmentTitleBinding>(inflater,
R.layout.fragment_title,container,false)
return binding.root
}
Étape 2: Ajoutez le nouveau fragment au fichier de mise en page principal
Au cours de cette étape, vous allez ajouter TitleFragment
au fichier de mise en page activity_main.xml
de l'application.
- Ouvrez res > layout > activity_main.xml, puis cliquez sur l'onglet Text (Texte) pour afficher le code XML de mise en page.
- Dans l'élément
LinearLayout
existant, ajoutez un élémentfragment
. - Définissez l'ID du fragment sur
titleFragment
. - Définissez le nom du fragment sur le chemin d'accès complet de la classe fragment, qui est alors
com.example.android.navigation.TitleFragment
. - Définissez la largeur et la hauteur de la mise en page sur
match_parent
.
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<fragment
android:id="@+id/titleFragment"
android:name="com.example.android.navigation.TitleFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
</layout>
- Exécutez l'application. Le fragment a été ajouté à votre écran principal.
Projet Android Studio : AndroidTriviaFragment
Dans cet atelier de programmation, vous avez ajouté un fragment à l'application AndroidTrivia. Vous allez continuer à travailler dans les deux prochains ateliers de programmation de cette leçon.
- Un fragment est une section modulaire d'une activité.
- Un fragment a son propre cycle de vie et reçoit ses propres événements d'entrée.
- Utilisez la balise
<fragment>
pour définir la mise en page du fragment dans le fichier de mise en page XML. - Gonflez la mise en page d'un fragment à
onCreateView()
. - Vous pouvez ajouter ou supprimer un fragment pendant l'exécution de l'activité.
Cours Udacity:
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
Quelles sont les différences entre les fragments et les activités ? Sélectionnez toutes les affirmations justes.
- Lorsque vous créez un fragment, vous gonflez la mise en page dans la méthode
onCreateView()
. Lorsque vous créez une activité, vous gonflez la mise en page dansonCreate()
. - Une activité a sa propre mise en page, mais un fragment ne peut pas avoir sa propre mise en page.
- Une activité a son propre cycle de vie, mais pas un fragment.
- Lorsque vous gonflez la mise en page pour un fragment ou une activité, vous pouvez la référencer comme
R.layout.
layoutname
.
Question 2
Parmi les affirmations suivantes concernant les fragments, lesquelles sont vraies ? Sélectionnez toutes les réponses applicables.
- Vous pouvez utiliser un fragment dans plusieurs activités.
- Une activité peut avoir plusieurs fragments.
- Un fragment que vous avez défini dans une classe Kotlin est automatiquement ajouté au fichier de mise en page
activity_main.xml
. - Utilisez la balise
<fragment>
pour définir le lieu dans un fichier de mise en page où un fragment doit être inséré.
Démarrez la leçon suivante :
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.