Contenu

• Qu'est-ce que le composant d'architecture de navigation?
• Ajout de l'éditeur de navigation à Android Studio
• Dépendances du projet: fragment de navigation et interface utilisateur de navigation
• Obtenez un aperçu visuel de la navigation de votre application
• Remplir le graphique de navigation: Ajouter des destinations
• Mise à jour de vos mises en page de fragments
• Fragment_first.xml
• Fragment_second.xml
• Fragment_third.xml
• Connecter vos destinations avec des actions
• Hébergement du graphique de navigation
• Déclenchement des transitions avec NavController
• Ajouter plus de navigation
• Création d'animations de transition personnalisées
• Emballer

Lors de la conférence I / O 2018, Google a annoncé une nouvelle approche pour le développement d'applications Android.

La recommandation officielle de Google est de créer une seule activité qui serve de point d’entrée principal à votre application, puis de fournir le reste du contenu de votre application sous forme de fragments.

Alors que l'idée de jongler avec toutes ces différentes transactions de fragments et cycles de vie peut sembler un cauchemar, à l'I / O 2018, Google a également lancé le composant Architecture de navigation conçu pour vous aider à adopter ce type de structure d'activité unique.

Dans cet article, nous allons vous montrer comment ajouter le composant Navigation à votre projet et comment l'utiliser pour créer rapidement et facilement une application à une seule activité et plusieurs fragments, à l'aide du nouvel éditeur de navigation d'Android Studio. Une fois que vous avez créé et connecté vos fragments, nous allons améliorer les transitions de fragments standard d’Android en utilisant le composant Navigation et l’éditeur pour créer une série d’animations de transition entièrement personnalisables.

Qu'est-ce que le composant d'architecture de navigation?

Faisant partie d'Android JetPack, le composant Architecture de navigation vous aide à visualiser les différents itinéraires de votre application et simplifie le processus de mise en œuvre de ces itinéraires, en particulier pour la gestion des transactions de fragments.

Pour utiliser le composant Navigation, vous devez créer un graphique de navigation, qui est un fichier XML décrivant la relation entre les activités et les fragments de votre application.

Un graphique de navigation comprend:

• Destinations: Les écrans individuels auxquels l'utilisateur peut accéder
• Actes: Les itinéraires que l'utilisateur peut emprunter entre les destinations de votre application

Vous pouvez afficher une représentation visuelle du graphe de navigation de votre projet dans l'éditeur de navigation d'Android Studio. Vous trouverez ci-dessous un graphique de navigation composé de trois destinations et de trois actions, tel qu’il apparaît dans l’éditeur de navigation.

Le composant Navigation est conçu pour vous aider à mettre en œuvre la nouvelle structure d'applications recommandée par Google, dans laquelle une seule activité «héberge» le graphique de navigation et toutes vos destinations sont implémentées sous forme de fragments. Dans cet article, nous suivrons cette approche recommandée et créerons une application composée d’une destination MainActivity et de trois destinations de fragments.

Toutefois, le composant Navigation ne s’applique pas uniquement aux applications ayant cette structure recommandée. Un projet peut avoir plusieurs graphiques de navigation et vous pouvez utiliser des fragments et des activités comme destinations dans ces graphiques de navigation. Si vous migrez un grand projet mature vers le composant Navigation, il peut s'avérer plus simple de séparer les flux de navigation de votre application en groupes, chaque groupe étant constitué d'une activité «principale», de quelques fragments associés et de son propre graphe de navigation.

Ajout de l'éditeur de navigation à Android Studio

Pour vous aider à tirer le meilleur parti du composant Navigation, Android Studio 3.2 Canary et versions ultérieures disposent d'un nouvel éditeur de navigation.

Pour activer cet éditeur:

• Sélectionnez «Android Studio> Préférences…» dans la barre de menus d'Android Studio.
• Dans le menu de gauche, choisissez «Expérimental».
• Si ce n'est pas déjà fait, cochez la case «Activer l'éditeur de navigation».

• Cliquez sur OK."
• Redémarrez Android Studio.

Dépendances du projet: fragment de navigation et interface utilisateur de navigation

Créez un nouveau projet avec les paramètres de votre choix, puis ouvrez son fichier build.gradle et ajoutez navigation-fragment et navigation-ui en tant que dépendances du projet:

