iOS SDK Opprette en fantastisk karusell

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 eller knapper.

Senere endringer i teknikker og programvare

Visse aspekter av applikasjoner eller teknikker som brukes i denne opplæringen, har endret seg siden den ble opprinnelig publisert. Dette kan gjøre det litt vanskelig å følge med. Vi anbefaler å se på disse nyere opplæringsprogrammene på samme emne:

Lag en fantastisk karusell, versjon 2.0

Den 9. januar 2007 avslørte Steve Jobs iPhone til et ivrig publikum. I sin presentasjon demonstrerte han mange av funksjonene som ville fortsette å skape en helt ny måte å samhandle med teknologi og informasjon. En av de mange funksjonene ble presentert av en enkel og kraftig melding - "berør musikken din". Da han sto der oppe, med Bob Dylan å spille over høyttalerne, Steve Jobs "tømt gjennom" er musikkalbum uten problemer, og at meldingen var klar.

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 skapt en klasse kalt "iCarousel" som håndterer all den tunge løftingen for oss, og han har sluppet den som et åpen kildekode-prosjekt. Dette betyr at vi raskt og effektivt kan komme seg til resten av vår utvikling, mens du fortsatt nyter svært interaktiv, berøringsvennlig Cover Flow.

En av de flotte funksjonene i iCarousel er valget av bruksklare skjermtyper:

iCarouselTypeLinear
iCarouselTypeRotary
iCarouselTypeInvertedRotary
iCarouselTypeCylinder
iCarouselTypeInvertedCylinder
iCarouselTypeCoverFlow
iCarouselTypeCoverflow2

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).

Trinn 1: Få iCarousel og sette opp

iCarousel er vert på github, noe som betyr at du kan få det enten som en git klone, eller som en .zip nedlasting. Du kan finne den på https://github.com/nicklockwood/iCarousel, så fortsett, og følg din foretrukne metode, 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, vil vi sørge for å begrense appen til liggende modus uten en synlig statuslinje. (iCarousel vil fungere i portrettmodus, men vi vil holde det enkelt ved bare å jobbe med landskap for nå.) Men før alt det, la oss få et nytt prosjekt startet.

Vi trenger bare et enkelt vindu for dette prosjektet, så det er bare et "Single View Application". Jeg skal ringe prosjektet "Carousel" og jeg bruker automatisk referansetelling, så det er viktig å ikke glemme det alternativet.

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, må du sørge for at du" Opprett grupper for eventuelle mapper ".

iCarousel er avhengig av "QuartzCore" -rammen, og støtter ikke for øyeblikket 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 navigeringsnavigatoren (det blir prosjektnavnet ditt, min sier "iCarousel 1target, iPhone OS ..."). Øverst på skjermen har du nå et mål bygg innstillinger. 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 rammen ved å skrive "QuartzCore" i søkeboksen. Klikk på "Legg til" og du er ferdig.

Deretter setter vi et kompilert flagg som vil gi et unntak for LLVM-kompilatoren for iCarousel. Gå til delen "Kompilere kilder" på samme side, og vi kommer til "iCarousel" -oppføringen. Dobbeltklikk på den raden, og sett "-fno-objc-arc" (uten anførselstegn) i popover som kommer opp.

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 Row), 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ørg for at alternativene "Landskap venstre" og "Landskap høyre" er de eneste som er valgt under delen "Støttede enhetretninger"..

Deretter kan vi gå inn i hovedbildekontrollens 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 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!

Trinn 2: Sette opp våre data og karusell

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;

Siden vi bruker en .xib i dette eksempelet, vil vi gjøre oppsettet vårt i "initWithNibName" -metoden. La oss sette bildene 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:

Mens vi er her, kan vi også legge til vår "wrap" -egenskap, som vi angir i vår "initWithNibName" -metode.

 @property (nonatomic) BOOL wrap;

Nå, med vår topptekst klar, må vi koble opp UIView og UILabel som vi må vise vår karusell og beskrivelsestekst. Så åpner vi vår .xib-fil ("MTViewController.xib" for meg), og legger til våre nye elementer.

For iCarousel trenger vi en UIView. Jeg setter bakgrunnen til min til "Lead", slik at det blir fint og mørkt bak bildene.

Nå, for at iCarousel skal gjenkjenne denne UIView som en "iCarousel" -underklasse, går vi til "identitetsinspektøren" og endrer "Class" til "iCarousel" i delen "Custom Class". Hvis vi høyreklikker På vår nye UIView kan vi dra våre "dataSource" og "delegate" alternativer til "File Owner". Vi må også sette "Referencing Outlet" for vår karusellvisning til egenskapen "karusell" i "Filens eier". Vi er nesten ferdige med vår iCarousel-visning, men først jobber vi på vår etikett og deretter Vi hekker begge nye visningene opp til vår "MTViewController" -klasse.

