Sviluppo iOS: come aggiungere una barra laterale scorrevole di menu Slide-out Sidebar PARTE#1

Possiamo creare un menu laterale scorrevole (slide-out sidebar menu) simile a quella che si trova nell’app Facebook per iPhone.
La navigazione con un menu laterale scorrevole (slide-out sidebar) è costituita da un pannello che “fuoriesce” da sinistra o destra all’interno della pagina dove è presente contenuto principale, rivelando una vista scorrimento verticale indipendente che viene utilizzata come menu di navigazione per l’applicazione.

Dal quando Facebook ed ebay hanno introdotto nella sua app iOS questa sidebar slide-out, molti sviluppatori hanno implementato questo tipo menu di navigazione facendolo di fatto diventare un nuovo standard. Si può facilmente trovare questo modello di progettazione nella maggior parte delle applicazioni più popolari.

Ken Yarmost, nel suo blog la definbisce : ” Slide-out navigation consists of a panel that “slides out” from underneath the left or the right of the main content area, revealing a vertically independent scroll view that serves as the primary navigation for the application.”

Gmail for iOS

Gmail for iOS

Il metodo di design slide-out consente di creare un menu di navigazione senza sprecare spazio dello schermo. Normalmente, il menu di navigazione è nascosto dietro la front-view. Il menu può essere attivato premendo il pulsante elenco nella barra di navigazione. Una volta che il menu si espande e diventa visibile, gli utenti potranno chiuderlo utilizzando il pulsante elenco o semplicemente trascinando (swiping) a sinistra il contenuto.

Abbiamo trovato diversi codici in rete, e visto che non abbiamo intenzione di creare questo il menu di navigazione slide-out da zero, faremo uso di una libreria chiamata SWRevealViewController sviluppata da John Lluch. Questa eccellente libreria (framework) fornisce un modo semplice e veloce per mettere in piedi un menu di navigazione slide-out.

Un esempio di App

Vediamo un’applicazione demo che possa mostrare come applicare il framework SWRevealViewController.
L’applicazione sarà molto semplice, ma non completamente funzionale. Lo scopo principale di questo esempio è la realizzazione di un menu di navigazione scorrevole denominato “slide-out sidebar”.

Il menu di navigazione funziona nel modo seguente:

  •      L’utente attiva il menu premendo il pulsante elenco/lista in alto a sinistra della barra di navigazione.
  •      L’utente può anche richiamare il menu scorrendo proprio sulla view principale di contenuto.
  •      Una volta visualizzato il menu, l’utente può chiudere toccando nuovamente il pulsante elenco.
  •      L’utente può anche chiudere il menu trascinando a sinistra sul contenuto.

IOS-Slide-out _sidebar_navigation_menu

Il  progetto Xcode

Per iniziare è possibile scaricare il modello di progetto Xcode offerto dal sito appcoda.com qui (download the Xcode project template).

Il progetto ha già :

  •      Uno storyboard pre-costruito con tutti i controller di visualizzazione necessari
  •      Delle classi view controller  pre-costituite tra cui MapViewController e PhotoViewController
  •      Tutte le icone e le immagini necessarie per l’applicazione (fonte immagini:  free icon from Pixeden)

 

Importazione della libreria SWRevealViewController

Come abbian detto useremo la libreria SWRevealViewController per implementare il menu slide-out. Quindi, è necessario prima scaricare la libreria da GitHub ed estrarre il file zippato.

Dopo aver estratto il file, troverete “SWRevealViewController.h” e “SWRevealViewController.m”. Importate entrambi i file nel progetto Xcode e metteteli sotto “Library”.

Importazione della libreria SWRevealViewController

Importazione della libreria SWRevealViewController

Associare la Front view e Rear View Controller

Una delle bellezze della libreria SWRevealViewController è che fornisce il supporto built-in della Storyboard. Naturalmente, se si preferisce, è possibile anche utilizzare Interface Builder per creare il menu laterale. Ma da quello che sappiamo, la maggior parte degli sviluppatori optano per Storyboard per progettare l’interfaccia utente.