dependencies {implementation fileTree (dir: libs, include:) implémentation com.android.support:appcompat-v7:28.0.0 implémentation com.android.support.constraint: constraint-layout: 1.1.3 // Ajoute la // mise en oeuvre suivante "android.arch.navigation: fragment de navigation: 1.0.0-alpha05" // Navigation-UI fournit l'accès à certaines fonctions d'assistance // implémentation "android.arch.navigation: navigation-ui: 1.0.0-alpha05" implémentation .android.support: support-v4: 28.0.0 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2 androidTestImplementation com.android.support.test.espresso: espresso-core: 3.0.2 }

Obtenez un aperçu visuel de la navigation de votre application

Pour créer un graphique de navigation:

• Tout en maintenant la touche Contrôle enfoncée, cliquez sur le répertoire «res» de votre projet et sélectionnez «Nouveau> Répertoire de ressources Android».
• Ouvrez le menu déroulant «Type de ressource» et choisissez «Navigation».
• Sélectionnez "OK".
• Cliquez sur votre nouveau répertoire «res / navigation» en maintenant la touche Contrôle enfoncée, puis sélectionnez «Nouveau> Fichier de ressources de navigation».
• Ouvrez le menu déroulant «Type de ressource» et sélectionnez «Navigation».

• Donnez ce nom de fichier; J'utilise «nav_graph».
• Cliquez sur OK."

Ouvrez votre fichier «res / navigation / nav_graph» et l'éditeur de navigation se lancera automatiquement. Semblable à l’éditeur de disposition, l’éditeur de navigation est divisé en onglets «Conception» et «Texte».

Si vous sélectionnez l’onglet «Texte», vous verrez le code XML suivant:

<? xml version = "1.0" encoding = "utf-8"?> // Navigation ’est le nœud racine de chaque graphe de navigation //

L'onglet "Conception" vous permet de créer et de modifier visuellement la navigation de votre application.

De gauche à droite, l'éditeur de navigation comprend:

• Une liste de destinations: Cette liste répertorie toutes les destinations qui composent ce graphique de navigation particulier, ainsi que l’activité où le graphique de navigation est hébergé.
• L'éditeur de graphes: L’Éditeur de graphiques fournit un aperçu visuel de toutes les destinations du graphique et des actions qui les connectent.
• L'éditeur d'attributs: Si vous sélectionnez une destination ou une action dans l'éditeur de graphiques, le panneau "Attributs" affiche des informations sur l'élément actuellement sélectionné.

Remplir le graphique de navigation: Ajouter des destinations

Notre graphique de navigation est actuellement vide. Ajoutons quelques destinations.

Vous pouvez ajouter des activités ou des fragments existants, mais vous pouvez également utiliser le graphique de navigation pour créer rapidement et facilement de nouveaux fragments:

• Cliquez sur le bouton «Nouvelle destination», puis sélectionnez «Créer une destination vide».

• Dans le champ «Nom du fragment», entrez le nom de la classe de votre fragment; J'utilise «FirstFragment».
• Assurez-vous que la case «Créer un modèle XML» est cochée.
• Remplissez le champ «Nom de la structure du fragment»; J'utilise «fragment_first».
• Cliquez sur "Terminer".

Une sous-classe FirstFragment et le fichier de ressources de présentation «fragment_first.xml» correspondant vont maintenant être ajoutés à votre projet. FirstFragment apparaîtra également comme destination dans le graphique de navigation.

Si vous sélectionnez FirstFragment dans l'éditeur de navigation, le panneau "Attributs" affiche des informations sur cette destination, telles que son nom de classe et l'ID que vous utiliserez pour référencer cette destination ailleurs dans votre code.

Rincez et répétez l’ajout d’un deuxième fragment et d’un troisième fragment à votre projet.

Basculez sur l’onglet «Texte» et vous verrez que le XML a été mis à jour pour refléter ces changements.

Chaque graphique de navigation a une destination de départ, qui est l’écran qui s’affiche lorsque l’utilisateur lance votre application. Dans le code ci-dessus, nous utilisons FirstFragment comme destination de départ de notre application. Si vous passez à l’onglet «Conception», vous remarquerez alors une icône de maison qui indique également FirstFragment comme destination de départ du graphique.

Si vous préférez utiliser un point de départ différent, sélectionnez l'activité ou le fragment en question, puis sélectionnez «Définir la destination de départ» dans le panneau «Attributs».

Sinon, vous pouvez apporter cette modification au niveau du code:

Mise à jour de vos mises en page de fragments

Maintenant que nous avons nos destinations, ajoutons quelques éléments d’interface utilisateur pour que le fragment que nous voyons soit toujours visible.

Je vais ajouter ce qui suit à chaque fragment:

• TextView contenant le titre du fragment
• Un bouton qui permettra à l’utilisateur de naviguer d’un fragment à l’autre

Voici le code pour chaque fichier de ressources de présentation:

Fragment_first.xml

Fragment_second.xml

Fragment_third.xml

Connecter vos destinations avec des actions

La prochaine étape consiste à relier nos destinations via des actions.

Vous pouvez créer une action dans l'éditeur de navigation par simple glisser-déposer:

• Assurez-vous que l’onglet «Conception» de l’éditeur est sélectionné.
• Survolez le côté droit de la destination avec laquelle vous voulez naviguer de, qui dans ce cas est FirstFragment. Un cercle devrait apparaître.
• Cliquez et faites glisser votre curseur vers la destination vers laquelle vous souhaitez naviguer à, qui est SecondFragment. Une ligne bleue devrait apparaître. Lorsque SecondFragment est surligné en bleu, relâchez le curseur pour créer un lien entre ces destinations.

Il devrait maintenant y avoir une flèche d’action reliant FirstFragment à SecondFragment. Cliquez pour sélectionner cette flèche et le panneau "Attribut" sera mis à jour pour afficher des informations sur cette action, y compris son identifiant attribué par le système.

Cette modification est également reflétée dans le code XML du graphique de navigation:

… … …

Rincez et répétez l'opération pour créer une action reliant SecondFragment à ThirdFragment et une action reliant ThirdFragment à FirstFragment.

Hébergement du graphique de navigation

Le graphique de navigation fournit une représentation visuelle des destinations et des actions de votre application, mais l’appel de ces actions nécessite un code supplémentaire.

Une fois que vous avez créé un graphique de navigation, vous devez l’héberger dans une activité en ajoutant un NavHostFragment au fichier de présentation de cette activité. Ce NavHostFragment fournit un conteneur dans lequel la navigation peut avoir lieu et sera également responsable de l'échange des fragments à l'intérieur et à l'extérieur lorsque l'utilisateur navigue dans votre application.

Ouvrez le fichier «activity_main.xml» de votre projet et ajoutez un NavHostFragment.

<? xml version = "1.0" encoding = "utf-8"?> // Créez un fragment qui agira comme le NavHostFragment //.

Dans le code ci-dessus, app: defaultNavHost = "true" permet à l'hôte de navigation d'intercepter à chaque fois que le bouton "Précédent" du système est enfoncé, de sorte que l'application respecte toujours la navigation décrite dans votre graphique de navigation.

Déclenchement des transitions avec NavController

Ensuite, nous devons implémenter NavController, un nouveau composant responsable de la gestion du processus de navigation dans NavHostFragment.

Pour accéder à un nouvel écran, vous devez extraire un NavController à l’aide de Navigation.findNavController, appelez la méthode browse (), puis transmettez l’ID de la destination vers laquelle vous naviguez ou l’action que vous souhaitez invoquer. Par exemple, j'appelle «action_firstFragment_to_secondFragment», qui transportera l'utilisateur de FirstFragment à SecondFragment:

NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.action_firstFragment_to_secondFragment);

