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

Principes de base d'Android en Kotlin 03.1 : Créer un fragment

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.

Dans cet atelier de programmation, vous allez découvrir les fragments et en créer un dans une application de démarrage appelée AndroidTrivia. Dans le prochain atelier de programmation, vous en apprendrez davantage sur la navigation et continuerez à travailler sur l'application AndroidTrivia.

Ce que vous devez déjà savoir

Principes de base de Kotlin
Créer des applications Android de base en Kotlin
Utiliser les mises en page

Points abordés

Ajouter un fragment de manière statique à votre application

Objectifs de l'atelier

Créez 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 la programmation Android. Si l'utilisateur répond correctement aux trois questions, il gagne la partie et peut partager ses résultats.

L'application AndroidTrivia illustre les modèles et les commandes de navigation. L'application comporte plusieurs composants :

Sur l'écran titre, affiché à gauche dans la capture d'écran ci-dessus, l'utilisateur lance le jeu.
Sur l'écran de jeu avec des questions, affiché au milieu ci-dessus, l'utilisateur joue et envoie ses réponses.
Le tiroir de navigation, illustré à droite ci-dessus, se déploie sur le côté de l'application et contient un menu avec un en-tête. L'icône du 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.

En haut de l'application se trouve une vue colorée appelée barre d'application, également appelée barre d'action.

Dans cet atelier de programmation, vous allez travailler à partir d'une application de démarrage qui fournit le code du modèle et les classes de fragment dont vous avez besoin pour créer l'application Trivia.

Téléchargez le projet Android Studio AndroidTrivia-Starter.
Ouvrez le projet dans Android Studio et exécutez l'application. Lorsque l'application s'ouvre, elle n'effectue aucune action, si ce n'est afficher le nom de l'application et un écran vide.
Dans le volet "Projet" d'Android Studio, ouvrez la vue "Projet : Android" pour explorer les fichiers du projet. Ouvrez le dossier app > java pour afficher les classes MainActivity et les classes de fragment.
Ouvrez le dossier res > layout, puis double-cliquez sur activity_main.xml. Le fichier activity_main.xml s'affiche dans l'éditeur de mise en page.
Cliquez sur l'onglet Conception. L'arborescence des composants du fichier activity_main.xml affiche la mise en page racine en tant que LinearLayout verticale.

Dans une mise en page linéaire verticale, 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 réutiliser un fragment dans plusieurs activités.

Un fragment s'apparente à une section modulaire d'une activité, comme une "sous-activité" que vous pouvez réutiliser dans d'autres activités :

Un fragment possède 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 comporte une activité principale et plusieurs fragments. La plupart des fragments et de 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 : Ajouter une classe de fragment

Dans 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 "Projet" pour recentrer l'attention sur les fichiers du projet. Par exemple, cliquez sur le dossier com.example.android.navigation.
Sélectionnez File > New > Fragment > Fragment (Blank) (Fichier > Nouveau > Fragment > Fragment (Vide)).
Pour le nom du fragment, utilisez TitleFragment. Décochez toutes les cases, y compris create Layout XML (créer une mise en page XML), include fragment factory methods (inclure les méthodes de fabrique de fragments) et include interface callbacks (inclure les 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éthode onCreateView(), qui est l'une des méthodes appelées pendant le cycle de vie d'un fragment.
Dans onCreateView(), supprimez la section return TextView(activity).apply, y compris la ligne qui commence par setText. La fonction onCreateView() ne contient plus que le code suivant :

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
}

Créer un objet de liaison

Le fragment ne sera pas compilé maintenant. Pour que le fragment se compile, 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() de TitleFragment.kt, créez une variable binding (val binding).
Pour développer la vue du fragment, appelez la méthode DataBindingUtil.inflate() sur l'objet Binding du fragment, qui est FragmentTitleBinding.

Transmettez quatre paramètres à la méthode :

inflater, qui correspond à LayoutInflater utilisé pour gonfler la mise en page de 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 le ViewGroup parent. (Ce paramètre est facultatif.)
false pour la valeur attachToParent.

Attribuez la liaison renvoyée par DataBindingUtil.inflate à la variable binding.
Renvoie binding.root à partir de la méthode, qui contient la vue gonflée. Votre méthode onCreateView() 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

Dans 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 la mise en page.
Dans l'élément LinearLayout existant, ajoutez un élément fragment.
Définissez l'ID du fragment sur titleFragment.
Définissez le nom du fragment sur le chemin complet de la classe du fragment, qui est com.example.android.navigation.TitleFragment dans ce cas.
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, sur laquelle vous continuerez à travailler dans les deux prochains ateliers de programmation de cette leçon.

Un fragment est une section modulaire d'une activité.
Un fragment possède 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 dans onCreateView().
Vous pouvez ajouter ou supprimer un fragment pendant l'exécution de l'activité.

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

Quelles sont les différences entre les fragments et les activités ? Sélectionnez toutes les affirmations vraies.

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 dans onCreate().
Une activité possède sa propre mise en page, mais un fragment ne peut pas en avoir une.
Une activité possède son propre cycle de vie, mais pas un fragment.
Lorsque vous gonflez la mise en page d'un fragment ou d'une activité, vous pouvez faire référence à la mise en page en tant que R.layout.layoutname.

Question 2

Parmi les affirmations suivantes concernant les fragments, lesquelles sont vraies ? Plusieurs réponses possibles.

Vous pouvez utiliser un fragment dans plusieurs activités.
Une activité peut avoir plusieurs fragments.
Une fois que vous avez défini un fragment dans une classe Kotlin, il est automatiquement ajouté au fichier de mise en page activity_main.xml.
Utilisez la balise <fragment> pour indiquer où insérer un fragment dans un fichier de mise en page.

Passez à la leçon suivante : 3.2 Définir des chemins de navigation

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 03.1 : Créer un fragment Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.