Bedre kode: Lag en enkel personsøkerapp

For denne opplæringen vil vi lage en enkel app som demonstrerer bruken av UIPageControl, som er veldig nyttig for å sveipe gjennom bilder i en samling.

Bygg appen

Lag et enkeltprogram med storyboards og ARC for iPhone (& iPad).

Importer fem bilder eller ditt valg med 250 x 250 piksler.

Bli for vane å organisere filene dine, for etter hvert som prosjektene dine blir større, vil du importere flere og flere forskjellige typer filer, noe som gjør det forvirrende hvis de ikke er ordentlig organisert.

Normal 0 falsk falsk falsk EN-USA JA X-NONE Legg til UIPageControl

OK, la oss la bildene ligge for nå og fokusere på kontrollen. Finn filen MainStoryboard_iPhone.storyboard og dra en UIPageControl fra Object Library til scenen:

Legg merke til at de tre prikkene på sidekontrollen er hvite, så de er vanskelige å visualisere. I attributtsinspektøren endrer fargetone til blått og den gjeldende siden til oransje. Kul! La oss nå gå videre til koding.

Code pageChanged method og koble den til. I din ViewController.m implementerer du følgende metode, som vi kobler til sidekontrollen senere.

 - (IBAction) endringsside: (id) avsender { 
 NSLog (@ "pageControl position% d", self.pageControl currentPage); 
 } 

Denne metoden vil bli kalt når sidekontrollen endrer "side". Så vi trenger å gjøre to ting til.

Start variablene som brukes i den metoden i viewDidLoad. Vi gjør det ved å implementere denne koden. Legg merke til at vi har en NSArray-visning som du trenger for å opprette en ivar for så vel som fem UIImageViews. Du kan gjøre det i den private implementeringen av grensesnittet inne i .m-filen.

 - (ugyldig) viewDidLoad { 
 super viewDidLoad; 
 // Sett opp visningsoppstillingen med 5 UIImageViews 
 views = NSArray alloc initWithObjects: @ "1", @ "2", @ "3", @ "4", @ "5", nil; 
 // Sett sideControls antall sider på 5 
 self.pageControl.numberOfPages = visninger teller; 
 // Sett pageControls gjeldende side til 0 
 self.pageControl.currentPage = 0; 
 currentViewIndex = 0; 
 // Samtaleendring Side hver gang verdien på sidekontrollen endres 
 self.pageControl addTarget: self action: @selector (ChangePage :) forControlEvents: UIControlEventValueChanged; 
 } 

Den private implementeringen av grensesnittet i .m-filen vil være:

 @interface SecondViewController () { 
 UIImageView * firstView; 
 UIImageView * secondView; 
 UIImageView * ThirdView; 
 UIImageView * fjerde visning; 
 UIImageView * 5thView; 
 NSArray * -visninger; 
 } 
 @ eiendom (ikke-atomisk, sterk) IBOutlet UIPageControl * pageControl; 
 - (IBAction) endringsside: (id) avsender; 

Merk at vi også implementerte en eiendom for UIPageControl og ChangePage-metodedeklarasjonen.

Koble sidekontrollen til IBAction

La oss nå koble IBAction og stikkontakt til sidekontrollen. Gå til storyboard-filen og velg scenen slik at den blir uthevet i blått. Åpne Connections Inspector og koble sideControl-uttaket til sidekontrollen i scenen, så vel som ChangePage-metoden ved å dra fra Connections Inspector til scenen. I begge tilfeller drar du TIL sidekontrollen inne i scenen. Når det gjelder ChangePage-metoden, når du drar til sidekontrollen, vises det en popup som du velger TouchUpInside fra. La oss sjekke at alt er ordentlig tilkoblet.

Bruk NSLogs med det første. NSLog er din venn. Bruk den til å finne ut hvilke metoder du er i, hvilke metoder som har kjørt og når en milepæl er nådd. Forsikre deg om at du kjører iPhone Simulator og ikke iPad, fordi vi hittil bare har jobbet med iPhone storyboard. Du må deretter duplisere storyboardarbeidet for iPad.

Hver gang du ringer til ChangePage-metoden, logger vi den aktuelle siden-egenskapen til sidenControl, som forteller oss hvor vi befinner oss. Legg merke til at den første plasseringen faktisk er 0, som i alle matriser.

