Share
Questo tutorial ti insegnerà come creare un menu iOS accattivante utilizzando il progetto open source AwesomeMenu. Continuare a leggere!
Quanto segue è una breve demo di AwesomeMenu in azione:
Nota che tutte le icone fornite da AwesomeMenu sono completamente personalizzabili. Le icone stella / più predefinite sopra sono utilizzate esclusivamente a scopo dimostrativo.
Apri Xcode e crea un nuovo progetto iOS. Seleziona "Applicazione vista singola" e quindi fai clic su "Avanti".
Denominare l'applicazione AwesomeMenuDemo e immettere i valori appropriati per i restanti campi di immissione del testo. Seleziona "iPhone" dal menu a discesa dei dispositivi e assicurati che "Usa il conteggio dei riferimenti automatico" sia selezionato. Non selezionare "Usa Storyboard" o "Includi test unità".
Il prossimo passo è scaricare il codice AwesomeMenu dalla pagina GitHub del progetto ufficiale. Dopo aver avuto accesso ai file, dovrai trascinare due cartelle nel tuo progetto: la cartella "AwesomeMenu" contenente il AwesomeMenu e AwesomeMenuItem classi e la cartella "Immagini" contenente le immagini di stelle e di segni più.
Quando trascini l'immagine in Xcode, assicurati di selezionare la casella di controllo "Copia gli elementi nella cartella del gruppo di destinazione", seleziona il pulsante di opzione "Crea gruppi per eventuali cartelle aggiunte" e seleziona la casella accanto a "AwesomeMenuDemo" nel Aggiungi agli obiettivi tavolo.
Le animazioni fornite da AwesomeMenu dipendono dal framework QuartzCore. Per aggiungere questo framework, seleziona il progetto AwesomeMenuDemo nel riquadro Navigatore progetto, quindi fai clic sulla scheda "Crea fasi". Quindi espandere il menu a discesa "Collega binari con librerie" e fare clic sull'icona "più" per aggiungere un nuovo framework.
Seleziona QuartzCore dall'elenco per aggiungere la struttura al tuo progetto.
Se hai completato correttamente il precedente, dovresti ora vedere il framework "QuartzCore" nel Navigatore di progetto a sinistra. Puoi lasciarlo dove è o trascinarlo nella cartella "Frameworks" per mantenere le cose organizzate.
Ora salta sopra al ViewController.h file. Dovrai importare le classi AwesomeMenu nel ViewController con il seguente codice:
#importare#import "AwesomeMenu.h"
Ciò consentirà al controller di visualizzazione principale del progetto di utilizzare la funzionalità AwesomeMenu.
Se hai seguito le istruzioni del passaggio 1, il progetto che hai creato utilizza Automatic Reference Counting (ARC) per la gestione della memoria. ARC è un metodo fenomenale di gestione della memoria delle applicazioni, ma AwesomeMenu è stato scritto con Manual Reference Counting (MRC), e di conseguenza non può essere compilato all'interno di un progetto ARC senza alcuna modifica.
Mentre si potrebbe provare a convertire manualmente il progetto AwesomeMenu da MRC a ARC, non lo consiglierei. Invece, puoi semplicemente impostare il -fno-objc-arc flag del compilatore su ciascuno dei file del codice sorgente AwesomeMenu per dire al compilatore di non applicare ARC su quei file. Splendido, no?
Fortunatamente, farlo è facile. Vai alla scheda "Crea Fasi" per il tuo progetto ed espandi il menu a discesa "Compila fonti". Fare doppio clic sul AwesomeMenu.m apparirà un file e una finestra popup con un campo di testo. Inserisci "-fno-objc-arc" in questa casella per applicare il flag del compilatore e quindi fai clic su "Fine".
Quindi, fai la stessa cosa per il AwesomeMenuItem.m file.
Con questi flag installati, il compilatore sa applicare ARC a tutti i file di codice sorgente nel progetto, ad eccezione dei due file non arc relativi a AwesomeMenu.
Per prima cosa, creiamo un'istanza di AwesomeMenu e posizioniamola al centro del controller della vista:
- (void) viewDidLoad [super viewDidLoad]; // Esegue un'impostazione aggiuntiva dopo aver caricato la vista, in genere da un pennino. AwesomeMenu * menu = [[AwesomeMenu alloc] initWithFrame: self.view.frame menus: nil]; [self.view addSubview: menu];
Per ora, il menu parametro è stato impostato su zero, ma nel prossimo passaggio lo sostituiremo con un array di AwesomeMenuItem oggetti. Vai avanti ed esegui il progetto e dovresti vedere un segno più al centro dello schermo. La commutazione dell'icona funzionerà, ma non sono ancora visualizzate opzioni di menu.
Ogni voce di menu fornita da AwesomeMenu può avere tre diverse immagini associate: un'immagine di sfondo, un'immagine di sfondo evidenziata e un'immagine di contenuto. Per impostazione predefinita, AwesomeMenu include le seguenti immagini per questi ruoli:
Vai avanti e crea un UIImage oggetto di riferirsi a ciascuno di questi file:
- (void) viewDidLoad [super viewDidLoad]; // Esegue un'impostazione aggiuntiva dopo aver caricato la vista, in genere da un pennino. UIImage * storyMenuItemImage = [UIImage imageNamed: @ "bg-menuitem.png"]; UIImage * storyMenuItemImagePressed = [UIImage imageNamed: @ "bg-menuitem-highlight.png"]; UIImage * starImage = [UIImage imageNamed: @ "icon-star.png"]; AwesomeMenu * menu = [[AwesomeMenu alloc] initWithFrame: self.view.frame menus: nil];
Ora crea le tue prime due opzioni di menu, inseriscile in un NSArray, e assegna quell'array alle voci del menu menu parametro:
UIImage * storyMenuItemImage = [UIImage imageNamed: @ "bg-menuitem.png"]; UIImage * storyMenuItemImagePressed = [UIImage imageNamed: @ "bg-menuitem-highlight.png"]; UIImage * starImage = [UIImage imageNamed: @ "icon-star.png"]; AwesomeMenuItem * starMenuItem1 = [[AwesomeMenuItem alloc] initWithImage: storyMenuItemImage evidenziatoImmagine: storyMenuItemImagePressed ContentImage: starImage evidenziatoContentImage: nil]; AwesomeMenuItem * starMenuItem2 = [[AwesomeMenuItem alloc] initWithImage: storyMenuItemImage evidenziatoImmagine: storyMenuItemImagePressed ContentImage: starImage evidenziatoContentImage: nil]; NSArray * menuOptions = [NSArray arrayWithObjects: starMenuItem1, starMenuItem2, nil]; AwesomeMenu * menu = [[AwesomeMenu alloc] initWithFrame: self.view.frame menu: menuOptions]; [self.view addSubview: menu];
Costruisci ed esegui il progetto ora, e dovresti vedere una schermata simile alla seguente:
Man mano che aggiungi elementi di menu aggiuntivi, AwesomeMenu li posizionerà automaticamente all'interno di un angolo predefinito. Per impostazione predefinita, l'angolo è uguale a un cerchio completo, con il centro che rappresenta il segno "più".
Aggiungi altri tre elementi del menu per vedere questo effetto in azione:
AwesomeMenuItem * starMenuItem1 = [[AwesomeMenuItem alloc] initWithImage: storyMenuItemImage evidenziatoImmagine: storyMenuItemImagePressed ContentImage: starImage evidenziatoContentImage: nil]; AwesomeMenuItem * starMenuItem2 = [[AwesomeMenuItem alloc] initWithImage: storyMenuItemImage evidenziatoImmagine: storyMenuItemImagePressed ContentImage: starImage evidenziatoContentImage: nil]; AwesomeMenuItem * starMenuItem3 = [[AwesomeMenuItem alloc] initWithImage: storyMenuItemImage evidenziatoImmagine: storyMenuItemImagePressed ContentImage: starImage evidenziatoContentImage: nil]; AwesomeMenuItem * starMenuItem4 = [[AwesomeMenuItem alloc] initWithImage: storyMenuItemImage evidenziatoImmagine: storyMenuItemImagePressed ContentImage: starImage evidenziatoContentImage: nil]; AwesomeMenuItem * starMenuItem5 = [[AwesomeMenuItem alloc] initWithImage: storyMenuItemImage evidenziatoImmagine: storyMenuItemImagePressed ContentImage: starImage evidenziatoContentImage: nil]; NSArray * menuOptions = [NSArray arrayWithObjects: starMenuItem1, starMenuItem2, starMenuItem3, starMenuItem4, starMenuItem5, nil]; AwesomeMenu * menu = [[AwesomeMenu alloc] initWithFrame: self.view.frame menu: menuOptions]; [self.view addSubview: menu];
Il tuo menu dovrebbe apparire come il seguente:
L'effetto corrente farà esplodere le opzioni del menu in un cerchio di 360 gradi attorno al pulsante del menu. Funziona alla grande quando il menu è al centro dello schermo, ma è probabile che tu voglia riposizionare il punto di inizio del menu nella parte superiore, inferiore o angolo del dispositivo.
Due proprietà del menu funzionano insieme per consentire di controllare ciò: menuWholeAngle e RotateAngle. I principi matematici coinvolti vanno oltre lo scopo di questo tutorial, ma i seguenti screenshot illustrano le combinazioni più utili:
Ad esempio, per implementare i valori del quadrante in basso a destra specificati sopra, modificare il codice del progetto in questo modo:
AwesomeMenu * menu = [[AwesomeMenu alloc] initWithFrame: self.view.frame menu: menuOptions]; // Quadrante in basso a destra menu.menuWholeAngle = M_PI / 180 * 90; menu.rotateAngle = M_PI / 180 * 90; [self.view addSubview: menu];
Oltre a controllare gli angoli di posizionamento delle opzioni di menu, puoi anche controllare la distanza dal centro delle opzioni del menu con endRadius proprietà. Gioca con questo valore per vedere come funziona.
Ora che sai come controllare l'angolo e la distanza del posizionamento delle opzioni di menu, è molto più probabile che tu voglia posizionare il menu in uno dei quattro angoli dello schermo. Per fare ciò, è necessario personalizzare il punto di partenza per il pulsante del menu. Puoi farlo con il punto di partenza proprietà, in questo modo:
// Quadrante in basso a destra menu.menuWholeAngle = M_PI / 180 * 90; menu.rotateAngle = M_PI / 180 * 90; menu.startPoint = CGPointMake (30.0f, 30.0f); [self.view addSubview: menu];
La riga aggiunta sopra posizionerà il menu al punto (30, 30) sullo schermo dell'iPhone. In altre parole, apparirà ora nell'angolo in alto a sinistra e dovrebbe apparire così:
Come puoi vedere, il riposizionamento del punto di inizio del menu è semplice. Assicurati solo di visualizzare tutte le opzioni di menu che puoi ragionevolmente inserire nel vincolo di angolo impostato.
Ora che sai come creare un menu personalizzato, sei pronto per implementare ciascuna opzione. Ogni volta che un utente tocca una delle opzioni del menu, viene inviato un messaggio al delegato AwesomeMenu con il numero di indice dell'opzione selezionata. Per accedere a quel valore dell'indice, devi implementare il AwesomeMenuDelegate.
Primo, aperto ViewController.h e specificare che sarà conforme al protocollo delegato:
#importare#import "AwesomeMenu.h" @interface ViewController: UIViewController
Quindi, passare a ViewController.m e aggiungere l'implementazione del delegato:
- (void) AwesomeMenu: (AwesomeMenu *) menu didSelectIndex: (NSInteger) idx NSLog (@ "Seleziona l'indice:% d", idx);
Dovrai anche specificare che il controller della vista è il delegato per il menu, in questo modo:
NSArray * menuOptions = [NSArray arrayWithObjects: starMenuItem1, starMenuItem2, starMenuItem3, nil]; AwesomeMenu * menu = [[AwesomeMenu alloc] initWithFrame: self.view.frame menu: menuOptions]; menu.delegate = self;
A questo punto è possibile capire quale opzione di menu è stata selezionata mappando l'indice su cui si è fatto clic menuOptions array. Per completare la navigazione del menu, è possibile aggiungere un nuovo controller di visualizzazione allo schermo o semplicemente modificare il controller di visualizzazione esistente secondo necessità. Poiché l'implementazione esatta sarà specifica per le tue applicazioni, così facendo verrà lasciato come esercizio per il lettore.
AwesomeMenu è un progetto open source accattivante ed eccitante per la personalizzazione dei controlli di navigazione della tua app. Spero che ti sia piaciuto questo tutorial e sentiti libero di lasciare commenti o domande qui sotto. Puoi anche raggiungermi tramite Twitter inviando un messaggio a @markhammonds.
Accentsconagua