Kotlin Fundamentals 03.1: créer un fragment

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.

  1. Téléchargez le projet Android Studio AndroidTrivia-Starter.
  2. 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.


  3. 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.

  4. 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.
  5. Cliquez sur l'onglet Design. L'arborescence des composantspour le fichier activity_main.xml indique que la mise en page racine est verticale LinearLayout.



    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:

  1. 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.
  2. Sélectionnez File > New > Fragment > Fragment (Blank) (Fichier &gt, Nouveau &gt, Fragment et gt; Fragment (vide)).
  3. 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.
  4. Cliquez sur Terminer.
  5. Ouvrez le fichier de fragment TitleFragment.kt s'il n'est pas déjà ouvert. Il contient la méthode onCreateView(), l'une des méthodes appelées pendant le cycle de vie d'un fragment.
  6. Dans onCreateView(), supprimez la section return TextView(activity).apply, y compris la ligne qui commence par setText. Il ne reste que la fonction onCreateView() 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é).

  1. Dans la méthode onCreateView() dans TitleFragment.kt, créez une variable binding (val binding).
  2. Pour gonfler la vue du fragment, appelez la méthode DataBindingUtil.inflate() sur l'objet Binding du fragment, qui est FragmentTitleBinding.

    Transmettez quatre paramètres dans la méthode:
  • inflater, qui est la LayoutInflater 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é organisationnelle ViewGroup parente. (Ce paramètre est facultatif.)
  • false pour la valeur attachToParent.
  1. Attribuez la liaison que DataBindingUtil.inflate renvoie à la variable binding.
  2. Renvoyez 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

Au cours de cette étape, vous allez ajouter TitleFragment au fichier de mise en page activity_main.xml de l'application.

  1. Ouvrez res > layout > activity_main.xml, puis cliquez sur l'onglet Text (Texte) pour afficher le code XML de mise en page.
  2. Dans l'élément LinearLayout existant, ajoutez un élément fragment.
  3. Définissez l'ID du fragment sur titleFragment.
  4. 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.
  5. 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>
  1. 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 dans onCreate().
  • 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 : 3.2 Définir des chemins de navigation.

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.