L'utilisateur passe à un nouvel écran en cliquant sur un bouton. Nous devons donc également implémenter un OnClickListener.

Après avoir apporté ces modifications, FirstFragment devrait ressembler à ceci:

importer android.os.Bundle; import android.support.annotation.NonNull; importer android.support.annotation.Nullable; importer android.support.v4.app.Fragment; importer android.view.LayoutInflater; importer android.view.View; importer android.view.ViewGroup; importer android.widget.Button; importer androidx.navigation.NavController; importer androidx.navigation.Navigation; public class FirstFragment étend Fragment {public FirstFragment () {} @Override public void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); if (getArguments ()! = null) {}} @Override public View onCreateView (inflateur LayoutInflater, conteneur ViewGroup, Bundle savedInstanceState) {return inflater.inflate (R.layout.fragment_first, conteneur, false); } @Override public void onViewCreated (@NonNull View View, @Nullable Bundle savedInstanceState) {Button button = (Button) view.findViewById (R.id.button); button.setOnClickListener (new View.OnClickListener () {@Override public void onClick (View v) {NavController navController = }}); }}

Ensuite, ouvrez votre MainActivity et ajoutez ce qui suit:

• NavigationView.OnNavigationItemSelectedListener: Un écouteur pour gérer les événements sur les éléments de navigation
• SecondFragment.OnFragmentInteractionListener: Une interface générée lors de la création de SecondFragment via l'éditeur de navigation

MainActivity doit également implémenter la méthode onFragmentInteraction (), qui permet la communication entre le fragment et l’Activité.

importer android.support.v7.app.AppCompatActivity; importer android.os.Bundle; importer android.net.Uri; importer android.view.MenuItem; importer android.support.design.widget.NavigationView; import android.support.annotation.NonNull; Classe publique MainActivity caps AppCompatActivity implémente NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener {@Override protected void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); } @Override public boolean onNavigationItemSelected (élément de menuItem @NonNull) {return false; } @Override public void onFragmentInteraction (Uri uri) {}}

Ajouter plus de navigation