Quando si implementa menu laterale utilizzando SWRevealViewController, gli sviluppatori devono associare il SWRevealViewController con un ftont e un controller di view rear (posteriore) usando segues. Il front view controller  è il controller principale per la visualizzazione di contenuti. Nel nostro storyboard, è il controller di navigazione che associa con un altro controller della view per mostrare contenuti delle notizie. A quanto pare, il view controller posteriore è il controller per mostrare il menu di navigazione. Solitamente il menu viene implementato tramite UITableViewController.

Se si sta usando il template Xcode di appcoda.com, avremo pre-costruito il controller della front e rear view (vista anteriore e posteriore) . Quello che dobbiamo fare è definire segues tra la SWRevealViewController della vista posteriore e anteriore .

Innanzitutto, selezioniamo il UIViewController vuota e cambiamo la sua classe per ” SWRevealViewController ” .

SWRevealViewController in Storyboard

SWRevealViewController in Storyboard

Quindi, premere e tenere premuto il tasto di controllo . Clicca sul SWRevealViewController e trascinarlo al controller della Sidebar view. Dopo aver rilasciato il pulsante , verrà visualizzato un menu di scelta rapida per la selezione Segue . In questo caso, selezionare “rivelano controller della vista ” . Questo definisce una Segue personalizzato utilizzando ” SWRevealViewControllerSegue “.

Ripetere la stessa procedura per collegare SWRevealViewController con il controller di navigazione .

xcode-SWRevealViewController-Connects-Front-Rear-View

Definizione Segues per SWRevealViewController

Selezionare il Segue tra SWRevealViewController e il controller di navigazione . Nella finestra di ispezione attributi , impostare l’identificatore Segue a ” sw_front ” . Questo è l’identificatore predefinito per indicare una transizione di controllore vista frontale.

Per il Segue tra SWRevealViewController e il controller della vista laterale , impostare l’identificatore Segue a ” sw_rear ” . Questo identificatore dice SWRevealViewController che il controller rappresenta la vista posteriore ( cioè il menu laterale ) .

Storyboard Segue sw_rear

Storyboard Segue sw_rear

Impostazione identificativo Segue per i controller anteriore e posteriore

Se si compila e si esegue l’applicazione , vedrete un app che mostrano le “News Frontpage” . Ma questo è tutto . Non vedrete il menu laterale quando si tocca il tasto lista . Non abbiamo ancora implementato il metodo di azione .

Apri ” MainViewController.m “, che è la classe controller di “News Frontpage” . Aggiungere la seguente istruzione import :

1
#import “SWRevealViewController.h”

Poi, aggiungi il seguente codice nel metodo viewDidLoad method:

1
2
3
4
5
6
7
8
9
    // Change button color
_sidebarButton.tintColor = [UIColor colorWithWhite:0.96f alpha:0.2f];

// Set the side bar button action. When it’s tapped, it’ll show up the sidebar.
_sidebarButton.target = self.revealViewController;
_sidebarButton.action = @selector(revealToggle:);

// Set the gesture
[self.view addGestureRecognizer:self.revealViewController.panGestureRecognizer];

Per prima cosa cambiamo il pulsante elenco dei colori e poi assegnare il pulsante elenco con un’azione. Il SWRevealViewController fornisce un “revealToggle:” metodo per gestire l’espansione e la contrazione del menu laterale. Infine, aggiungiamo anche un riconoscitore del gesto. Non solo è possibile utilizzare il pulsante elenco per portare fuori il menu laterale, l’utente può scorrere l’area di contenuto per attivare la barra laterale.Provare a compilare ed eseguire l’applicazione. Toccare il pulsante elenco e verrà apparso il menu laterale. Toccare nuovamente il pulsante per chiuderla. È anche possibile scorrere proprio nell’area contenuto per aprire il menu.
Sidebar_esempio_-Slide-Out-Navigation-Menu
Prima di andare avanti, aggiungere lo stesso frammento di codice sia PhotoViewController.m e MapViewController.m.

2 commenti:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*