Share
Engasjere brukerne med fantastiske karuseller! Vi ser på hvor enkelt og rent det kan være å implementere rullbare, interaktive karuseller i dine iOS-applikasjoner. Med høy konfigurerbarhet kan du ha 3D, flat, roterende og endeløse rullingsarrayer for data, bilder og knapper.
Redaktørens merknad: Denne opplæringen ble opprinnelig publisert på Mobiletuts + i januar. Denne versjonen har blitt betydelig oppdatert som følge av endringer i iCarousel-biblioteket.
Nå, nesten fem år senere, er den samme meldingen sant. Det er magi i måten vi kan bla gjennom vår musikk i dag, og som utviklere kan vi bringe den samme opplevelsen til brukerne våre for alle slags data, ikke bare sanger og album.
For de som allerede er kjent med å utvikle for iOS, kan det være skremmende å vurdere antall faktorer som er involvert for å implementere noe som tilsynelatende enkelt som Cover Flow: animasjon og jevn rulling, optimalisering av bildehåndtering, oppfanging av berøringsinteraksjoner osv..
Heldigvis skjønt, Nick Lockwood fra Charcoal Design har opprettet en klasse kalt "iCarousel" som håndterer all den tunge løftingen for oss, og han har sluppet den som et åpen kildekodeprosjekt. Dette betyr at vi raskt og effektivt kan komme ned til resten av vår utvikling, mens du fortsatt nyter svært interaktiv, berøringsløs Cover Flow.
En av de flotte funksjonene i iCarousel er valget av bruksklare skjermtyper:
Det er også mulig å tilpasse disse stilene for å dekke dine behov, men det kan være en egen opplæring eller Quick Tip i seg selv (gi oss beskjed i kommentarene hvis du er interessert!).
iCarousel er vert på github, noe som betyr at du kan få det enten som en git klone, eller som en .zip nedlasting. Du finner den på https://github.com/nicklockwood/iCarousel, så fortsett og få deg en lokal kopi av iCarousel.
Dette prosjektet innebærer bruk av noen bilder også, så du vil laste ned kildefilene øverst på denne siden hvis du ikke allerede har det. I den. Zip-filen finnes det en katalog som heter "Dyr", som har syv forskjellige dyrbilder (disse bildene kommer fra Joy Tek på Flickr - http://www.flickr.com/photos/joytek/collections/72157627168953450/) - og har blitt endret for denne opplæringen).
Nå, med alle nødvendige filer lastet ned, er vi klare til å lage en fantastisk karusell!
Vi starter med å legge til iCarousel-klassefilene, deretter bildefilene, og til slutt sørger vi for å begrense appen til liggende modus uten en synlig statuslinje (iCarousel vil fungere i stående modus, men vi beholder det enkelt ved bare å jobbe med landskap for nå). Men før alt det, la oss få et nytt prosjekt påbegynt!
Vi trenger bare et enkelt vindu for dette prosjektet, så et "Single View Application" vil bare være fint for nå. Jeg ringer prosjektet "Carousel", og jeg bruker automatisk referansetelling (ARC), så det er viktig å ikke glemme det alternativet når du oppretter prosjektet.
Når prosjektet vårt er opprettet, kan vi legge til iCarousel-klassefilene ved å fange "iCarousel" -katalogen og dra den inn i prosjektet. (Det er bare to filer i iCarousel-katalogen: "iCarousel.h" og "iCarousel.m"). Merk: Hvis du drar hele katalogen i prosjektet ditt, må du sørge for at du "Lag grupper for eventuelle mapper".
iCarousel er avhengig av "QuartzCore" -rammen, og støtter fullt ut ARC, så vi har noen få enkle oppgaver å gjøre for å sikre at vår nylig tilførte klasse vil jobbe med vårt prosjekt.
For å legge til QuartzCore-rammeverket, klikk på prosjektfilen i navigator til venstre (det blir prosjektnavnet, min sier "iCarousel 1target, iPhone OS ..."). Øverst på skjermen har du nå noen målbyggingsinnstillinger. Klikk på "Build Phases" og utvid deretter "Link Binær Med Biblioteker" og klikk på "+" knappen nederst til venstre. Et vindu vil dukke opp og du kan finne vårt rammeverk ved å skrive "QuartzCore" i søkeboksen. Klikk på "Legg til" og du er ferdig!
Vi skal deaktivere statuslinjen for denne appen, så gå videre til "Info" -fanen for målet vårt og under "Egendefinerte iOS Målegenskaper" legger vi til en ny rad (Høyreklikk ->; Legg til rad ) og sett teksten i "Nøkkel" -feltet til "Statuslinjen er opprinnelig skjult". Deretter setter du "Verdi" til "JA".
Nå, før vi går inn i den faktiske implementeringen, ønsker vi å sette orienteringen til Appen vår til landskapet, og sørg for at den ikke går inn i stående modus (minst for nå). Vi går bare til "Sammendrag" -fanen for målet vårt og sørger for at alternativene "Landskap venstre" og "Landskap rett" er de eneste som er valgt under delen "Støttede enhetretninger".
Deretter kan vi gå inn i vår hovedvisningskontroller implementeringsfil ("MTViewController.m" for meg), og endre metoden:
- (BOOL) shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation) interfaceOrientation // Return YES for støttede retninger tilbake (interfaceOrientation == UIInterfaceOrientationLandscapeLeft || interfaceOrientation == UIInterfaceOrientationLandscapeRight);
Det siste vi må gjøre for nå er å få våre bilder av dyrehagen i prosjektet vårt. Jeg har inkludert syv slike bilder i kildefilene for deg å bruke. Bare ta dem fra hvor du unzipped kildefiler katalogen, og dra dem inn i prosjektet vårt (du kan også bare dra hele katalogen "Dyr", som inkluderer alle bildene). Og nå er vi klare til å rulle!
Vår karusell skal vise noen bilder av forskjellige dyrehage, og under det nåværende bildet viser vi dyrenavnet og hva slags mat de liker å spise. I et produksjonsmiljø bør du ha noen virkelige data å jobbe med, men for vårt eksempel skal vi bare sette opp noen NSArrays med dummy data.
Vår første matrise vil være en liste over bilde navnene slik at vi kan finne og laste dem inn i karusellen. Vi kaller denne listen "bilder".
Den andre gruppen vil ha en liste over navn som samsvarer med bildene våre, samt en liten setning som følger dette formatet: [dyrnavn] Spis: [mat]. For eksempel, med bjørner, vil vi si: "Bears Eat: Honey". Vi kaller dette arrayet "beskrivelser".
Vi vil sette opp disse NSArrays i hovedoversikten kontroller header fil ("MTViewController.h" for meg).
@property (strong, nonatomic) NSMutableArray * dyr; @property (strong, nonatomic) NSMutableArray * beskrivelser;
Og, selvfølgelig, syntetiser dem i vår implementeringsfil:
@synthesize dyr, beskrivelser;
Vi skal gjøre oppsettet i "initWithNibName" -metoden, så la oss sette bildetavnene og matbeskrivelsene i deres arrays nå.
- (id) initWithNibName: (NSString *) nibNameOrNil bundle: (NSBundle *) nibBundleOrNil self = [super initWithNibName: nibNameOrNil bundle: nibBundleOrNil]; hvis (selv) // sette opp karuselldatapakning = NO; self.animals = [NSMutableArray arrayWithObjects: @ "Bear.png", @ "Zebra.png", @ "Tiger.png", @ "Goat.png", @ "Birds.png", @ "Giraffe.png" @ "Chimp.png", null); self.descriptions = [NSMutableArray arrayWithObjects: @ "Bears Eat: Honey", @ "Zebras Eat: Grass", @ "Tigers Eat: Meat", @ "Goats Eat: Weeds", @ "Birds Eat: Seeds" Giraffer spiser: Trees ", @" Chimps Eat: Bananas ", null]; returner selv;
Du vil legge merke til at det også er en eiendom "wrap", som vi har satt til "NEI". Dette er en iCarousel-egenskap, og det vil sikre at vår karusell ikke ruller inn i en uendelig sløyfe gjennom bildene våre, men i stedet stopper den å rulle etter de første og siste elementene med en fin gummibånd-animasjon. Vi vil se nærmere på det senere.
Nå som vi har noen data i appen vår, må vi implementere den faktiske iCarousel-klassen. iCarousel fungerer som UITables, med "data source" og "delegate" protokoller. Vi implementerer disse ved først å importere iCarousel-klassen i vår overskrift.
#import "iCarousel.h"
Deretter legger vi til følgende bit kode etter "UIViewController" -delen av header-grensesnittdeklarasjonen:
Accentsconagua
