Share
Coinvolgi i tuoi utenti con fantastici caroselli! Vedremo quanto può essere semplice e pulito implementare caroselli interattivi scorrevoli nelle tue applicazioni iOS. Con un'elevata configurabilità, puoi disporre di array di scorrimento 3D, piatti, rotanti e infiniti per dati, immagini e pulsanti.
Nota del redattore: questo tutorial è stato originariamente pubblicato su Mobiletuts + a gennaio. Questa versione è stata aggiornata in modo significativo in risposta alle modifiche apportate alla libreria iCarousel.
Ora, quasi cinque anni dopo, lo stesso messaggio è vero. C'è magia nel modo in cui siamo in grado di sfogliare la nostra musica oggi e, come sviluppatori, siamo in grado di portare la stessa esperienza ai nostri utenti per tutti i tipi di dati, non solo per le canzoni e gli album.
Per coloro che hanno già familiarità con lo sviluppo per iOS, potrebbe essere intimidatorio considerare il numero di fattori coinvolti per implementare qualcosa di apparentemente semplice come Cover Flow: animazione e scorrimento fluido, ottimizzazione della gestione delle immagini, intercettazione delle interazioni tattili, ecc..
Fortunatamente, Nick Lockwood di Charcoal Design ha creato una classe chiamata "iCarousel" che gestisce tutti i lavori pesanti per noi, e lo ha rilasciato come progetto open source. Ciò significa che possiamo rapidamente ed efficacemente scendere al resto del nostro sviluppo, pur godendo di Cover Flow altamente interattivo e touch-friendly.
Una delle grandi caratteristiche di iCarousel è la selezione di tipi di display pronti all'uso:
È anche possibile personalizzare questi stili in base alle proprie esigenze, ma potrebbe essere un tutorial separato o un suggerimento rapido di per sé (fateci sapere nei commenti se siete interessati!).
iCarousel è ospitato su github, il che significa che puoi ottenerlo come clone git o come download .zip. Puoi trovarlo su https://github.com/nicklockwood/iCarousel, quindi vai avanti e procurati una copia locale di iCarousel.
Questo progetto prevede anche l'uso di alcune immagini, quindi è necessario scaricare i "File sorgente" nella parte superiore di questa pagina, se non l'hai già fatto. In quel file .zip, c'è una directory chiamata "Animali" che ha sette diverse immagini di animali (queste immagini provengono da Joy Tek su Flickr - http://www.flickr.com/photos/joytek/collections/72157627168953450/) - e sono stati ridimensionati per questo tutorial).
Ora, con tutti i file necessari scaricati, siamo pronti per creare un fantastico carosello!
Inizieremo aggiungendo i file di classe iCarousel, quindi i file di immagine e, infine, ci assicureremo di limitare l'app alla modalità orizzontale senza una barra di stato visibile (iCarousel funzionerà in modalità verticale, ma lo terremo in forma semplice semplicemente lavorando con il paesaggio per ora). Ma, prima di tutto, iniziamo un nuovo progetto!
Abbiamo solo bisogno di una singola finestra per questo progetto, quindi una "Single View Application" andrà bene per ora. Chiamerò il mio progetto "Carousel" e userò Automatic Reference Counting (ARC), quindi è importante non dimenticare quell'opzione quando crei il progetto.
Una volta creato il nostro progetto, possiamo aggiungere i file di classe iCarousel afferrando la directory "iCarousel" e trascinandola nel progetto (nella directory di iCarousel ci sono solo due file: "iCarousel.h" e "iCarousel.m"). Nota: se stai trascinando l'intera directory nel tuo progetto, assicurati di "Crea gruppi per tutte le cartelle aggiunte".
iCarousel dipende dal framework "QuartzCore" e supporta pienamente ARC, quindi abbiamo alcune semplici attività da fare per assicurarci che la nostra classe appena aggiunta funzioni con il nostro progetto.
Per aggiungere il framework QuartzCore, fai clic sul file di progetto nel navigatore di sinistra (sarà il nome del tuo progetto, il mio dice "iCarousel 1target, iPhone OS ..."). Nella parte superiore dello schermo avrai ora alcune impostazioni di build di destinazione. Fai clic su "Crea fasi", quindi espandi "Collega il file binario con le librerie" e fai clic sul pulsante "+" nell'angolo in basso a sinistra. Apparirà una finestra e potrai trovare il nostro framework digitando "QuartzCore" nella casella di ricerca. Fai clic su "Aggiungi" e il gioco è fatto!
Disattiveremo la barra di stato di questa app, quindi vai alla scheda "Informazioni" del nostro target e in "Proprietà target iOS personalizzate" aggiungeremo una nuova riga (tasto destro del mouse ->; Aggiungi riga ) e impostare il testo nel campo "Chiave" su "La barra di stato è inizialmente nascosta". Quindi, imposta il "Valore" su "SÌ".
Ora, prima di entrare nell'attuale implementazione, vogliamo impostare l'orientamento della nostra App in orizzontale e accertarci che non entri in modalità verticale (almeno per ora). Andremo alla scheda "Riepilogo" del nostro obiettivo e assicuriamoci che le opzioni "Orizzontale a sinistra" e "Orizzontale a destra" siano le uniche selezionate nella sezione "Orientamenti dispositivo supportati".
Successivamente possiamo andare nel nostro file di implementazione del controller della vista principale ("MTViewController.m" per me), e cambiare il metodo:
- (BOOL) shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation) interfaceOrientation // Restituisce YES per gli orientamenti supportati return (interfaceOrientation == UIInterfaceOrientationLandscapeLeft || interfaceOrientation == UIInterfaceOrientationLandscapeRight);
L'ultima cosa che avremo bisogno di fare per ora è ottenere le nostre immagini degli animali dello zoo nel nostro progetto. Ho incluso sette di queste immagini nei file di origine che puoi utilizzare. Prendili semplicemente da tutti i punti in cui hai decompresso la directory dei file sorgente e trascinali nel nostro progetto (potresti anche trascinare l'intera directory "Animali", che includerà tutte le immagini). E ora siamo pronti a lanciare!
Il nostro carosello mostrerà alcune immagini di diversi animali dello zoo e al di sotto dell'immagine attuale mostreremo il nome dell'animale e il tipo di cibo che gli piace mangiare. In un ambiente di produzione, dovresti avere alcuni dati reali su cui lavorare, ma per il nostro esempio, stiamo solo impostando alcuni NSArrays con dati fittizi.
Il nostro primo array sarà un elenco dei nomi delle immagini in modo che possiamo trovarli e caricarli nel nostro carosello. Chiameremo questa lista "immagini".
Il secondo array avrà una lista di nomi che corrispondono alle nostre immagini, così come una piccola frase che segue questo formato: [nome animale] Mangiare: [cibo]. Ad esempio, con gli orsi, diremo: "Bears Eat: Honey". Chiameremo questo array "descrizioni".
Imposteremo questi NSArrays nel nostro file di intestazione del controller di visualizzazione principale ("MTViewController.h" per me).
@property (strong, nonatomic) NSMutableArray * animali; @property (strong, nonatomic) Descrizioni di NSMutableArray *;
E, naturalmente, sintetizzali nel nostro file di implementazione:
@sintimi animali, descrizioni;
Effettueremo il nostro set-up nel metodo "initWithNibName", quindi inseriamo ora i nomi delle immagini e le descrizioni degli alimenti nei loro array.
- (id) initWithNibName: (NSString *) nibNameOrNil bundle: (NSBundle *) nibBundleOrNil self = [super initWithNibName: nibNameOrNil bundle: nibBundleOrNil]; if (self) // set up carousel data wrap = NO; self.animals = [NSMutableArray arrayWithObjects: @ "Bear.png", @ "Zebra.png", @ "Tiger.png", @ "Goat.png", @ "Birds.png", @ "Giraffe.png", @ "Chimp.png", nil]; self.descriptions = [NSMutableArray arrayWithObjects: @ "Bears Eat: Honey", @ "Zebre Eat: Grass", @ "Tigers Eat: Meat", @ "Capre Eat: Weeds", @ "Birds Eat: Seeds", @ " Giraffe Eat: Trees ", @" Chimps Eat: Bananas ", nil]; return self;
Noterai che c'è anche una proprietà "wrap", che abbiamo impostato su "NO". Questa è una proprietà di iCarousel, e farà in modo che il nostro carosello non scorra in un ciclo infinito attraverso le nostre immagini, ma, invece, smette di scorrere dopo il primo e l'ultimo elemento con una bella animazione a bande di gomma. Lo esamineremo più avanti.
Ora che abbiamo alcuni dati nella nostra app, avremo bisogno di implementare la vera classe iCarousel. iCarousel funziona come UITables, con i protocolli "data source" e "delegate". Li implementeremo importando prima la classe iCarousel nella nostra intestazione.
#import "iCarousel.h"
Successivamente, aggiungeremo il seguente bit di codice dopo la parte "UIViewController" della dichiarazione dell'interfaccia dell'intestazione:
Accentsconagua
