06/02/2021 06/02/2021

Modularité
 Les fragments introduisent la modularité et la réutilisabilité.

Introduction au fragment  les fragments sont mieux adaptés pour définir et gérer
l'interface utilisateur d'un seul écran ou d'une partie d'écran.
 Les activités sont un endroit idéal pour placer des éléments
ZEMALI Elamine globaux autour de l'interface utilisateur de votre application,
comme barre de navigation
 Exemple: une application qui répond à différentes tailles
d'écran.

Comprendre le paradigme de
conception des fragments Modularité
 Qu'est ce qu'un fragment ?
 Une partie de l’interface utilisateur modulaire et flexible.
 Introduits en premier dans l'API Android 3.0 (Honeycomb).
 Les fragments sont gérés par une activité.
 Il peut y avoir plus d'un fragment dans une activité.
 le fragment définit sa propre disposition de vue.
Activity A Activity A

Activity B

1 2
 06/02/2021 06/02/2021

CYCLE DE LA VIE Ajouter des fragments

 Tout comme les activités, les fragments ont également un cycle de vie:  Il existe deux méthodes :
 Attachez- vous à l'activité - onAttach (Activity)  Statique : via XML
 Créer un fragment - onCreate (Bundle)  Dynamique : via FragmentManager
 Créer une vue - onCreateView (LayoutInflater,ViewGroup, Bundle)
 Création d'activité - onActivityCreated (Bundle)
 Etat de la vue restauré - onViewStateRestored (Bundle)
 Rendre visible à l'utilisateur - onStart ()
 début de l'interaction utilisateur - onResume ()
 pause de l'interaction de l'utilisateur - onPause ()
 Rendu invisible à l'utilisateur - onStop ()
 Destruction de vue - onDestroyView ()
 Détruire le fragment - onDestroy ()
 Se détacher d'une activité - onDetach ()

Sous-classes de fragment Méthode Statique

 DialogFragment - Pour afficher la boîte de dialogue  Les étapes :
flottante  Configurez votre environnement

 PreferenceFragment - Utile pour créer une activité  Définir la disposition des éléments graphiques dans fichier XML
propre au fragment.
de paramètres
 Ajouter la balise fragment dans l'activité pour réserver sa place
dans l’affichage.
 Créer une classe qui correspond au fragment, la classe herite de
la classe fragment.
 Surchargé la méthode onCreateView. Pour faire la liaison avec le
fichier XML.

3 4
 06/02/2021 06/02/2021

Méthode Statique Méthode Statique

• Configurez votre environnement  Ajouter la balise FragmentContainerView dans l'activité:
 Fichier: build.gradle  Fichier: activity_main.xml

buildscript {
repositories { <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
google() }} android:layout_width="fill_parent"
android:layout_height="fill_parent" >
allprojects {
repositories { <androidx.fragment.app.FragmentContainerView
google()}} xmlns:android="http://schemas.android.com/apk/res/android"
dependencies { android:id="@+id/fragment_container_view"
def fragment_version = "1.2.5" android:layout_width="match_parent"
implementation "androidx.fragment:fragment:$fragment_version" android:layout_height="match_parent"
} android:name="com.example.ExampleFragment" />

</LinearLayout>

Méthode Statique Méthode Statique

 Définir la disposition des éléments :  Créer une classe qui correspond au fragment:
 Fichier: ExampleFragment.xml  Fichier: ExampleFragment.java

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android" class ExampleFragment extends Fragment {
android:layout_width="match_parent" public ExampleFragment() {
android:layout_height="match_parent" a super(R.layout.example_fragment);
ndroid:orientation="vertical" }
android:background="#00ff00" >
@Override
<TextView public View onCreateView(LayoutInflater inflater, ViewGroup container,
android:id="@+id/textView1" Bundle savedInstanceState) {
android:layout_width="wrap_content" // TODO Auto-generated method stub
android:layout_height="wrap_content" return inflater.inflate(R.layout. example_fragment,container, false);
android:text="fragment frist" /> }
</LinearLayout> }

5 6
 06/02/2021 06/02/2021

Méthode dynamique Méthode dynamique

 Tous les étapes de la méthode statique,  Exemple :
 Contrairement à l'approche XML, l'attribut android: name