Legg til bilder på UIImageView-skjermen. Nå som vi har sett hvordan en UIPageControl fungerer, la oss få den til å gjøre noe interessant. Vi ønsker å lage en bildevisning på skjermen når appen lanseres. Så la oss lage den ved å legge til en ny metode.

 - (void) createUIViews { 
 UIImage * image1 = UIImage imageNames: @ "beach.png"; 
 firstView = UIImageView alloc initWithImage: image1; 
 firstView.backgroundColor = UIColor greyColor; 
 firstView.tag = 1; 
 CGRect newFrame1 = firstView.frame; 
 newFrame1.origin.x = (CGRectGetWidth (self.view.frame) -CGRectGetWidth (firstView.frame)) / 2; 
 firstView.frame = newFrame1; 
 self.view addSubview: firstView; // lagt ONSCREEN 
 } 

Vi tilordner strandbildet til firstView og tagger det som 1. Så lager vi en variabel kalt newFrame1 og setter den til rammen til den firstView. Vi angir deretter x (horisontal) opprinnelse til den nyeFrame1 ved å følge denne prosedyren:

Vi tar forskjellen mellom skjermen og bildet (som vil si hvilket tomrom det er igjen på skjermen etter at du har plassert bildet) og deler det med halvparten. Vi deler det med halvparten fordi vi på den måten fordeler det tomme mellomrommet mellom venstre og høyre side av bildet.

Til slutt tilordner vi den newFrame1 til rammen til firstView og legger den til på skjermen. Hvis du kjører appen nå, vil du se strandbildet vises midt på skjermen. For å få det til å se litt bedre ut, kan vi legge til 10 piksler med hvit plass fra toppen ved å sette newFrame1.origin.y til 10.

La oss nå legge til de andre bildevisningene fra skjermen til høyre. Legg til disse linjene i createUIViews-metoden.

 UIImage * image2 = UIImage imageNames: @ "beach2.jpeg"; 
 secondView = UIImageView alloc initWithImage: image2; 
 secondView.backgroundColor = UIColor greyColor; 
 secondView.tag = 2; 
 CGRect newFrame2 = secondView.frame; 
 newFrame2.origin.x = CGRectGetWidth (self.view.frame); 
 newFrame2.origin.y = 10; 
 secondView.frame = newFrame2; 
 self.view addSubview: secondView; 
 UIImage * image3 = UIImage imageNames: @ "trees.jpg"; 
 ThirdView = UIImageView alloc initWithImage: image3; 
 ThirdView.backgroundColor = UIColor greyColor; 
 ThirdView.tag = 3; 
 CGRect newFrame3 = ThirdView.frame; 
 newFrame3.origin.x = CGRectGetWidth (self.view.frame); 
 newFrame3.origin.y = 10; 
 ThirdView.frame = newFrame3; 
 self.view addSubview: ThirdView; 
 UIImage * image4 = UIImage imageNames: @ "flowers.jpg"; 
 quarterView = UIImageView alloc initWithImage: image4; 
 quarterView.backgroundColor = UIColor greyColor; 
 fjerde visning.tag = 4; 
 CGRect newFrame4 = quarterView.frame; 
 newFrame4.origin.x = CGRectGetWidth (self.view.frame); 
 newFrame4.origin.y = 10; 
 quarterView.frame = newFrame4; 
 self.view addSubview: quarterView; 
 UIImage * image5 = UIImage imageNames: @ "mountain.jpg"; 
 fiveView = UIImageView alloc initWithImage: image5; 
 5thView.backgroundColor = UIColor greyColor; 
 fiveView.tag = 5; 
 CGRect newFrame5 = 5thView.frame; 
 newFrame5.origin.x = CGRectGetWidth (self.view.frame); 
 newFrame5.origin.y = 10; 
 5thView.frame = newFrame5; 
 self.view addSubview: 5thView; 

Hvis du kjører appen igjen, vil du ikke merke en forskjell. Dette er fordi de nye fire bildevisningene er utenfor skjermen til høyre.

Den siste berøringen er å gjøre endringssiden-metoden til å flytte det gjeldende bildet til venstre og hente inn den nye visningen fra høyre. Dette er en personlig preferanse som du kanskje har sett i tidligere innlegg, men jeg tar baby-skritt mot et endelig mål.

La oss først bytte ut NSArray init-linjen til denne:

 views = NSArray alloc initWithObjects: firstView, secondView, ThirdView, quarterView, 5thView, nil; 

Jeg endret min ChangePage-metode slik:

 - (IBAction) endringsside: (id) avsender { 
 NSLog (@ "pageControl position% d", self.pageControl currentPage); 
 // Ring for å fjerne gjeldende visning til venstre 
 // Ring for å legge til den nye visningen fra høyre 
 } 

