Dans le cadre de mon dernier projet, comprenant beaucoup de vues différentes, je me suis mis à la recherche d’une manière à la fois esthétique et efficace de présenter mes vues.

Ni le système basé sur les Tab Bars Controllers, ni celui basé sur les Split View Controlers ne répondaient à mes attentes.

Puis je suis tombé sur la génialissime librairie de John Lluch : SWRevealViewController

Celle-ci permet d’avoir de manière très simple un menu « Hamburger« , vous savez, les 3 trait horizontaux qui développent un menu, que l’on retrouve de plus en plus souvent sur les sites web « mobiles » ou sur les applis modernes ?

Voici donc comment l’utiliser dans le cadre du développement d’une appli Swift 3.

Pour la démo, j’ai créé une petite appli toute simple, avec 1 menu et 3 webview’s, chacune pointant sur un moteur de recherche bien connu. Je ne vais pas m’attarder ici sur la gestion des webviews, cela fera l’objet d’un autre billet.

Vous pouvez télécharger le code final ici.

N’hésitez pas à le télécharger et l’ouvrir, cela rendra les explications suivantes plus claires…

En premier, nous allons dans XCode créer un nouveau projet, basé sur une Single View Application.

Fermez ensuite XCode, et importer les librairies SXRevealViewController.

Perso, j’aime bien Cocoa Pods, c’est donc ce système que j’utiliserai. Pour ceux qui auraient besoin de plus de détails, vous avez un billet sur le présent blog.

Pour les autres, voici le fichier pod :

————————————— Code  —————————————

# Uncomment the next line to define a global platform for your project
# platform :ios, ‘9.0’

target ‘SWReveal-SideBarMenu-Demo’ do
# Comment the next line if you’re not using Swift and don’t want to use dynamic frameworks
use_frameworks!

# Pods for SWReveal-SideBarMenu-Demo
pod ‘SWRevealViewController’, ‘~> 2.3’

# Update to Swift 3

post_install do |installer|
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
config.build_settings[‘SWIFT_VERSION’] = ‘3.0’
end
end
end
end

————————————— / Code  ————————————–

Puis ouvrir le fichier « .xcworkspace » avec XCode, refaire un « Clean » suivi d’un « build », et votre librairie devrait être ok.

Dans le Storyboard, placez quelques ViewControllers et leur NavigationController comme ici :

Pour la démo, j’ai créé une tableView « statique » contenant mes liens de menu, et mis de « simples » webviews dans les fenêtres « secondaires ». Ne pas oublier de mettre un bouton « menu » avec l’image « hamburger » dans chaque vue « secondaire ». Perso, je l’ai mis dans la barre de menu, mais cela n’est pas obligatoire.

Il faut ensuite associer tout cela avec des liens de Segue.

Donc, déjà, associer le premier View Controller (celui qui est vide, que j’ai nommé « Container View Controller » à la classe « SWRevealViewController ».

Ensuite, créer un lien de segue (ctrl + drag) allant du « Container View Controller » au « Menu View Controller », et lui donner le type « reveal view controller set controller ». Nommer ce segue « sw_rear »

Idem pour les liens entre le « Container View Controller » et les « Navigation Controller ». Cela sera également des liens de type « reveal view controller set controller ». Nommer ces segue « sw_front ».

Enfin, pour chaque item de menu, créer un lien de segue allant du lien de menu a chaque navigation controller, et leur donner le type « reveal view controller push controller ».

Voilà, nous avons terminé avec la partie Storyboard.

Le code est ensuite très simple, dans chaque vue « secondaire », il suffit d’insérer les lignes suivantes :

————————————— Code  —————————————

// For the menu (SWRevealVC)
if self.revealViewController() != nil {
menuButton.target = self.revealViewController()
menuButton.action = « revealToggle: »
self.view.addGestureRecognizer(self.revealViewController().panGestureRecognizer())
}

————————————— / Code  ————————————–

Sans oublier de créer l’outlet entre le bouton de menu et le code, et d’importer la librairie avec « import SWRevealViewController » !

Et vous avez un joli menu !

Comme d’habitude, si vous avez des questions / suggestions, n’hésitez pas !