n'est pas utilisé dans la balise FragmentContainerView. public class ExampleActivity extends AppCompatActivity {
public ExampleActivity() {
super(R.layout.example_activity);
}
 Etape 6 : Lier un fragment a FragmentContainerView par @Override
programmation protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (savedInstanceState == null) {
getSupportFragmentManager().beginTransaction()
.setReorderingAllowed(true)
.add(R.id.fragment_container_view, ExampleFragment.class, null)
.commit();
}
}
}

Méthode dynamique FragmentTransaction

 Etape 6 : Lier le fragment dans l’activity qui affiche fragment
 Vérifier si le fragment n’est pas encore ajouté
 Obtenir une instance de FragmentManager
 Utiliser FragmentManager pour créer un FragmentTransaction
afin ajouter/supprimer/remplacer un fragment
 un FragmentManager peut ajouter, supprimer, remplacer et
effectuer d'autres actions avec des fragments en réponse à
l'interaction de l'utilisateur.
 Vous pouvez regrouper plusieurs actions en une seule
transaction
 Chaque FragmentTransaction doit utiliser
setReorderingAllowed (true):

7 8
 06/02/2021 06/02/2021

Ajouter ,supprimer et remplacer des

fragments le composant de navigation
 Ajouter :
 La fonction add () reçoit ID de ressource fragment, ainsi que le nom de  Naviguer entre, entrer et sortir des différents
classe du fragment. éléments de contenu de votre application.
 Le fragment ajouté passe à l'état RESUMED.
 Pour supprimer:  Implémenter par composant de navigation
 appelez remove (), en transmettant une instance de fragment qui a été d’android Jetpack
récupérée du fragmentManager via findFragmentById () ou
findFragmentByTag ()  Le composant Navigation garantit également
 la vue est supprimée du conteneur à ce stade. Le fragment supprimé est
déplacé vers l'état DESTROYED. une expérience utilisateur cohérente et
 Remplacer : prévisible en adhérant à un ensemble de
 replace () pour remplacer un fragment existant dans un conteneur par une principes établis.
instance d'une nouvelle classe de fragment que vous fournissez.
 Appeler replace () équivaut à appeler remove () avec un fragment dans un
conteneur et à ajouter un nouveau fragment à ce même conteneur.

FragmentManager le composant de navigation

 FragmentManager est la classe chargée d'effectuer des actions  Il se compose de trois éléments clés :
 Navigation graph : nouvelle ressource XML qui contient toutes les
sur les fragments de votre application, telles que les ajouter, informations relatives à la navigation dans un emplacement centralisé.
les supprimer ou les remplacer.  NavHost: un conteneur vide qui affiche les destinations de votre
 Accéder au FragmentManager : graphique de navigation.
 NavController: un objet qui gère la navigation d'application dans un
 Dans une activité: NavHost.
 getSupportFragmentManager() méthode  Lorsque vous naviguez dans votre application, vous indiquez
 Dans un fragment : au NavController que vous souhaitez naviguer le long d'un
 getChildFragmentManager(). chemin spécifique dans votre graphique de navigation ou
 getParentFragmentManager()
directement vers une destination spécifique.
 Le NavController affiche alors la destination appropriée dans
NavHost.

9 10
 06/02/2021 06/02/2021

Mise en place Mise en place

 Etape 1 : Configurez votre environnement
 Fichier : build.gradle (app)
dependencies {
def nav_version = "2.3.2"

// Java language implementation

implementation "androidx.navigation:navigation-fragment:$nav_version"
implementation "androidx.navigation:navigation-ui:$nav_version"

// Feature module Support

implementation "androidx.navigation:navigation-dynamic-features-fragment:$nav_version"

implementation "androidx.navigation:navigation-compose:1.0.0-alpha05"
}

Mise en place Mise en place

 Etape 2 : Créer un graphe de navigation:  Etape 2 : Créer un graphe de navigation:
 La navigation s'effectue entre les destinations de votre
application, c'est-à-dire à tout endroit de votre
application vers lequel les utilisateurs peuvent naviguer.
 Ces destinations sont connectées via des actions .
 Exemple :

