Conception et développement d’applications mobiles

– Cours 4 –
Chapitre 2 : Vues avancées et fragments (2/2)
Utilisation des fragments

Dr. CHAOUCHE A.-C.

Faculté des nouvelles technologies
ahmed.chaouche@univ-constantine2.dz

Université Constantine 2 2019/2020. Semestre 1

 Conception et développement d’applications mobiles

– Cours 4 –
Chapitre 2 : Vues avancées et fragments (2/2)
Utilisation des fragments

Dr. CHAOUCHE A.-C.

Faculté des nouvelles technologies
ahmed.chaouche@univ-constantine2.dz

Etudiants concernés
Faculté/Institut Département Niveau Spécialité

Nouvelles technologies IFA Master 2 STIC

Université Constantine 2 2019/2020. Semestre 1

 Résumé

Prérequis
Gestion des vues et des layouts
Gestion des évènements

Objectifs du cours
Créer un Drawer et manipuler des fragments
Organiser une activité dans un TabLayout

Université Constantine 2 © Dr. Chaouche A.-C. 3

 Fragments

DrawerLayout / CoordinatorLayout SwipeRefreshLayout TabLayout /

NavigationView ViewPager

Université Constantine 2 © Dr. Chaouche A.-C. 4

 Fragments (1/2)

Un Fragment représente une portion d’interface utilisateur dans une activité

Il est ajouté dans un ViewGroup au sein de la hiérarchie d’une activité
Sert à adapter les interfaces aux différentes résolutions des appareils
Disponible depuis Android 3.0 (API 11)
grâce à l‘AppCompat générée avec un projet Android, il peut être utilisé sur des
versions plus anciennes

Plusieurs fragments peuvent être combinés dans une seule activité et un

même fragment peut être réutilisé dans plusieurs activités

Université Constantine 2 © Dr. Chaouche A.-C. 5

 Fragments (2/2)

Pour créer un fragment, il faut créer une classe qui hérite de

android.app.Fragment ou une de ses sous-classes

Sous-classes utiles héritant de Fragment :

DialogFragment (Affiche une boîte de dialogue flottante)
ListFragment (Affiche une liste d’éléments gérés par un adaptateur)
PreferenceFragment (Affiche une hiérarchie de Préférences pour créer une activité
Settings)

2 façons pour ajouter un fragment à l’activité :

Référencé de façon statique dans le layout de l’activité
Chargé dynamiquement (par programmation) dans l’activité

Université Constantine 2 © Dr. Chaouche A.-C. 6

 Fragments
Cycle de vie (1/2)

Un fragment possède son propre cycle de vie

Isoler son comportement et rendre plus
“léger” le code de l'activité

Méthodes callback :
onAttach() : (quand le fragment est associé à
une activity) pour récupérer l’activité
contenante
onCreate() : pour instancier les objets non
graphiques
onCreateView() : pour instancier les objets
graphiques
onStart() : pour lancer les traitements
onResume() : pour s'abonner aux évènements
et récupérer le contexte
…

Université Constantine 2 © Dr. Chaouche A.-C. 7

 Fragments
Cycle de vie (2/2)

Méthodes callback :
…
onPause() : pour se désabonner aux
évènements et sauvegarder le contexte
onStop() : pour arrêter les traitements
(threads, …) et désallouer les ressources
onDestroyView() : pour libérer la mémoire
des objets graphiques
onDestroy() : (les ressources restants sont
libérées automatiquement)
onDetach() : (quand la vue associée au
fragment est détachée de l’activité)

Université Constantine 2 © Dr. Chaouche A.-C. 8

 Fragments
Création d’un fragment

/res/layout/fragment_my.xml
<LinearLayout xmlns:android="..." ...>
<!-- content -->
</LinearLayout>

/java/MyFragment.java
public class MyFragment extends Fragment{
public MyFragment(...){ ... }
@Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_my, container, false);
...
return view;
}
}

Université Constantine 2 © Dr. Chaouche A.-C. 9

 Fragments
Ajout à l’activité

Méthode 1 : Référencé de façon statique dans le layout

/res/layout/activity_main.xml
...
<fragment android:name=".MyFragment" ...>

Méthode 2 : Chargé dynamiquement (par programmation)

/java/MainActivity.java
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

getFragmentManager().beginTransaction()
.replace(R.id.container, new MyFragment())
.commit();
}

Université Constantine 2 © Dr. Chaouche A.-C. 10

 Fragments (2/2)
FragmentManager et gestion des transactions

Le FragmentManager permet de :
Manipuler des fragments existants en utilisant findFragmentById(…) ou
findFragmentByTag(…)
Gérer la pile accessible via le bouton "Back" :
Dépiler un fragment de la pile de fragments, avec la méthode popBackStack()
Associer un Listener aux changement dans la pile avec la méthode
addOnBackStackChangedListener(…)