Dette gir meg en sjanse til å tenke på arbeidsflyten som er involvert. Jeg har forestillinger merket som 1-5, og jeg har sidekontrollsider nummerert fra 0-4. Den første siden er alltid 0. Når brukeren sveiper, vil han flytte siden fra 0 til 1. Vi må fjerne view = page + 1 og erstatte den med view page + 2. La oss teste dette.

 - (IBAction) endringsside: (id) avsender { 
 NSLog (@ "pageControl position% d", self.pageControl currentPage); 
 // Ring for å fjerne gjeldende visning til venstre 
 // når side = 0 
 // visning = 1 
 // Ring for å legge til den nye visningen fra høyre 
 // når side = 1 
 // legg til visning = 2 
 } 

Så la oss få det første til å skje.

 - (IBAction) endringsside: (id) avsender { 
 // Ring for å fjerne gjeldende visning til venstre 
 UIImageView * imageViewToRemove = (UIImageView *) self.view viewWithTag: self.pageControl currentPage; 
 NSLog (@ "imageRemoved% d", self.pageControl currentPage); 
 CGRect oldFrame = imageViewToRemove.frame; 
 oldFrame.origin.x = -CGRectGetWidth (self.view.frame); 
 imageViewToRemove.frame = oldFrame; 
 } 

Først får vi utsikten vi ønsker. Så lager vi en referanse til rammen. Senere satte vi referanserammens opprinnelse til den negative verdien av skjermbildet (self.view). Dette er litt tøft å forstå, men vi lager i utgangspunktet den referanserammens opprinnelse .x starter med en hel skjermbredde av til venstre. Dette betyr at det er utenfor skjermen til venstre etter skjermens størrelse i piksler. Til slutt gjør vi vår imageViewToRemove ramme lik den verdien, og flytter den effektivt til venstre.

Forsøk å forstå dette før du går videre. Skjermen er opprettet ved opprinnelsen øverst i venstre hjørne, (0, 0). Den beveger seg nedover mot (0, 480) nederst i venstre hjørne. Den vokser til slutt bredere fra venstre mot høyre mot (320.480).

Bygg og kjør appen og se det originale bildet forsvinne. Selv om dette er effektivt, er det langt fra kult. Dette er noe en Android-app ville sett ut. Men vi er iOS-utviklere. La oss gjøre det kult! Så erstatt den siste linjen i koden over med denne:

 UIView animateWithDuration: 1.0 
 animasjoner: ^ { 
 imageViewToRemove.frame = oldFrame; 
 }; 

Nå, bygg og kjør appen din, og sveip! Kult he! Vi lager faktisk en animasjon av den samme prosessen og får den til å vare ett sekund. La oss gjøre den andre halvparten. Den andre halvparten ringer for å legge til det nye imageView fra høyre. Tilbakestill ganske enkelt rammen til midten av skjermens selvvisning ved å legge denne koden til ovenstående:

 // Ring for å legge til den nye visningen fra høyre 
 UIImageView * imageViewToAdd = (UIImageView *) self.view viewWithTag: self.pageControl currentPage +1; 
 NSLog (@ "imageAdded% d", self.pageControl currentPage +1); 
 CGRect newFrame = imageViewToRemove.frame; 
 newFrame.origin.x = CGRectGetMidX (self.view.frame) / 4; 
 UIView animateWithDuration: 1.0 
 animasjoner: ^ { 
 imageViewToAdd.frame = newFrame; 
 }; 

OK nå har vi faktisk en bildevisning flyttet til venstre og en ny sklir inn fra høyre. Legg merke til at fordi sidenControl.currentPage starter på 0, må vi endre den for å legge til den nåværende siden + 1.

Den andre retningen

Så det fungerer bra fra venstre mot høyre. Problemet er i den andre retningen, når nåværende side må reduseres med 1 i stedet for å øke med 1. Vi trenger en måte å si om den nåværende siden ble sveipet til venstre eller høyre. Det er en kul måte å gjøre dette med UIGestures, men vi vil dekke det i den respektive opplæringen. Vi kommer til å bruke noen gode, gamle motematematikk for å løse denne. Vi vil i utgangspunktet anta å gjøre en test slik at hvis den nye strømsiden er større, ble den sveipet til venstre og omvendt.

