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: [Link]
buildscript {
repositories {
google() }}
allprojects {
repositories {
google()}}
dependencies {
def fragment_version = "1.2.5"
implementation "[Link]:fragment:$fragment_version"
}
Méthode Statique
Définir la disposition des éléments :
Fichier: [Link]
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="[Link]
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="[Link]
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<[Link]
xmlns:android="[Link]
android:id="@+id/fragment_container_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:name="[Link]" />
</LinearLayout>
Méthode Statique
Créer une classe qui correspond au fragment:
Fichier: [Link]
class ExampleFragment extends Fragment {
public ExampleFragment() {
super([Link].example_fragment);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
return [Link]([Link]. 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([Link].example_activity);
}
@Override
protected void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
if (savedInstanceState == null) {
getSupportFragmentManager().beginTransaction()
.setReorderingAllowed(true)
.add([Link].fragment_container_view, [Link], 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 : [Link] (app)
dependencies {
def nav_version = "2.3.2"
// Java language implementation
implementation "[Link]:navigation-fragment:$nav_version"
implementation "[Link]:navigation-ui:$nav_version"
// Feature module Support
implementation "[Link]:navigation-dynamic-features-fragment:$nav_version"
implementation "[Link]: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="[Link]
xmlns:app="[Link]
android:id="@+id/nav_graph">
</navigation>
13
06/02/2021
Mise en place
Etape 3 :Ajouter un NavHost à une activité
Exemple :
Fichier : activity_main
<[Link]
android:id="@+id/nav_host_fragment"
android:name="[Link]"
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="[Link]"
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="[Link].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:
[Link](Fragment)
[Link](Activity, @IdRes int viewId)
[Link](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 [Link](
[Link].navigation_home, [Link].navigation_dashboard, [Link].navigation_notifications)
.build();
NavController navController = [Link](this, [Link].nav_host_fragment);
[Link](this, navController, appBarConfiguration);
[Link](navView, navController);
invalidateOptionsMenu();
18