11 12
 06/02/2021 06/02/2021

Mise en place Mise en place

 Dans la fenêtre Projet, cliquez avec le bouton droit sur le  Etape 3 :Ajouter un NavHost à une activité
‘res’ répertoire et sélectionnez:  Exemple :
 new> Fichier de ressources Android .
 Fichier : activity_main
 Le nouveau fichier de ressources boîte de dialogue s'affiche.
<androidx.fragment.app.FragmentContainerView
android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent
app:defaultNavHost="true"
app:navGraph="@navigation/nav_graph" />

Mise en place Mise en place

 Etape 2 : créer un graphe de navigation  Etape 3 :Ajouter un NavHost à une activité:
 Vous pouvez modifier visuellement les graphiques de  Attribut xml :
navigation(Editeur de navigation) ou modifier directement le  L' android:name : contient le nom de classe de votre NavHost
XML sous-jacent.  L' app:navGraph attribut associe le NavHostFragment à un
 Fichier nav_graph.xml : graphique de navigation.
<?xml version="1.0" encoding="utf-8"?>  L' app:defaultNavHost="true"attribut garantit que vous
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
NavHostFragment intercepte le bouton Retour du système.
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/nav_graph">

</navigation>

13 14
 06/02/2021 06/02/2021

Mise en place Mise en place

 Etape 4 :Ajouter des destinations au graphique de navigation
 Créer une destination à partir d'un fragment ou d'une activité
existante.
 Etape 5 : Connecter les destinations
 Une action est une connexion logique entre des destinations.
 Les actions sont représentées dans le graphique de navigation
sous forme de flèches.
 Les actions connectent généralement une destination à une
autre,
 On peut créer des actions globales qui vous mènent vers une
destination spécifique à partir de n'importe où dans votre
application.

Mise en place Mise en place

 Etape 4 :Ajouter des destinations au graphique de navigation  Etape 5 : Connecter les destinations
 Chaque destination contient les champs suivants :  Dans l’éditeur de graphe, cliquez sur le cercle du premier
 Le champ Type indique si la destination est implémentée en tant que fragment et faites glisser votre curseur sur la destination.
fragment, activité ou autre classe personnalisée dans votre code source.
 Le champ Label contient le nom du fichier de mise en page XML de la
destination.
 Le champ ID contient l'ID de la destination qui est utilisé pour faire
référence à la destination dans le code.
 La liste déroulante Classe affiche le nom de la classe associée à la
destination.

15 16
 06/02/2021 06/02/2021

Mise en place Mise en place

 Etape 5 : connecter les destinations ;  Etape 6 : Naviguer vers une destination
 Chaque action contient les champs suivants :  Via BottomNavigationView
 Le champ Type contient «Action».  Créer un BottomNavigationView (un menu)
 Le champ ID contient l'ID de l'action.  BottomNavigationView est lié au NavController par le code suivant :
 La destination champ contient l'ID du fragment de destination.
<fragment
android:id="@+id/blankFragment" AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder(
android:name="com.example.cashdog.cashdog.BlankFragment" R.id.navigation_home, R.id.navigation_dashboard, R.id.navigation_notifications)
android:label="fragment_blank" .build();
tools:layout="@layout/fragment_blank" > NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
<action NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);
android:id="@+id/action_blankFragment_to_blankFragment2" NavigationUI.setupWithNavController(navView, navController);
app:destination="@id/blankFragment2" />
invalidateOptionsMenu();
</fragment>
<fragment
android:id="@+id/blankFragment2"
android:name="com.example.cashdog.cashdog.BlankFragment2"
android:label="fragment_blank_fragment2"
tools:layout="@layout/fragment_blank_fragment2" />

Mise en place
 Etape 6 : Naviguer vers une destination
 La navigation vers une destination se fait à l'aide d'un
NavController.
 Chaque NavHost a son propre NavController correspondant.
 Vous pouvez récupérer un NavController à l'aide de l'une des
méthodes suivantes:
 NavHostFragment.findNavController(Fragment)
 Navigation.findNavController(Activity, @IdRes int viewId)
 Navigation.findNavController(View)

17 18