Så modifiser ChangePage-metoden din slik at den ser slik ut:

 - (IBAction) endringsside: (id) avsender { 
 if (self.pageControl currentPage> currentViewIndex) { 
 NSLog (@ "pageControl =% d & currentViewIndex =% d", self.pageControl currentPage, currentViewIndex); 
 currentViewIndex ++; 
 // Ring for å fjerne gjeldende visning til venstre 
 UIImageView * imageViewToRemove = (UIImageView *) self.view viewWithTag: self.pageControl currentPage; 
 NSLog (@ "imageRemoved% d", self.pageControl currentPage); 
 CGRect oldFrame = imageViewToRemove.frame; 
 oldFrame.origin.x = -CGRectGetWidth (self.view.frame); 
 UIView animateWithDuration: 1.0 
 animasjoner: ^ { 
 imageViewToRemove.frame = oldFrame; 
 }; 
 // Ring for å legge til den nye visningen fra høyre 
 UIImageView * imageViewToAdd = (UIImageView *) self.view viewWithTag: self.pageControl currentPage +1; 
 NSLog (@ "imageAdded% d", self.pageControl currentPage +1); 
 CGRect newFrame = imageViewToRemove.frame; 
 newFrame.origin.x = CGRectGetMidX (self.view.frame) / 4; 
 UIView animateWithDuration: 1.0 
 animasjoner: ^ { 
 imageViewToAdd.frame = newFrame; 
 }; 
 }} 

Det eneste som virkelig er nytt her, er "if" som inneholder originalkoden ovenfor. Vel, ja, og den nåværendeViewIndex. Dette er ikke mer enn en variabel vi la til for å holde oversikt over den gamle siden. Variabelen currentViewIndex starter ganske enkelt på 0 (som angitt i viewDidLoad) og økes med en hver gang pageControls gjeldende sideegenskaper økes. Nå vil du se hvorfor jeg la til alle de NSLogene. Disse NSLogene gir deg en ide om hva som skjer. Både currentViewIndex og pageControl.currentPage starter på 0. Imidlertid økes currentViewIndex bare av en hvis currentPage> currentViewIndex som det alltid er så lenge brukeren sveiper til venstre.

Nå må vi fortelle appen om å gjøre det motsatte hvis brukeren sveiper riktig. Så i utgangspunktet, på et tidspunkt, vil pageControl.currentPage reduseres. På dette tidspunktet vil currentViewIndex som har forblitt den samme være større. Vi kan dra nytte av og bruke en ELSE-test for å snu prosessen. Vi ender opp med noe slikt for den andre blokken i endringssiden:

 annet hvis (self.pageControl currentPage <currentViewIndex) { 
 NSLog (@ "pageControl =% d & currentViewIndex =% d", self.pageControl currentPage, currentViewIndex); 
 currentViewIndex -; 
 // Ring for å fjerne gjeldende visning til høyre 
 UIImageView * imageViewToRemove = (UIImageView *) self.view viewWithTag: self.pageControl currentPage +2; 
 NSLog (@ "imageRemoved% d", self.pageControl currentPage +2); 
 CGRect oldFrame = imageViewToRemove.frame; 
 oldFrame.origin.x = CGRectGetWidth (self.view.frame); 
 UIView animateWithDuration: 1.0 
 animasjoner: ^ { 
 imageViewToRemove.frame = oldFrame; 
 }; 
 // Ring for å legge til den nye visningen fra venstre 
 UIImageView * imageViewToAdd = (UIImageView *) self.view viewWithTag: self.pageControl currentPage +1; 
 NSLog (@ "imageAdded% d", self.pageControl currentPage +1); 
 CGRect newFrame = imageViewToAdd.frame; 
 newFrame.origin.x = CGRectGetMidX (self.view.frame) / 4; 
 UIView animateWithDuration: 1.0 
 animasjoner: ^ { 
 imageViewToAdd.frame = newFrame; 
 }; 
 } 

Som du ser, endret to ting seg; (a) nå som situasjonen er snudd på grunn av at currentPage gikk ned i stedet for å gå opp, reduseres currentViewIndex med en bare etter if / else-testen og (b) denne gangen blir det gamle imageView flyttet av i motsatt retning.

Ikke vær sjenert for å tegne den ut på papiret for å se hvordan det fungerer. Jeg måtte gjøre det for å kode det. UIGestures er mye enklere som vi vil se senere.

Jeg håper at du likte det, og så ses snart!

Les også:

  • Bedre kode: Få iOS-appen din i iCloud
  • Generer automatisk ikoner for iOS-apper
  • Bedre kode: Utvikle universelle apper for iOS-enheter

© Copyright 2021 | pepebotifarra.com