Share
Acest tutorial vă va învăța cum să creați un meniu iOS captivant prin utilizarea proiectului AwesomeMenu open-source. Citește mai departe!
Următorul este un scurt demo al lui AwesomeMenu în acțiune:
Rețineți că toate pictogramele furnizate de AwesomeMenu sunt complet personalizabile. Pictogramele implicite star / plus de mai sus sunt utilizate exclusiv în scopuri demonstrative.
Deschideți Xcode și creați un nou proiect iOS. Selectați "Single View Application" și apoi faceți clic pe "Next".
Denumiți aplicația AwesomeMenuDemo și introduceți valorile corespunzătoare pentru câmpurile rămase de introducere a textului. Selectați "iPhone" din meniul derulant al dispozitivelor și asigurați-vă că este selectată opțiunea "Utilizare numărătoare automată de referință". Nu selectați "Folosiți tablouri de bord" sau "Includeți testele de unitate".
Următorul pas este să descărcați codul AwesomeMenu de pe pagina oficială a proiectului GitHub. După ce aveți acces la fișiere, va trebui să glisați două foldere în propriul proiect: folderul "AwesomeMenu" care conține AwesomeMenu și AwesomeMenuItem clase și folderul "Imagini" care conține imaginile stea și semnul plus.
Când trageți imaginea în Xcode, asigurați-vă că bifați caseta de selectare "Copiați articolele în dosarul grupului de destinație", bifați butonul radio "Creați grupuri pentru eventualele dosare adăugate" și bifați caseta de lângă "AwesomeMenuDemo" în Adăugați la obiective masa.
Animația oferită de AwesomeMenu depinde de cadrul QuartzCore. Pentru a adăuga acest cadru, selectați proiectul AwesomeMenuDemo din panoul Navigator de proiect, apoi faceți clic pe fila "Construiți faze". Apoi, extindeți meniul derulant "Link Binary with Libraries" și faceți clic pe pictograma "plus" pentru a adăuga un nou cadru.
Selectați QuartzCore din listă pentru a adăuga cadrul pentru proiectul dvs..
Dacă ați finalizat cu succes rezultatele de mai sus, ar trebui să vedeți acum cadrul "QuartzCore" din Navigatorul de proiecte spre stânga. Puteți fie să o lăsați unde este, fie să o trageți în directorul "Cadre" pentru a păstra lucrurile organizate.
Acum săriți peste ViewController.h fişier. Va trebui să importați clasele AwesomeMenu în ViewController cu următorul cod:
#import#import "AwesomeMenu.h"
Acest lucru va permite controlerului vizual principal al proiectului să utilizeze funcționalitatea AwesomeMenu.
Dacă ați urmat instrucțiunile de la pasul 1, proiectul pe care l-ați creat utilizează Numerotarea automată a referințelor (ARC) pentru gestionarea memoriei. ARC este o metodă fenomenală de gestionare a memoriei aplicațiilor, dar AwesomeMenu a fost scrisă cu Manual Reference Counting (MRC) și, prin urmare, nu poate fi compilată în interiorul unui proiect ARC fără o modificare.
În timp ce ați putea încerca să transformați manual proiectul AwesomeMenu de la MRC la ARC, nu aș recomanda acest lucru. În schimb, puteți seta pur și simplu -fno-objc-arc compilator pe fiecare fișier din codul sursă AwesomeMenu pentru a spune compilatorului să nu aplice ARC pe acele fișiere. Tare nu?
Din fericire, acest lucru este ușor. Accesați fila "Construiți fazele" pentru proiectul dvs. și extindeți meniul derulant "Compilați sursele". Faceți dublu clic pe AwesomeMenu.m se va afișa un fișier și o casetă pop-up cu un câmp de text. Introduceți "-fno-objc-arc" în această casetă pentru a aplica pavilionul compilatorului și apoi faceți clic pe "Done".
Apoi, faceți același lucru pentru AwesomeMenuItem.m fişier.
Cu aceste steaguri în loc, compilatorul știe să aplice ARC la toate fișierele de cod sursă din proiectul dvs. cu excepția celor două fișiere non-arc legate de AwesomeMenu.
Mai întâi, să creăm o instanță a lui AwesomeMenu și să o plasăm în centrul controlerului de vizualizare:
- (vid) viewDidLoad [super viewDidLoad]; // Efectuați orice setare suplimentară după încărcarea vizualizării, de obicei de la o pensă. AwesomeMenu * meniu = [AwesomeMenu alocare] initWithFrame: meniuri self.view.frame: nil]; [self.view addSubview: meniu];
Pentru moment, meniuri parametrul a fost setat la zero, dar în următorul pas vom înlocui acest parametru cu o matrice de AwesomeMenuItem obiecte. Continuați și rulați proiectul și ar trebui să vedeți un semn plus în centrul ecranului. Schimbarea pictogramei va funcționa, însă nu sunt afișate încă opțiuni de meniu.
Fiecare element de meniu furnizat de AwesomeMenu poate avea trei imagini diferite asociate cu acesta: o imagine de fundal, o imagine de fundal evidențiată și o imagine de conținut. În mod implicit, AwesomeMenu include următoarele imagini pentru aceste roluri:
Mergeți și creați o UIImage obiect să se refere la fiecare dintre aceste fișiere:
- (vid) viewDidLoad [super viewDidLoad]; // Efectuați orice setare suplimentară după încărcarea vizualizării, de obicei de la o pensă. UIImage * povesteMenuItemImage = [UIImage imageNamed: @ "bg-menuitem.png"]; UIImage * povesteMenuItemImagePressed = [UIImage imageNamed: @ "bg-menuitem-highlighted.png"]; UIImage * starImage = [UIImage imageNamed: @ "icon-star.png"]; AwesomeMenu * meniu = [AwesomeMenu alocare] initWithFrame: meniuri self.view.frame: nil];
Acum creați primele două opțiuni de meniu, plasați-le într-un NSArray, și alocați acea matrice la obiectul meniului meniuri parametru:
UIImage * povesteMenuItemImage = [UIImage imageNamed: @ "bg-menuitem.png"]; UIImage * povesteMenuItemImagePressed = [UIImage imageNamed: @ "bg-menuitem-highlighted.png"]; UIImage * starImage = [UIImage imageNamed: @ "icon-star.png"]; AwesomeMenuItem * starMenuItem1 = [[AwesomeMenuItem alocare] initWithImage: storyMenuItemImage highlightedImage: storyMenuItemImageDescrimare conținutImage: starImage highlightedContentImage: nil]; AwesomeMenuItem * starMenuItem2 = [[AwesomeMenuItem alocat] initWithImage: storyMenuItemImage highlightedImage: storyMenuItemImagePress ContentImage: starImage highlightedContentImage: nil]; NSArray * menuOptions = [NASrray arrayWithObjects: starMenuItem1, starMenuItem2, nil]; AwesomeMenu * meniu = [AwesomeMenu alocare] initWithFrame: meniuri self.view.frame: menuOptions]; [self.view addSubview: meniu];
Construiți și rulați proiectul acum și ar trebui să vedeți un ecran similar cu următorul:
Pe măsură ce adăugați elemente de meniu suplimentare, AwesomeMenu le va plasa automat într-un unghi predefinit. Implicit, unghiul este egal cu un cerc complet, centrul fiind semnul "plus".
Adăugați alte trei elemente de meniu pentru a vedea efectul în acțiune:
AwesomeMenuItem * starMenuItem1 = [[AwesomeMenuItem alocare] initWithImage: storyMenuItemImage highlightedImage: storyMenuItemImageDescrimare conținutImage: starImage highlightedContentImage: nil]; AwesomeMenuItem * starMenuItem2 = [[AwesomeMenuItem alocat] initWithImage: storyMenuItemImage highlightedImage: storyMenuItemImagePress ContentImage: starImage highlightedContentImage: nil]; AwesomeMenuItem * starMenuItem3 = [[AwesomeMenuItem alocare] initWithImage: storyMenuItemImage highlightedImage: storyMenuItemImagePrimul conținutImage: starImage highlightedContentImage: nil]; AwesomeMenuItem * starMenuItem4 = [[AwesomeMenuItem alocare] initWithImage: storyMenuItemImage highlightedImage: storyMenuItemImagePrimul conținut Content: starImage highlightedContentImage: nil]; AwesomeMenuItem * starMenuItem5 = [[AwesomeMenuItem alocare] initWithImage: storyMenuItemImage highlightedImage: storyMenuItemImageDescrimare conținutImage: starImage highlightedContentImage: nil]; NSArray * menuOptions = [NSArray arrayWithObjects: starMenuItem1, starMenuItem2, starMenuItem3, starMenuItem4, starMenuItem5, zero]; AwesomeMenu * meniu = [AwesomeMenu alocare] initWithFrame: meniuri self.view.frame: menuOptions]; [self.view addSubview: meniu];
Meniul dvs. ar trebui să arate acum după cum urmează:
Efectul curent va cauza opțiunile de meniu să explodeze într-un cerc de 360 de grade în jurul butonului de meniu. Acest lucru funcționează excelent atunci când meniul se află în centrul ecranului, dar este posibil să doriți să repoziționați punctul de pornire al meniului în partea de sus, în partea de jos sau în colțul dispozitivului.
Două proprietăți ale meniului funcționează împreună pentru a vă permite să controlați acest lucru: menuWholeAngle și rotateAngle. Principiile matematice implicate sunt dincolo de scopul acestui tutorial, dar următoarele capturi de ecran ilustrează cele mai utile combinații:
De exemplu, pentru a implementa valorile cvadrantului din dreapta jos, modificați codul proiectului astfel:
AwesomeMenu * meniu = [AwesomeMenu alocare] initWithFrame: meniuri self.view.frame: menuOptions]; // meniul Quadrant din partea inferioară dreaptă.menuWholeAngle = M_PI / 180 * 90; men.rotateAngle = M_PI / 180 * 90; [self.view addSubview: meniu];
Pe lângă controlul unghiurilor de plasare a opțiunilor din meniu, puteți de asemenea să controlați distanța opțiunilor din meniu de la centru cu endRadius proprietate. Redați-vă cu această valoare pentru a vedea cum funcționează.
Acum că știți cum să controlați unghiul și distanța opțiunii de plasare a opțiunilor din meniu, este mult mai probabil să doriți să plasați meniul într-unul din cele patru colțuri ale ecranului. Pentru a face acest lucru, trebuie să personalizați punctul de pornire pentru butonul de meniu. Puteți face acest lucru cu punctul de start proprietăți, cum ar fi:
// meniul Quadrant din partea inferioară dreaptă.menuWholeAngle = M_PI / 180 * 90; men.rotateAngle = M_PI / 180 * 90; menu.startPoint = CGPointMake (30.0f, 30.0f); [self.view addSubview: meniu];
Linia adăugată mai sus va plasa meniul la punctul (30, 30) pe ecranul iPhone. Cu alte cuvinte, va apărea acum în colțul din stânga sus și ar trebui să arate astfel:
După cum puteți vedea, repoziționarea punctului de pornire al meniului este ușor. Doar asigurați-vă că afișați numai opțiunile de meniu care se potrivesc în mod rezonabil în setul de constrângeri de unghi.
Acum că știți cum să creați un meniu personalizat, sunteți gata să implementați fiecare opțiune. Ori de câte ori un utilizator se deconectează pe una din butoanele de opțiuni de meniu, un mesaj este trimis delegatului AwesomeMenu cu numărul de index al opțiunii selectate. Pentru a accesa acea valoare index, va trebui să implementați AwesomeMenuDelegate.
În primul rând, deschis ViewController.h și să precizeze că se va conforma protocolului delegat:
#import#import "AwesomeMenu.h" @interface ViewController: UIViewController
Apoi treceți la ViewController.m și adăugați implementarea delegatului:
- (void) AwesomeMenu: (AwesomeMenu *) meniul didSelectIndex: (NSInteger) idx NSLog (@ "Selectați indexul:% d", idx);
De asemenea, trebuie să specificați faptul că controlerul de vizualizare este delegatul pentru meniu, după cum urmează:
NSArray * meniuOptions = [NSArray arrayWithObjects: starMenuItem1, starMenuItem2, starMenuItem3, nul]; AwesomeMenu * meniu = [AwesomeMenu alocare] initWithFrame: meniuri self.view.frame: menuOptions]; menu.delegate = auto;
În acest moment, puteți afla ce opțiune de meniu a fost selectată prin maparea indexului pe care ați făcut clic pe menuOptions matrice. Pentru a finaliza navigarea în meniu, puteți adăuga un nou controler de vizualizare pe ecran sau pur și simplu modificați controlerul de vizualizare existent, după cum este necesar. Deoarece implementarea exactă va fi specifică aplicațiilor dvs., acest lucru va fi lăsat ca un exercițiu pentru cititor.
AwesomeMenu este un proiect open-source captivant și interesant pentru personalizarea comenzilor de navigare ale aplicației. Sper că v-ați bucurat de acest tutorial și nu ezitați să lăsați comentarii sau întrebări de mai jos. Puteți să mă contactați și prin Twitter prin trimiterea unui mesaj către @markhammonds.
Accentsconagua