Så jeg skal sette bakgrunnen for hovedvisningen til "Tungsten", som vil gi et lysere grått område for bakgrunnen til etiketten som vil vise beskrivelsesteksten til det valgte dyret. Og så, selvfølgelig, jeg Jeg drar over en UILabel og senterer den under min iCarousel UIView.

Med alt på plass kan jeg nå åpne "Assistent Editor", og enkelt høyreklikke og dra mine nye visninger, først iCarousel-visningen like under "beskrivelser" -armen i hovedbildehodefilen min, og da skal jeg gjøre det samme med min UILabel. Jeg kalt karusellen min "karusell", og min UILabel "label".

Og det avsluttes vårt arbeid med headerfilen, så vel som .xib-filen. I sammendraget importerte vi iCarousel-klassen, la iCarousel dataSource og delegere protokoller, og vi opprettet egenskapene våre for karusellen, etiketten og arrays.

Trinn 3: Gjør alt arbeidet

ICarousel-protokollen støtter en rekke metoder som omhandler alle karusellens visuelle og interaktive elementer. Du finner en fullstendig henvisning til tilgjengelige metoder, egenskaper, etc ... på iCarousel github siden her: https://github.com/nicklockwood/iCarousel. For nå skjønner vi bare å få våre arrays satt opp som dataene for karusellen, samt å få oppførelsen for karusellen konfigurert slik vi ønsker det.

For dette eksempelet er disse iCarousel-metodene som vi skal bruke:

 - (NSUInteger) nummerOfItemsInCarousel: (iCarousel *) karusell retur [dyrtall];

Vi angir totalt antall elementer som skal telle elementer i vårt "dyr" -array.

 - (NSUInteger) numberOfVisibleItemsInCarousel: (iCarousel *) karusell // begrense antall elementer visninger lastet samtidig (av ytelsesmessige grunner) returnere 7;

For iPhone, vil vi bare vise opptil 7 elementer om gangen. Dette er ikke et absolutt antall, men vil være bra for ytelse.

 - (UIView *) karusell: (iCarousel *) karusell viewForItemAtIndex: (NSUInteger) indeks // opprett en nummerert visning UIView * view = [[UIImageView alloc] initWithImage: [UIImage imageNamed: [animals objectAtIndex: index]]]; returnere visning;

Dette er mye som å jobbe med den nåværende cellen i en UITableView. Her setter vi innholdet i hvert karusellelement som et UIView med en UIImage. Ullmage vil laste .png for det tilsvarende dyret i "dyr" -arrangementet.

 - (NSUInteger) numberOfPlaceholdersInCarousel: (iCarousel *) karusell // note: plassholder visninger vises bare på noen karuseller hvis innpakning er deaktivert returnere 0;

Plassholdere er bokførte elementer i begynnelsen og slutten av vår gruppe bilder. Vi vil ikke ha disse, så vi kommer tilbake 0. For nysgjerrighets skyld, vær så snill å endre det for å returnere 1, men for vårt eksempel ønsker vi å forlate det som det er.

 - (CGFloat) carouselItemWidth: (iCarousel *) karusell // vanligvis bør dette være litt bredere enn objektvisningsvisningen 240;

Ganske selvforklarende, dette er hvor mye plass karusellen vil gi til hvert element. Våre bilder er 220px brede, så jeg har satt dette til 240 for å gi litt avstand.

 - (BOOL) karusellShouldWrap: (iCarousel *) karusell // wrap all carousels return wrap;

Dette er satt til "nei" i vår "initiWithNibName" -metode, og vil forhindre at elementene våre ruller uendelig.

 - (void) carouselDidEndScrollingAnimation: (iCarousel *) aCarousel [label setText: [NSString stringWithFormat: @ "% @", [beskrivelser objectAtIndex: aCarousel.currentItemIndex]]];

Og til slutt, dette er metoden som vil løpe når vi stopper på et gitt element. Vi stiller teksten til vår UILable til innholdet i vår "beskrivelser" -gruppe i den tilsvarende indeksen for vårt nåværende element. Og det er det for iCarousel-metodene.

Det siste vi vil gjøre nå, før du kjører vår app, er å angi typen karusellvisningsstil som vi vil ha. Vi kan gjøre dette i "(void) viewDidLoad" -metoden ved å sette karusellen.type til ønsket stil.

 - (void) viewDidLoad carousel.type = iCarouselTypeCoverFlow2; [super viewDidLoad];

Du kan se en komplett liste over stiler i begynnelsen av denne artikkelen, eller på iCarousel github-siden.

Og nå, fortsett å bygge og kjøre appen din, og du bør se en rullbar liste over dyrebilder med beskrivelser under. Jeg oppfordrer deg sterkt til å leke med de forskjellige stilene og egenskapene til karusellen, og kanskje kan vi til og med se på interaktivitet med karusellelementer i fremtiden.

Kode