Un FragmentTransaction permet d’ajouter, de supprimer, ou de remplacer

un fragment dans une activité,
Il est possible de sauvegarder une transaction dans la pile de fragments
grâce à la métode addToBackStack(…)

Université Constantine 2 © Dr. Chaouche A.-C. 11

 TabLayout / ViewPager

Université Constantine 2 © Dr. Chaouche A.-C. 12

 TabLayout / ViewPager
Etapes de création

1. Créer un fragment pour chaque page associée à un onglet (Tab)

2. Créer un layout pour chaque fragment
3. Importer la bibliothèque Android Design Support
4. Ajouter TabLayout et ViewPager dans le layout de l’activité
android.support.design.widget.TabLayout
android.support.v4.view.ViewPager
5. Implémenter un adaptateur pour 4
l’association des pages aux onglets 5

6. Instancier les pages et les associer 6

aux onglets 1+2

Université Constantine 2 © Dr. Chaouche A.-C. 13

 TabLayout / ViewPager
1. Créer un fragment pour chaque page

/java/FirstFragment.java

public class FirstTabFragment extends Fragment{

...
public FirstTabFragment(){ ... }

@Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container,
Bundle savedInstanceState) {
View rootView=inflater.inflate(R.layout.fragment_first, container, false);
...

return rootView;
}
}

Université Constantine 2 © Dr. Chaouche A.-C. 14

 TabLayout / ViewPager
2. Créer un layout pour chaque fragment

/res/layout/fragment_first.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<!-- content -->

</LinearLayout>

Université Constantine 2 © Dr. Chaouche A.-C. 15

 TabLayout / ViewPager
3. Importer Android Design Support

Bibliothèque :
com.android.support:appcompat-v7:26.+
com.android.support:design:26.+

Méthode 1 :
Project Structure > Modules > app
> Onglet Depenendencies

Méthode 2 :
Dans
/Gradle un script Gradle
Scripts/build.gradle (Module: app)
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:26.+’
implementation 'com.android.support:design:26.+'
}

Université Constantine 2 © Dr. Chaouche A.-C. 16

 TabLayout / ViewPager
4. Ajouter TabLayout et ViewPager dans le layout

/res/layout/activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<android.support.design.widget.TabLayout
android:id="@+id/slidingTL"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed" /> // fixed or scrollable

<android.support.v4.view.ViewPager
android:id="@+id/pagesVP"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>

Université Constantine 2 © Dr. Chaouche A.-C. 17

 TabLayout / ViewPager
5. Implémenter l’adaptateur de pages

/java/MyPagerAdapter.java
public class MyPagerAdapter extends FragmentPagerAdapter {
private Context ctx;
public MyPagerAdapter(Context ctx, FragmentManager fm){super(fm); this.ctx=ctx;}
@Override
public Fragment getItem(int position) {
switch (position) {
case 0: return new FirstFragment();
case 1: ... }
}
@Override
public CharSequence getPageTitle(int position){
switch (position) {
case 0: return ctx.getString(R.string.first_title);
case 1: ... }
}
@Override
public int getCount() { return [NUMBER_OF_TAB]; }
}

Université Constantine 2 © Dr. Chaouche A.-C. 18

 TabLayout / ViewPager
6. Associer les onglets aux pages

/java/MainActivity.java
public class MainActivity extends AppCompatActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

ViewPager pagesVP = (ViewPager) findViewById(R.id.pagesVP);

TabLayout slidingTL = (TabLayout) findViewById(R.id.slidingTL);

MyPagerAdapter adapter =
new MyPagerAdapter(this, getSupportFragmentManager());
pagesVP.setAdapter(adapter);
slidingTL.setupWithViewPager(pagesVP);
}
}

Université Constantine 2 © Dr. Chaouche A.-C. 19

 DrawerLayout / NavigationView

Université Constantine 2 © Dr. Chaouche A.-C. 20

 DrawerLayout / NavigationView
Etapes de création

1. Créer un fragment pour chaque élément du menu

2. Créer un layout pour chaque fragment
Importer la bibliothèque Android Design Support (slide 48)
3. Créer un menu d’éléments pour le NavigationView
4. Créer un layout pour l’entête du NavigationView
5. Ajouter DrawerLayout dans la racine
du layout de l’activité 5
android.support.v4.widget.DrawerLayout
4
android.support.design.widget.NavigationView 6
6. Instancier le DrawerLayout et intercepter 1+2
les évènements de clic 3

Université Constantine 2 © Dr. Chaouche A.-C. 21

 DrawerLayout / NavigationView
1. Créer un fragment pour chaque page

/java/FirstFragment.java
public class FirstFragment extends Fragment{
...
public FirstFragment(){ ... }

@Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container,
Bundle savedInstanceState) {
getActivity().setTitle("First title");
View rootView=inflater.inflate(R.layout.fragment_first, container, false);
...

return rootView;
}
}

