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 matrice de defilare 3D, plane, rotative și nesfârșite pentru date, imagini sau butoane.
Anumite aspecte ale aplicațiilor sau tehnicilor utilizate în acest tutorial s-au schimbat de când au fost publicate inițial. Acest lucru ar putea face un pic dificil de urmat de-a lungul. Vă recomandăm să consultați aceste tutoriale mai recente pe același subiect:
Creați un Carusel Awesome, versiunea 2.0
Pe data de 9 ianuarie 2007, Steve Jobs a lansat iPhone-ul pentru un public dornic. În prezentarea sa, el a demonstrat multe dintre trăsăturile care ar continua să creeze un mod complet nou de interacțiune cu tehnologia și informația. Una dintre aceste multe caracteristici a fost prezentată printr-un mesaj simplu și puternic - "atingeți muzica". În timp ce se ridică acolo, cu Bob Dylan cântând peste difuzoare, Steve Jobs "a trecut prin" este albumele muzicale fără efort și mesajul a fost clar.
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ă de 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, ceea ce înseamnă că putem ajunge repede și eficient la restul a dezvoltării noastre, în timp ce se bucură încă de un flux de acoperire extrem de interactiv și ușor de utilizat.
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 vă potrivi nevoilor, 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 să o găsiți la https://github.com/nicklockwood/iCarousel, deci mergeți mai departe și, urmând metoda preferată, obțineți-vă o copie locală a iCarousel.
Acest proiect presupune și utilizarea câtorva imagini, așa că, dacă nu ați făcut deja acest lucru, veți dori să descărcați "Fișierele sursă" în partea de sus a acestei pagini.În fișierul .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 clasei iCarousel, apoi a fișierelor imagine și, în sfârșit, vom limita aplicația în modul peisaj fără o bară de stare vizibilă. (iCarousel va lucra în modul portret, dar o vom păstra simplu, lucrăm doar cu peisaj 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 foarte bine. Voi numi proiectul "Carousel" și voi folosi Numărarea automată a referințelor, deci este important să nu uitați acea opțiune.
Odată ce proiectul nostru a fost creat, putem adăuga fișierele de clasă iCarousel, prin apucarea directorului "iCarousel" și tragerea acestuia în proiect. (Există doar două fișiere în directorul iCarousel: "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 nu suportă în prezent 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 superioară a ecranului veți avea acum o anumită destinație faceți clic pe "Construiți fazele", apoi extindeți "Link Binary with Libraries" și faceți clic pe butonul "+" din colțul din stânga jos. O fereastră va apărea și puteți găsi cadrul nostru introducând "QuartzCore" în caseta de căutare. Faceți clic pe "Add" și ați terminat.
Apoi, vom seta un steag de compilare care va face o excepție pentru compilatorul LLVM pentru iCarousel. Mergeți la secțiunea "Compilați sursele" de pe aceeași pagină și vom accesa intrarea "iCarousel". Faceți dublu clic pe acel rând și plasați "-fno-objc-arc" (fără ghilimele) în pop-ul care apare.
Vom dezactiva bara de stare pentru această aplicație, așa că treceți la fila "Info" pentru destinația noastră și sub "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 ținta noastră și asigurați-vă 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 al controlerului principal ("MTViewController.m" pentru mine) și să schimbă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 acum 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. Luați-le de unde ați dezarhivat directorul fișierelor sursă și trageți-le în proiectul nostru. (Puteți de asemenea să trageți întregul director "Animale", care va include toate imaginile.) Și acum suntem gata să vă rog!
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ă "matrice".
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;
Deoarece utilizăm un exemplu .xib în acest exemplu, vom dori să facem configurarea în metoda "initWithNibName". 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
