06/02/2021

Introduction au fragment

ZEMALI Elamine

Comprendre le paradigme de
conception des fragments
 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.

1
 06/02/2021

Modularité
 Les fragments introduisent la modularité et la réutilisabilité.
 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
globaux autour de l'interface utilisateur de votre application,
comme barre de navigation
 Exemple: une application qui répond à différentes tailles
d'écran.

Modularité

Activity A Activity A

Activity B

2
 06/02/2021

CYCLE DE LA VIE
 Tout comme les activités, les fragments ont également un cycle de vie:
 Attachez- vous à l'activité - onAttach (Activity)
 Créer un fragment - onCreate (Bundle)
 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
 DialogFragment - Pour afficher la boîte de dialogue
flottante
 PreferenceFragment - Utile pour créer une activité
de paramètres

3
 06/02/2021

Ajouter des fragments

 Il existe deux méthodes :
 Statique : via XML
 Dynamique : via FragmentManager

Méthode Statique
 Les étapes :
 Configurez votre environnement
 Définir la disposition des éléments graphiques dans fichier XML
propre au fragment.
 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.

4
 06/02/2021

Méthode Statique
• Configurez votre environnement
 Fichier: build.gradle

buildscript {
repositories {
google() }}

allprojects {
repositories {
google()}}
dependencies {
def fragment_version = "1.2.5"
implementation "androidx.fragment:fragment:$fragment_version"
}

Méthode Statique
 Définir la disposition des éléments :
 Fichier: ExampleFragment.xml

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

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" a
ndroid:orientation="vertical"
android:background="#00ff00" >

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="fragment frist" />
</LinearLayout>

5
 06/02/2021

Méthode Statique
 Ajouter la balise FragmentContainerView dans l'activité:
 Fichier: activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<androidx.fragment.app.FragmentContainerView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/fragment_container_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:name="com.example.ExampleFragment" />

</LinearLayout>

Méthode Statique
 Créer une classe qui correspond au fragment:
 Fichier: ExampleFragment.java

class ExampleFragment extends Fragment {

public ExampleFragment() {
super(R.layout.example_fragment);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
return inflater.inflate(R.layout. example_fragment,container, false);
}
}

6
 06/02/2021

Méthode dynamique
 Tous les étapes de la méthode statique,
 Contrairement à l'approche XML, l'attribut android: name
n'est pas utilisé dans la balise FragmentContainerView.

 Etape 6 : Lier un fragment a FragmentContainerView par

programmation

Méthode dynamique
 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

7
 06/02/2021

Méthode dynamique
 Exemple :

public class ExampleActivity extends AppCompatActivity {

public ExampleActivity() {
super(R.layout.example_activity);
}
@Override
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();
}
}
}

FragmentTransaction
 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):

8
 06/02/2021

Ajouter ,supprimer et remplacer des

fragments
 Ajouter :
 La fonction add () reçoit ID de ressource fragment, ainsi que le nom de
classe du fragment.
 Le fragment ajouté passe à l'état RESUMED.
 Pour supprimer:
 appelez remove (), en transmettant une instance de fragment qui a été
récupérée du fragmentManager via findFragmentById () ou
findFragmentByTag ()
 la vue est supprimée du conteneur à ce stade. Le fragment supprimé est
déplacé vers l'état DESTROYED.
 Remplacer :
 replace () pour remplacer un fragment existant dans un conteneur par une
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
 FragmentManager est la classe chargée d'effectuer des actions
sur les fragments de votre application, telles que les ajouter,
les supprimer ou les remplacer.
 Accéder au FragmentManager :
 Dans une activité:
 getSupportFragmentManager() méthode
 Dans un fragment :
 getChildFragmentManager().
 getParentFragmentManager()

9
 06/02/2021

le composant de navigation
 Naviguer entre, entrer et sortir des différents
éléments de contenu de votre application.
 Implémenter par composant de navigation
d’android Jetpack
 Le composant Navigation garantit également
une expérience utilisateur cohérente et
prévisible en adhérant à un ensemble de
principes établis.

le composant de navigation
 Il se compose de trois éléments clés :
 Navigation graph : nouvelle ressource XML qui contient toutes les
informations relatives à la navigation dans un emplacement centralisé.
 NavHost: un conteneur vide qui affiche les destinations de votre
graphique de navigation.
 NavController: un objet qui gère la navigation d'application dans un
NavHost.
 Lorsque vous naviguez dans votre application, vous indiquez
au NavController que vous souhaitez naviguer le long d'un
chemin spécifique dans votre graphique de navigation ou
directement vers une destination spécifique.
 Le NavController affiche alors la destination appropriée dans
NavHost.

10
 06/02/2021

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
 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
 06/02/2021

Mise en place

Mise en place
 Etape 2 : Créer un graphe de navigation:

12
 06/02/2021

Mise en place
 Dans la fenêtre Projet, cliquez avec le bouton droit sur le
‘res’ répertoire et sélectionnez:
 new> Fichier de ressources Android .
 Le nouveau fichier de ressources boîte de dialogue s'affiche.

Mise en place
 Etape 2 : créer un graphe de navigation
 Vous pouvez modifier visuellement les graphiques de
navigation(Editeur de navigation) ou modifier directement le
XML sous-jacent.
 Fichier nav_graph.xml :
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/nav_graph">

</navigation>

13
 06/02/2021

Mise en place
 Etape 3 :Ajouter un NavHost à une activité
 Exemple :
 Fichier : activity_main
<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
 Etape 3 :Ajouter un NavHost à une activité:
 Attribut xml :
 L' android:name : contient le nom de classe de votre NavHost
 L' app:navGraph attribut associe le NavHostFragment à un
graphique de navigation.
 L' app:defaultNavHost="true"attribut garantit que vous
NavHostFragment intercepte le bouton Retour du système.

14
 06/02/2021

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.

Mise en place
 Etape 4 :Ajouter des destinations au graphique de navigation
 Chaque destination contient les champs suivants :
 Le champ Type indique si la destination est implémentée en tant que
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
 06/02/2021

Mise en place
 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
 Etape 5 : Connecter les destinations
 Dans l’éditeur de graphe, cliquez sur le cercle du premier
fragment et faites glisser votre curseur sur la destination.

16
 06/02/2021

Mise en place
 Etape 5 : connecter les destinations ;
 Chaque action contient les champs suivants :
 Le champ Type contient «Action».
 Le champ ID contient l'ID de l'action.
 La destination champ contient l'ID du fragment de destination.
<fragment
android:id="@+id/blankFragment"
android:name="com.example.cashdog.cashdog.BlankFragment"
android:label="fragment_blank"
tools:layout="@layout/fragment_blank" >
<action
android:id="@+id/action_blankFragment_to_blankFragment2"
app:destination="@id/blankFragment2" />
</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
 06/02/2021

Mise en place
 Etape 6 : Naviguer vers une destination
 Via BottomNavigationView
 Créer un BottomNavigationView (un menu)
 BottomNavigationView est lié au NavController par le code suivant :

AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder(

R.id.navigation_home, R.id.navigation_dashboard, R.id.navigation_notifications)
.build();
NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);
NavigationUI.setupWithNavController(navView, navController);
invalidateOptionsMenu();

18