Université Constantine 2 © Dr. Chaouche A.-C. 22

 DrawerLayout / NavigationView
2. Créer un layout pour chaque fragment

/res/layout/fragment_first.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<!-- content -->

</LinearLayout>

Université Constantine 2 © Dr. Chaouche A.-C. 23

 DrawerLayout / NavigationView
3. Créer un menu d’éléments

/res/menu/nav_menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<item
android:id="@+id/nav_first"
android:icon="@drawable/ic_menu_first"
android:title="@string/first_item" />
<item
android:id="@+id/nav_second"
android:icon="@drawable/ic_menu_second"
android:title="@string/second_item" />
...
</menu>

Université Constantine 2 © Dr. Chaouche A.-C. 24

 DrawerLayout / NavigationView
4. Créer un layout pour l’entête

/res/layout/nav_header.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">

<!-- content -->

</LinearLayout>

Université Constantine 2 © Dr. Chaouche A.-C. 25

 DrawerLayout / NavigationView
5. Ajouter DrawerLayout dans la racine

/res/layout/activity_main.xml
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer" ... >
<FrameLayout
android:id="@+id/contentFL"
android:layout_width="match..."
android:layout_height="match..." />
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap..."
android:layout_height="match..."
android:layout_gravity="start"
app:headerLayout="@layout/nav_header"
app:menu="@menu/nav_menu" />
</android.support.v4.widget.DrawerLayout>

Université Constantine 2 © Dr. Chaouche A.-C. 26

 DrawerLayout / NavigationView
6. Instancier le DrawerLayout (1/2)

/java/MainActivity.java
public class MainActivity extends AppCompatActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
...
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer);
NavigationView nav = (NavigationView) findViewById(R.id.nav_view);

ActionBarDrawerToggle toggle =
new ActionBarDrawerToggle(this, drawer, "Open", "Close");
drawer.setDrawerListener(toggle); toggle.syncState();
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
...
}
@Override
public boolean onOptionsItemSelected(MenuItem item){
return toggle.onOptionsItemSelected(item);
}
}

Université Constantine 2 © Dr. Chaouche A.-C. 27

 DrawerLayout / NavigationView
6. Instancier le DrawerLayout (2/2)

/java/MainActivity.java
public class MainActivity extends AppCompatActivity implements
implements NavigationView.OnNavigationItemSelectedListener {
@Override
public void onCreate(Bundle savedInstanceState) {
...
FragmentManager fm = getSupportFragmentManager();
nav.setNavigationItemSelectedListener(this);
nav.getMenu().performIdentifierAction(R.id.nav_first, 0);
}
@Override
public boolean onNavigationItemSelected(MenuItem item){
switch (item.getItemId()) {
case R.id.nav_first:
fm.beginTransaction().replace(R.id.contentFL, new FirstFragment()).commit();
case R.id.nav_second: ...
drawer.closeDrawers();
return true;
}
}

Université Constantine 2 © Dr. Chaouche A.-C. 28

 TP2b : Création d’un drawer avec un TabLayout

Challenges
Création d’un DrawerLayout avec un
menu : Map List
Challenges (ChallengesFragment) Challenges
Création d’un TabLayout associé à un
ViewPager :
Map (MapChallengesFragment)
List (ListChallengesFragment)
…
My challenges,
My friends,
Settings,
Disconnect,
…

Université Constantine 2 © Dr. Chaouche A.-C. 29

 TP2b : Création d’un drawer avec un TabLayout
activity_main.xml

Challenges fragment_challenges.xml
(dans contentFL)
Map List
Challenges

fragment_challenges_lis fragment_challenges_map
t.xml .xml

Université Constantine 2 © Dr. Chaouche A.-C. 30

 TP2b : Création d’un drawer avec un TabLayout
Quelques exemples

Université Constantine 2 © Dr. Chaouche A.-C. 31

 Application utile
Awesome Android

Université Constantine 2 © Dr. Chaouche A.-C. 32

 Documents et Rendus

Documents sont accessibles :

Plateforme e-learning de l’université Constantine 2
Lien : http://elearning.univ-constantine2.dz/

Rendus du TP 2 :
Avant le Samedi 4 décembre à 23h59
À : ac.chaouche@misc-umc.org

Nom du fichier à rendre :

CDAM_TP2_G%_NOMBINOME1_NOMBINOME2.zip
(Ex : CDAM_TP2_G1_CHAOUCHE_BOUZENADA.zip )
Le fichier zip doit contenir seulement le dossier src

Université Constantine 2 © Dr. Chaouche A.-C. 33

Prochain chapitre

Chapitre 3 : Cartographie et géolocalisation

Objectifs :
Afficher une carte OSM et créer des marqueurs
Se géolocaliser et naviguer à travers la carte
Récupérer des routes à partir d’un serveur (mapquest, …)

Université Constantine 2 © Dr. Chaouche A.-C. 34