Share
Implicați-vă utilizatorii cu caruseluri uimitoare! Vom analiza cât de ușor și curat poate fi implementarea caruselilor scrollabile și interactive în aplicațiile dvs. iOS. Cu configurabilitate ridicată, puteți avea rețele 3D, plane, rotative și nesfârșite de defilare pentru date, imagini și butoane.
Nota Editorului: Acest tutorial a fost publicat inițial pe Mobiletuts + în ianuarie. Această versiune a fost actualizată în mod semnificativ ca răspuns la modificările aduse bibliotecii iCarousel.
Acum, aproape cinci ani mai târziu, același mesaj este adevărat. Există magie în modul în care suntem capabili să navigăm în muzica noastră astăzi și, în calitate de dezvoltatori, suntem capabili să aducem aceeași experiență utilizatorilor noștri pentru toate tipurile de date, nu doar pentru cântece și albume.
Pentru cei care sunt deja familiarizați cu dezvoltarea pentru iOS, ar putea fi intimidantă să ia în considerare numărul de factori implicați în punerea în aplicare a unui lucru ca fiind simplu simplu ca Cover Flow: animație și derulare ușoară, optimizarea manipulării imaginilor, interceptarea interacțiunilor tactile etc..
Din fericire, Nick Lockwood de la Charcoal Design a creat o clasă numită "iCarousel", care se ocupă de toate ridicările grele pentru noi și a lansat-o ca un proiect open source. Asta inseamna ca putem ajunge rapid si eficient la restul dezvoltarii noastre, in timp ce ne bucuram in acelasi timp de un flux interactiv,.
Una dintre marile caracteristici ale iCarousel este selecția tipurilor de afișaj gata de utilizare:
De asemenea, este posibil să personalizați aceste stiluri pentru a se potrivi nevoilor dvs., dar ar putea fi un tutorial separat sau un sfat rapid în sine (anunțați-ne în comentarii dacă sunteți interesat!).
iCarousel este găzduit pe github, ceea ce înseamnă că o puteți obține fie ca o clonă git, fie ca o descărcare .zip. Puteți găsi acest lucru la https://github.com/nicklockwood/iCarousel, deci mergeți mai departe și obțineți-vă o copie locală a iCarousel.
Acest proiect implică și utilizarea câtorva imagini, așa că veți dori să descărcați "Fișierele sursă" în partea de sus a acestei pagini, dacă nu ați făcut-o deja. În acest fișier .zip există un director numit "Animale" care are șapte imagini diferite pe animale (aceste imagini provin de la Joy Tek pe Flickr - http://www.flickr.com/photos/joytek/collections/72157627168953450/) - și au fost redimensionate pentru acest tutorial).
Acum, cu toate fișierele necesare descărcate, suntem gata să creăm un carusel minunat!
Vom începe prin adăugarea fișierelor de clasă iCarousel, apoi a fișierelor imagine și, în final, vom limita aplicația în modul peisaj fără o bară de stare vizibilă (iCarousel va funcționa în modul portret, dar îl vom păstra simplu doar prin lucrul cu peisajul pentru moment). Dar, înainte de toate, să începem un nou proiect!
Avem nevoie doar de o singură fereastră pentru acest proiect, așa că o aplicație "Single View" va fi bine pentru moment. O să-mi sun proiectul "Carusel" și voi folosi automat numărarea de referință (ARC), deci este important să nu uitați acea opțiune când creați proiectul.
Odată ce proiectul nostru a fost creat, putem adăuga fișierele clasei iCarousel prin apucarea directorului "iCarousel" și tragerea acestuia în proiect (în directorul iCarousel există doar două fișiere: "iCarousel.h" și "iCarousel.m"). Notă: dacă glisați întregul director în proiect, asigurați-vă că "Creați grupuri pentru orice dosare adăugate".
iCarousel depinde de cadrul "QuartzCore" și sprijină pe deplin ARC, așa că avem câteva sarcini simple de făcut pentru a ne asigura că clasa nouă adăugată va funcționa împreună cu proiectul nostru.
Pentru a adăuga cadrul QuartzCore, faceți clic pe fișierul de proiect din navigatorul din stânga (acesta va fi numele proiectului dvs., al meu spune "iCarousel 1target, iPhone OS ..."). În partea de sus a ecranului, veți avea acum câteva setări pentru construirea țintă. Faceți clic pe "Construiți fazele" și apoi extindeți "Link Binary With Libraries" și faceți clic pe butonul "+" din colțul din stânga jos. Va apărea o fereastră și veți găsi cadrul nostru introducând "QuartzCore" în caseta de căutare. Faceți clic pe "Adăugați" și ați terminat!
Vom dezactiva bara de stare pentru această aplicație, așa că mergeți la fila "Info" pentru destinația noastră, iar în secțiunea "Proprietăți țintă personalizate iOS" vom adăuga un nou rând (Clic dreapta ->; Adăugați rând ) și setați textul în câmpul "Cheie" la "Bara de stare este inițial ascunsă". Apoi, setați "Valoare" la "DA".
Acum, înainte de a intra în implementarea reală, dorim să setăm orientarea aplicației noastre pe peisaj și să ne asigurăm că aceasta nu intră în modul portret (cel puțin pentru moment). Vom merge la fila "Rezumat" pentru obiectivul nostru și vă asigurați că opțiunile "Peisaj stânga" și "Peisaj dreapta" sunt singurele opțiuni selectate în secțiunea "Orientări dispozitiv orientate".
Apoi, putem să accesăm fișierul de implementare a controlerului principal ("MTViewController.m" pentru mine) și să modificăm metoda:
- (BOOL) ar trebui să fieAutorotateToInterfaceOrientation: (UIInterfaceOrientation) interfațăOrientation // Return YES pentru întoarcerea orientărilor acceptate (interfaceOrientation == UIInterfaceOrientationLandscapeLeft || interfaceOrientation == UIIterfaceOrientationLandscapeRight);
Ultimul lucru pe care trebuie să-l facem pentru moment este să ne aducem imaginile animalelor din grădinile zoologice în proiectul nostru. Am inclus șapte astfel de imagini în fișierele sursă pentru a le utiliza. Doar apucați-le de unde ați dezarhivat directorul fișierelor sursă și trageți-le în proiectul nostru (de asemenea, puteți trage întregul director "Animale", care va include toate imaginile). Și acum suntem gata să ne întoarcem!
Caruselul nostru va afișa câteva imagini ale animalelor zoologice diferite, iar sub imaginea curentă vom arăta numele animalului și ce fel de mâncare le place să mănânce. Într-un mediu de producție, ar trebui să aveți date reale cu care să lucrați, dar, pentru exemplul nostru, vom stabili doar câteva ANS-uri cu date fictive.
Prima noastră matrice va fi o listă cu numele imaginilor, astfel încât să le putem găsi și încărca în caruselul nostru. Vom numi această listă "imagini".
A doua matrice va avea o listă de nume care corespund imaginilor noastre, precum și o propoziție mică care urmează acest format: [animal name] Mănâncă: [food]. De exemplu, cu urșii, vom spune: "Ursii mănâncă: dragă". Vom numi această "descriere".
Vom configura aceste NSArrays în fișierul header header principal al controlerului ("MTViewController.h" pentru mine).
@ proprietăți (animale puternice, nonatomice) NSMutableArray *; @property (puternice, nonatomice) NSMutableArray * descrieri;
Și, bineînțeles, sintetizați-le în fișierul nostru de implementare:
@intetizarea animalelor, descrieri;
Vom face setarea în metoda "initWithNibName", așa că să punem acum numele de imagine și descrierile produselor alimentare în matricea lor.
- (id) initWithNibName: (NSString *) pachet nibNameOrNil: (NSBundle *) nibBundleOrNil auto = [super initWithNibName: nibNameOrNil bundle: nibBundleOrNil]; dacă (auto) // configurați carusel data wrap = NO; auto.animale = [NSMutableArray arrayWithObjects: @ "Bear.png", @ "Zebra.png", @ "Tiger.png", @ "Goat.png", "Birds.png", @ "Giraffe.png" @ "Chimp.png", nul]; self.descriptions = [NSMutableArray arrayWithObjects: @ "Băuturi mănâncă: Miere", @ "Mănâncă Zebras: Iarbă", @ "Tigrii mănâncă: Carne" Girafe Mănâncă: Copaci ", @" Chimps Mănâncă: Banane ", nil]; întoarce-te;
Veți observa că există și o "wrap" de proprietate, pe care am setat-o la "NU". Aceasta este o proprietate iCarousel și se va asigura că caruselul nostru nu derulează într-o buclă infinită prin imaginile noastre, dar în schimb se oprește să deruleze după primul și ultimul element cu o animație frumoasă cu bandă de cauciuc. Vom analiza mai târziu.
Acum, când avem unele date în aplicația noastră, va trebui să implementăm clasa iCarousel actuală. iCarousel funcționează ca UITables, cu protocoale "sursă de date" și "delegate". Vom implementa aceste metode prin importarea în primul rând a clasei iCarousel în antetul nostru.
#import "iCarousel.h"
Apoi, vom adăuga următorul fragment de cod după secțiunea "UIViewController" a declarației de interfață antet:
Accentsconagua