Pour implémenter le reste de la navigation de notre application, il suffit de copier / coller le bloc onViewCreated et de faire quelques ajustements afin de référencer les bons widgets de boutons et les actions de navigation.

Ouvrez votre SecondFragment et ajoutez les éléments suivants:

@Override public void onViewCreated (@NonNull View View, @Nullable Bundle savedInstanceState) {Button button = (Button) view.findViewById (R.id.button2); button.setOnClickListener (nouvelle vue. }}); }

Ensuite, mettez à jour le bloc onViewCreated de ThirdFragment:

@Override public void onViewCreated (@NonNull View View, @Nullable Bundle savedInstanceState) {Bouton bouton = (Bouton) view.findViewById (R.id.button3); button.setOnClickListener (new View.OnClickListener () {@Override public void onClick (View v) { }}); }

Enfin, n’oubliez pas d’ajouter l’interface ThirdFragment.OnFragmentInteractionListener à votre MainActivity:

Classe publique MainActivity étend AppCompatActivity implémente NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener, ThirdFragment.OnFragmentInteractionListener {

Exécutez ce projet sur votre appareil Android ou Android Virtual Device (AVD) et testez la navigation. Vous devriez pouvoir naviguer entre les trois fragments en cliquant sur les différents boutons.

Création d'animations de transition personnalisées

À ce stade, l'utilisateur peut se déplacer dans votre application, mais la transition entre chaque fragment est assez abrupte. Dans cette dernière section, nous utiliserons le composant Navigation pour ajouter une animation différente à chaque transition, afin que tout se passe mieux.

Chaque animation que vous souhaitez utiliser doit être définie dans son propre fichier de ressources d'animation, dans un répertoire «res / anim». Si votre projet ne contient pas déjà un répertoire «res / anim», vous devrez en créer un:

• Cliquez sur le dossier «res» de votre projet en maintenant la touche Contrôle enfoncée, puis sélectionnez «Nouveau> Répertoire de ressources Android».
• Donnez à ce répertoire le nom «anim».
• Ouvrez le menu déroulant «Type de ressource» et choisissez «animer».
• Cliquez sur OK."

Commençons par définir une animation en fondu:

• Tout en maintenant la touche Contrôle enfoncée, cliquez sur le répertoire «res / anim» de votre projet.
• Sélectionnez «Nouveau> Fichier de ressources d'animation».
• Nommez ce fichier «fade_out».
• Ouvrez votre fichier “fade_out” et ajoutez ce qui suit:

Répétez les étapes ci-dessus pour créer un deuxième fichier de ressource d'animation, nommé «slide_out_left», puis ajoutez ce qui suit:

Créez un troisième fichier, nommé “slide_out_right” et ajoutez ce qui suit:

Vous pouvez maintenant affecter ces animations à vos actions via l'éditeur de navigation.Pour lire l'animation en fondu lorsque l'utilisateur passe de FirstFragment à SecondFragment:

• Ouvrez votre graphique de navigation et assurez-vous que l'onglet «Conception» est sélectionné.
• Cliquez pour sélectionner l'action qui lie FirstFragment à SecondFragment.
• Dans le panneau "Attributs", développez la section "Transitions". Par défaut, chaque menu déroulant de cette section doit être réglé sur «Aucun».
• Ouvrez le menu déroulant "Entrée", qui contrôle l'animation qui est lue chaque fois que SecondFragment passe en haut de la pile arrière. Sélectionnez l'animation “fade_out”.

Si vous passez à l'onglet "Conception", vous verrez que cette animation a été ajoutée à "action_firstFragment_to_secondFragment".

Exécutez le projet mis à jour sur votre appareil Android ou AVD. Vous devriez maintenant rencontrer un effet de fondu lorsque vous naviguez de FirstFragment à SecondFragment.

Si vous examinez à nouveau le panneau "Attributs", vous constaterez que "Entrée" n'est pas la seule partie de la transition où vous pouvez appliquer une animation. Vous pouvez également choisir parmi:

• Sortie: L'animation qui se joue lorsqu'un fragment quitte la pile
• Pop Enter: L'animation qui est lue lorsqu'un fragment remplit le haut de la pile
• Sortie Pop: L'animation qui se joue lorsqu'un fragment est en train de passer au bas de la pile

Essayez d’expérimenter en appliquant différentes animations à différentes parties de vos transitions. Vous pouvez également télécharger le projet terminé à partir de GitHub.

Emballer

Dans cet article, nous avons examiné comment utiliser le composant Architecture de navigation pour créer une application à activité unique, multi-fragments, avec des animations de transition personnalisées. Le composant Navigation vous a-t-il convaincu de migrer vos projets vers ce type de structure d'application? Faites-nous savoir dans les commentaires ci-dessous!