Abordons maintenant un second système de navigation très populaire sur Android : le Navigation Drawer.
Pour cela, nous partirons d'une nouvelle mini-application (MyNavDrawer), afin de voir ensemble et pas à pas le fonctionnement de ce pattern.
Vous trouverez l'application vierge de départ à ce lien.
Introduction
Très récent puisque créé à partir de l'année 2013, le Navigation Drawer combine à lui seul plusieurs patterns que nous avons précédemment étudié. Ce menu de navigation est principalement composé :
D'un DrawerLayout, utilisé comme layout racine principal
D'une Toolbar, utilisée notamment pour afficher le bouton de navigation "Hamburger"
D'une NavigationView, représentant visuellement le menu du Navigation Drawer
D'un FrameLayout, contenant les fragments (pages) du Navigation Drawer
Oh la la ! Il y a beaucoup de classes différentes et entremêlées là non ?
Je dirais plutôt que les choses sont bien découpées... Ne vous inquiétez pas, l'implémentation du Navigation Drawer n'est pas si compliquée, comme nous allons le voir tout de suite !
Implémentation
Reprenons maintenant notre mini-application, MyNavDrawer. Comme vous vous en doutez, nous allons lui créer un Navigation Drawer !
Avant toute chose, nous allons vérifier que la librairie Design Support est bien installée et gérée par notre gestionnaire de dépendance Gradle. En effet, la vue NavigationView se trouve à l'intérieur :
dependencies {
...
compile 'com.android.support:design:26.1.0'
}
Puis, nous allons modifier le layout de notre activité principale MainActivity afin d'y ajouter les premiers composants graphiques du NavigationDrawer.
Fichier activity_main.xml :
<?xml version="1.0" encoding="utf-8"?>
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start"
tools:context="com.openclassrooms.mynavdrawer.MainActivity"
<!-- 1 | MainActivity RootView -->
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
<!-- Toolbar -->
android:id="@+id/activity_main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="@style/ToolBarStyle"
<!-- FrameLayout for our fragments -->
android:id="@+id/activity_main_frame_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
<!-- 2 | NavigationView -->
android:id="@+id/activity_main_nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/activity_main_nav_header"
app:menu="@menu/activity_main_menu_drawer"
Explications : Dans ce layout, nous avons implémenté toutes les vues nécessaires à la création de notre NavigationDrawer :
DrawerLayout : Il représente la vue racine principale de notre NavigationDrawer puisqu'il contiendra toutes les sous-vues nécessaires au fonctionnement de ce dernier, comme la Toolbar, le FrameLayout ainsi que le NavigationView.
Toolbar : Son intégration au sein du DrawerLayout permettra entre autres, l'affichage et la gestion du bouton de navigation appelé "Hamburger" (les 3 barres horizontales).
FrameLayout : Notre conteneur habituel qui contiendra l'ensemble de nos fragments
NavigationView : Cette vue représente le menu en lui-même, qui s'affichera ou se cachera lorsqu'on appuiera sur le bouton Hamburger de la Toolbar, et qui contiendra la liste de l'ensemble des pages (fragments) accessibles sur notre application.
Intéressons-nous de plus près à la NavigationView. Cette dernière dispose de deux attributs qui permettront de la configurer assez simplement :
app:headerLayout
permet de définir, via un layout XML, un header (en-tête) à notre NavigationViewapp:menu
permet de définir, via un layout XML, un menu qui affichera la liste de nos différents écrans sur la NavigationView
Ces deux attributs pointant sur deux fichiers layouts différents, il faut maintenant penser à les créer...
Fichier /res/layout/activity_main_nav_header.xml :
<?xml version="1.0" encoding="utf-8"?>
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="@dimen/nav_header_height"
android:background="#B2B9E1"
android:gravity="center"
android:orientation="vertical"
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/ic_openclassrooms"
Explications : Rien de compliqué ici, nous créons juste un layout pour le header de notre NavigationView. Nous lui ajoutons une image (que vous pouvez retrouver ici), ainsi qu'une dimension de 176 dip (créée dans le fichier dimens.xml).
Fichier /res/menu/activity_main_menu_drawer.xml :
<?xml version="1.0" encoding="utf-8"?>
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:showIn="navigation_view"
android:checkableBehavior="single"
android:id="@+id/activity_main_drawer_news"
android:icon="@drawable/ic_dashboard_white_24dp"
android:title="Fil d'actualité"
android:title="Configuration"
android:checkableBehavior="single"
android:id="@+id/activity_main_drawer_profile"
android:icon="@drawable/ic_account_box_white_24dp"
android:title="Profil"
android:id="@+id/activity_main_drawer_settings"
android:icon="@drawable/ic_settings_applications_white_24dp"
android:title="Paramètres"
Explications : Nous définissons ici le menu de notre NavigationView en XML, qui va contenir l'ensemble des pages que l'on souhaite gérer dans notre Navigation Drawer. Chaque item représente une ligne, contenant un titre et une image. Vous pouvez retrouver l'ensemble des icônes utilisées à ce lien.
Pour finir, nous allons modifier quelques fichiers de ressources, afin notamment d'y ajouter la hauteur de l'en-tête de notre NavigationView, et personnaliser notre Toolbar (comme nous avons pu le faire dans les précédents chapitres).
Fichier dimens.xml :
<!-- Default NavigationView Header height -->
name="nav_header_height"176dp
Explications : Cette dimension est utilisée dans le fichier activity_main_nav_header.xml créé précédemment, afin de définir la hauteur de l'en-tête (header) de la NavigationView. C'est la valeur par défaut proposée par Android. Libre à vous ensuite de l'adapter en fonction de vos besoins et vos envies.
Fichier styles.xml :
<!-- Base application theme. -->
name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"
<!-- Customize your theme here. -->
name="colorPrimary"@color/colorPrimary
name="colorPrimaryDark"@color/colorPrimaryDark
name="colorAccent"@color/colorAccent
<!-- Toolbar theme. -->
name="ToolBarStyle" parent="AppTheme"
name="android:textColorPrimary"@android:color/white
name="colorControlNormal"@android:color/white
Explications : Vous vous souvenez sûrement de ces lignes... et c'est normal ! Elles nous servent ici à modifier l'apparence de notre Toolbar, utilisée dans le NavigationDrawer à travers le layout activity_main.xml. N'oubliez également pas de faire hériter votre thème principal de NoActionBar, afin de masquer la Toolbar par défaut.
Extrait du fichier strings.xml :
...
<!-- Used in NavigationDrawer -->
name="navigation_drawer_open"Open navigation drawer
name="navigation_drawer_close"Close navigation drawer
Explications : Ce fichier contient l'ensemble des textes de notre application. Ces deux lignes nous serviront à la création d'un objet utilisé par le NavigationDrawer. Ne vous inquiétez pas si vous ne le comprenez pas tout de suite, nous y reviendrons en détail dans un autre cours.
Il ne nous manquerait pas quelque chose là ?
Tout à fait ! Car comme d'habitude, qui va faire le lien entre tous ces éléments ? Et bien c'est notre activité MainActivity, bien sûr...
Fichier MainActivity.java :
public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {
//FOR DESIGN
private Toolbar toolbar;
private DrawerLayout drawerLayout;
private NavigationView navigationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 6 - Configure all views
this.configureToolBar();
this.configureDrawerLayout();
this.configureNavigationView();
}
@Override
public void onBackPressed() {
// 5 - Handle back click to close menu
if (this.drawerLayout.isDrawerOpen(GravityCompat.START)) {
this.drawerLayout.closeDrawer(GravityCompat.START);
} else {
super.onBackPressed();
}
}
@Override
public boolean onNavigationItemSelected(MenuItem item) {
// 4 - Handle Navigation Item Click
int id = item.getItemId();
switch (id){
case R.id.activity_main_drawer_news :
break;
case R.id.activity_main_drawer_profile:
break;
case R.id.activity_main_drawer_settings:
break;
default:
break;
}
this.drawerLayout.closeDrawer(GravityCompat.START);
return true;
}
// ---------------------
// CONFIGURATION
// ---------------------
// 1 - Configure Toolbar
private void configureToolBar(){
this.toolbar = (Toolbar) findViewById(R.id.activity_main_toolbar);
setSupportActionBar(toolbar);
}
// 2 - Configure Drawer Layout
private void configureDrawerLayout(){
this.drawerLayout = (DrawerLayout) findViewById(R.id.activity_main_drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawerLayout.addDrawerListener(toggle);
toggle.syncState();
}
// 3 - Configure NavigationView
private void configureNavigationView(){
this.navigationView = (NavigationView) findViewById(R.id.activity_main_nav_view);
navigationView.setNavigationItemSelectedListener(this);
}
}
Explications : Notre activité jouant le rôle de contrôleur, celle-ci va récupérer toutes les vues de son layout afin de les configurer et les faire fonctionner harmonieusement ensemble :
Ligne 1 : Nous récupérons et configurons la Toolbar.
Ligne 2 : Nous récupérons le DrawerLayout, et créons à partir de lui et de la toolbar, le fameux bouton "Hamburger".
Ligne 3 : Nous récupérons la NavigationView afin qu'elle puisse s'enregistrer au listener de l'activité (via l'interface
NavigationView.OnNavigationItemSelectedListener
), nous permettant ainsi de récupérer les clics du menu.Ligne 4 : Comme nous avons implémenté l'interface
NavigationView.OnNavigationItemSelectedListener
, nous devons déclarer la méthode chargée de récupérer les clics sur le menu, à savoironNavigationItemSelected
. Celle-ci nous permettra, en fonction de l'identifiant d'un item (déclaré dans le fichier activity_main_menu_drawer.xml) du menu, d'effectuer une action spécifique, comme l'affichage d'une page par exemple.Ligne 5 : Nous redéfinissons ici la méthode
onBackPressed()
afin de faire en sorte de fermer (s'il est ouvert) le NavigationDrawer, dès lors que l'utilisateur appuie sur la touche retour de son téléphone.Ligne 6 : Enfin, on appelle toutes nos méthodes de configuration depuis la méthode
onCreate()
de notre activité.
Lancez maintenant votre application. Félicitations ! Vous avez un Navigation Drawer parfaitement fonctionnel .
N'hésitez pas à parcourir un à un l'ensemble des fichiers que nous avons créé, afin de vous familiariser avec la logique du NavigationDrawer. Cette approche et ce fonctionnement sont valables sur énormément de Pattern Android différents.
Conclusion
Notre navigation Drawer s'affiche correctement et fonctionne plutôt bien, super ! Cependant, lorsque l'on clique sur un élément du menu, rien ne se passe...
Et c'est normal ! Dans le prochain chapitre, nous étudierons ensemble la manière de gérer l'affichage de différentes pages à partir du NavigationDrawer.
Vous pouvez retrouver le code source terminé de MyNavDrawer abordé dans ce chapitre en suivant ce lien.