Side menu avec un storyboard sur IOS 7

Une fonction super à la mode sur les applications mobiles c’est le side menu, comme avec celle de Facebook (seulement sur la droite maintenant), ou Foursquare par exemple.

side_menu

Il existe plusieurs librairies pour faire ça, je ne vais pas m’amuser à recréer la roue. Mais comme j’apprends depuis très peu de temps à développer sur IOS, autant utiliser des outils simples avec lesquels j’ai appris. Et ici je parle surtout de Storyboard, qui diminue assez le temps de développement (surtout quand on apprend).

Du coup la librairie que j’utilise ici c’est ECSlidingViewController , puisqu’elle est compatible avec les storyboards.

Préparation de l’environnement

Version IOS: 7.1
Version Xcode 5.1

Je commence par créer un nouveau projet de type « Single View Application » que je nomme SideMenu.

Ensuite il faut télécharger la librairie directement sur Github et glisser le répertoire ECSlidingViewController directement dans Xcode.

Storyboard

Création de la première vue

Pour commencer nous allons changer le nom du ViewController de base en « FirstViewController » afin que les choses soient plus claires. N’oubliez de changer le nom du fichier .h, .m, les interfaces et les #import et enfin dans le storyboard (partie Identity Inspector, la custom class du ViewController).

Le FirstViewController correspondra à votre première vue comme son nom l’indique.

Afin d’avoir un meilleur environnement j’ajoute un Navigation Controller à mon ViewController. Pour faire ça dans Xcode: Editor > Embed In > Navigation Controller.

Dans l’Identity Inspector du Navigation Controller, remplissez le Storyboard ID avec « FirstViewController ».

Maintenant j’ajoute un UIbutton dans la Navigation Bar de ma FirstViewController que je nomme Menu, comme ceci:

side-menu1

Création du menu

Maintenant nous allons créer le ViewController du menu. Pour cela on ajoute directement un TableViewController (ou autre si vous préférez) dans le storyboard. On ajoute une nouvelle classe héritant de UITableViewController nommé MenuViewController. On lie cette nouvelle classe avec le TableViewController précédemment créée dans la partie Identity Inspector.

Toujours dans l’Identity Inspector remplissez le Storyboard ID avec « MenuViewController ».

A partir de ce moment là je vous laisse personnaliser votre menu (TableView). Pour garder un exemple de fonctionnement simple, j’utilise des cellules statiques que je nomme Page 1, Page 2.

Ajout de la Sliding View

La sliding view c’est la vue qui va créer l’effet de menu glissant contrôlé par la librairie ECSlidingViewController. Visuellement elle n’a rien de particulier.

Pour cela on va ajouter un ViewController dans le storyboard et ajouter les informations importantes dans l’Identity Inspector:

Custom Class: ECSlidingViewController

Et on ajoute des clés/valeurs dans User Defined Runtime Attributes:

underLeftViewControllerStoryboardId    String    MenuViewController
topViewControllerStoryboardId    String     FirstViewController

La librairie utilise une appellation pour définir le menu de gauche (underLeftView) et la vue en cours (topView).

Faites maintenant glisser la flèche correspondant au point d’entrée de votre application vers la SlidingView. C’est elle qui est chargée en première afin de pouvoir contrôler le menu avec le reste des vues.

A ce point nous avons presque fini de mettre en place le menu et toujours pas une ligne de code ;).

Lier le bouton menu au menu

Maintenant pour rendre le bouton menu de notre FirstViewController actif, nous allons utiliser la partie Exit du MenuViewController avec un unwing segue.

Pour cela il est nécessaire de préparer le menu à recevoir un unwing segue. Le début du code, mais ne vous inquiétez pas il n’y a pas grand chose 🙂

Dans l’interface de MenuViewController.h ajoutez:

Et dans MenuViewController.m ajoutez:

Maintenant nous pouvons ajouter la unwind segue dans le storyboard (Ctrl + click sur le bouton menu, glissé vers le exit de MenuViewController).

Votre storyboard devrait maintenant ressembler à ça:

side-menu2

A partir de maintenant vous pouvez déjà tester en compilant votre application. La seule possibilité pour le moment c’est d’ouvrir le menu.

Plus loin avec le menu

Fermer le menu

Maintenant nous allons rajouter une ligne de code pour fermer le menu lorsque l’on tape sur la top view, ou que l’on fait glisser le menu.

Dans un premier temps il nécessaire d’importer la classe UIViewController+ECSlidingViewController.h

Dans le fichier MenuViewController.m ajoutez:

Puis

Voila c’est tout. Le menu se ferme et s’ouvre à volonté.

Lier les cellules du menu

Maintenant il est nécessaire de lier les cellules du menu avec leur NavigationController. Pour cela nous allons retourner sur le storyboard, et créer une transition classique (segue) entre la cellule et le NavigationController correspondant. La segue doit être de type custom.

Dans la partie Attributes Inspector de la segue, ajoutez la segue class ECSlidingSegue. Et voila, rien de bien compliqué.

Vous pouvez maintenant ajouter d’autres vues comme expliqué en première partie, et les linker avec le menu.

Vous pouvez retrouver tout le code sur Github

 

C’est mon premier article sur IOS et ce n’est pas facile d’expliquer les choses avec le Storyboard (cliquer la, remplir ça, glisser ça). J’espère que le tutoriel est suffisamment clair. N’hésitez à faire des commentaires, à expliquer votre façon de faire si vous faîtes différemment.