Share
UIGestureRecognizer-klassen gjør det enkelt å oppdage og svare på komplekse bevegelser i et iOS SDK-program. Denne opplæringen vil lære deg hvordan du bruker UIGestureRecognizer-klassen ved å demonstrere hvordan du bygger et enkelt fotogalleri bibliotek.
UIGestureRecognizer har vært tilgjengelig siden iOS 3.2. Du kan imidlertid bli overrasket over å finne ut at du sjelden vil jobbe med denne klassen direkte. I stedet vil du implementere en av flere underklasser designet for å svare på bestemte berøringsbevisninger. Følgende UIGestureRecognizer-underklasser leveres med iOS SDK:
I denne opplæringen skal vi lage et enkelt fotogalleri. Først vil du se en liste med produkter fra Apple. Hvis du velger en, vil du se et bilde av det produktet. Du kan zoome, rotere, flytte og tilbakestille det bildet til standardstatus med bevegelser.
I tillegg til å bruke de forhåndsdefinerte gestene som er oppført ovenfor, kan du også underklasse UIGestureRecognizer selv, slik at du kan opprette og oppdage dine egne tilpassede bevegelser, som et merke eller en sirkel. Vi vil ikke gjøre det i denne opplæringen, men du finner mer informasjon om det i Apple-dokumentasjonen.
Åpne Xcode og velg "Opprett et nytt Xcode-prosjekt". Velg et Master-Detail-program og klikk på Neste. Skriv inn et navn på prosjektet ditt, jeg ringte min "Photo Gallery". Skriv inn din firmaidentifikator og kontroller at du valgte iPhone for Enhetsfamilie, fordi vi skal lage en iPhone-app. Kontroller også at alle avmerkingsboksene er valgt, bortsett fra avmerkingsboksen Bruk kjerne data. Som du kan se, bruker vi de nye iOS 5 Storyboard og Automatic Reference Counting (ARC) -funksjonene i denne opplæringen. Hvis du er ferdig, klikker du Neste. Velg et sted for å lagre prosjektet ditt og klikk på Opprett.
Fordi vi bruker storyboards i stedet for nib-filer i denne opplæringen, vil du ikke se MainWindow.xib, men en fil som heter MainStoryboard.storyboard. Når du åpner denne filen, vil du se hele brukergrensesnittet, som inneholder en navigasjonskontroll og to visningskontrollere.
Hvis du velger segue (pil) mellom de to visningsregulatorene, vil du se at tabellvisningscellen lyser. Dette betyr at den første visningskontrolleren vil skyve den andre visningskontrollen. Hvis du velger tabellvisningen, må vi ikke ringe pushViewController: lenger.
Ta også en titt på MasterViewController.m-filen. Du vil se at det er nei dealloc metode. Dette skyldes at vi bruker ARC, og ARC håndterer minnesrelaterte metoder som beholde, utgivelse, autoutgivelses og dealloc for oss.
Nå Bygg og Kjør prosjektet. Du bør se en navigasjonsstyring med tittelen Master og en celle som heter Detail. Når du velger denne cellen, vil du bli presset til den andre visningskontrollen som viser litt tekst.
Åpne MasterViewController.h og modifiser koden for å lese som følger:
#importere#import "DetailViewController.h" @interface MasterViewController: UITableViewController NSArray * list; @property (strong, nonatomic) NSArray * liste; @slutt
Her importerer vi DetailViewController-klassen og lager en liste med liste som heter.
Gå nå til MasterViewController.m og legg til følgende linjer under @implementation:
@synthesize liste;
Rull nå ned til viewDidLoad metode og endre koden for å lese som følger:
- (void) viewDidLoad [super viewDidLoad]; self.title = @ "Produkter"; NSArray * listArray = [[NSArray alloker] initWithObjects: @ "iPhone", @ "iPad", @ "iMac", @ "MacBook Air", null); self.list = listArray;
Her setter vi tittelen på navigeringslinjen til "produkter" og oppretter en dummy array med Apple-produkter for å fylle vår liste array. Vi trenger ikke å slippe listenArray, fordi ARC vil gjøre det for oss.
Gå nå til shouldAutorotateToInterfaceOrientation: metode og endre koden for å lese som følger, så vår søknad vil bare fungere i portrett:
- (BOOL) shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation) interfaceOrientation return (interfaceOrientation == UIInterfaceOrientationPortrait);
Legg til følgende tabellvisning datakilde metoder under shouldAutorotateToInterfaceOrientation: metode:
- (NSInteger) numberOfSectionsInTableView: (UITableView *) tableView return 1; - (NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) seksjon return [list count] ;; - (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath statisk NSString * CellIdentifier = @ "Cell"; UITableViewCell * celle = [tableView dequeueReusableCellWithIdentifier: CellIdentifier]; cell.textLabel.text = [list objectAtIndex: [indexPath row]]; returcelle;
Her setter vi antall seksjoner av tabellvisningen til 1 og antall rader av den delen til antallet av objekter i listen vårt. Vi setter teksten til cellene i tabellvisningen til produktene i vår liste array.
Til slutt legger du til følgende metode i tabellvisningsmetoder:
- (void) prepareForSegue: (UIStoryboardSegue *) segue sender: (id) sender [segue.destinationViewController setProductName: [list objectAtIndex: [self.tableView.indexPathForSelectedRow row]]];
Her sender vi produktnavnet strengen til detaljvisningen kontrolleren. Vi vil bruke denne strengen for navigeringslinjens tittel og for å sette bildet. Du får en feil, fordi vi ikke har definert produktnavnstrengen i DetailViewController ennå. Fortellingsbrettet vil kalle denne metoden på kjøretid når du utløser en segue i den aktuelle scenen.
Det siste vi må gjøre er å oppdatere tabelloversikten i storyboardet, så åpne "MainStoryboard.storyboard" og velg tabellvisningen. Åpne Attribut Inspector og endre innholdet fra Static Cells til Dynamic Prototypes.
Velg nå tabellvisningscellen og sett identifikatoren til cellen. Sett også tilleggsutstyr til informasjonsindikator.
Som du kan se, har fortellingen mellom de to visningskontrollene forsvunnet. Dette er fordi vi endret tabellvisningen. Hvis du vil legge til denne fortellingen igjen, drar CTRL fra tabellvisningen til DetailViewController og velger Push for Storyboard Segues.
Åpne MainStoryboard.storyboard, velg etiketten i siste visningskontrolleren og slett den. Dra nå en UIImageView i visningen og la den fylle hele plassen. I Egenskapsinspektøren stiller du modusen for bildevisningen til Aspect Fit.
Nå trenger vi bare å koble bildevisningen, så velg mellomknappen til redaktøren for å vise "Assistent editor".
Velg bildevisningen og kontroll-dra til under DetailViewController @interface-setningen. En popup vises. Skriv inn "productImageView" for navnfeltet, sett inn lagringstypen for sterk, og klikk på Koble til.
Åpne DetailViewController.h og endre koden for å lese som følger:
#importere@interface DetailViewController: UIViewController NSString * productName; CGFloat tidligereSkala; CGFloat previousRotation; CGFloat beginX; CGFloat begynner; @property (strong, nonatomic) IBOutlet UIImageView * productImageView; @property (sterk, ikke-atomisk) NSString * productName; @slutt
Her oppretter vi noen variabler som vi skal bruke for å justere bildet. Vi lager også Produktnavn streng vi snakket om tidligere.
Gå nå til DetailViewController.m-filen og slett følgende linjer:
@synthesize detailItem = _detailItem; @synthesize detailDescriptionLabel = _detailDescriptionLabel;
Slett også disse linjene og setDetailItem: og configureView metoder:
@interface DetailViewController () - (void) configureView; @slutt
Legg nå følgende linje under @implementation:
@synthesize productName;
Gå til shouldAutorotateToInterfaceOrientation: metode og modifisere koden for å lese som følger, så vår søknad vil også i denne visningskontrollen bare fungere i portrett:
- (BOOL) shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation) interfaceOrientation return (interfaceOrientation == UIInterfaceOrientationPortrait);
Først må vi legge til bildene i prosjektet vårt, så last ned prøvekoden knyttet til dette prosjektet, og dra iMac, iPad, iPhone og MacBook Air bilder inn i prosjektet. Pass på at "Kopier elementer i destinasjonsgruppens mappe (om nødvendig)" er merket, og klikk deretter Fullfør.
Rull nå ned til viewDidLoad metode i DetailViewController.m-filen og endre koden for å lese som følger:
- (void) viewDidLoad [super viewDidLoad]; self.title = productName; NSString * imageName = [NSString stringWithFormat: @ "% @. Jpg", produktnavn]; self.productImageView.image = [UIImage imageNamed: imageName];
Her setter vi tittelen på navigeringslinjen til det valgte produktet og deretter tilordner vi det tilsvarende bildet av det aktuelle produktet til bildevisningen.
Nå, Bygg og Kjør programmet. Du bør nå se en liste over Apple-produkter. Hvis du velger en, går du til neste visning med et bilde av det aktuelle produktet.
Gå til viewDidLoad metode i DetailViewController.m og legg til følgende kode til denne metoden:
UIRotationGestureRecognizer * rotationGesture = [[UIRotationGestureRecognizer alloc] initWithTarget: selvhandling: @selector (rotateImage :)]; [self.view addGestureRecognizer: rotationGesture];
Her opprettet vi rotasjonsbevegelsesgenkjenningen. Legg nå til rotateImage: metode:
- (void) rotateImage: (UIRotationGestureRecognizer *) recognizer if ([recognizer state] == UIGestureRecognizerStateEnded) previousRotation = 0.0; komme tilbake; CGFloat newRotation = 0.0 - (previousRotation - [recognizer rotation]); CGAffineTransform currentTransformation = self.productImageView.transform; CGAffineTransform newTransform = CGAffineTransformRotate (currentTransformation, newRotation); self.productImageView.transform = newTransform; previousRotation = [gjenkjennelsesrotasjon];
I denne metoden kontrollerer vi først om rotasjonsbevegelsene er avsluttet. Hvis den har, setter vi den forrige rotasjonsverdien til 0. Deretter beregner vi den nye rotasjonen med forrige rotasjon og angir nåværende rotasjon. Dette er gjort så vår neste rotasjon vil starte med den nåværende rotasjonen. Vi ønsker å bruke denne rotasjonen til gjeldende transformasjon. Så, vi får vår nåværende transformasjon og legger til rotasjonen til den. Endelig setter vi forrige RotasjonsValue til den nåværende rotasjonen av fingrene.
Gå til viewDidLoad metode og legg til følgende kode til denne metoden:
UIPinchGestureRecognizer * pinchGesture = [[UIPinchGestureRecognizer alloc] initWithTarget: selvhandling: @selector (scaleImage :)]; [self.view addGestureRecognizer: pinchGesture];
Her oppretter vi nippelbevisgjenkjenningen. Legg nå til scaleImage: metode:
- (void) scaleImage: (UIPinchGestureRecognizer *) recognizer if ([recognizer state] == UIGestureRecognizerStateEnded) previousScale = 1.0; komme tilbake; CGFloat newScale = 1.0 - (tidligereSkala - [gjenkjennelsesskala]); CGAffineTransform currentTransformation = self.productImageView.transform; CGAffineTransform newTransform = CGAffineTransformScale (currentTransformation, newScale, newScale); self.productImageView.transform = newTransform; previousScale = [recognizer scale];
Denne metoden er veldig lik rotasjonsmetoden, men i stedet for å rotere bildet, skalerer vi bildet.
Gå til viewDidLoad metode og legg til følgende kode til denne metoden:
UITapGestureRecognizer * tapGesture = [[UITapGestureRecognizer alloc] initWithTarget: selvhandling: @selector (resetImage :)]; [self.view addGestureRecognizer: tapGesture];
Her opprettet vi gjenkjenningsbeholderen. Legg nå til scaleImage: metode:
- (void) resetImage: (UITapGestureRecognizer *) recognizer [UIView beginAnimations: null kontekst: null]; [UIView setAnimationDuration: 0.3]; self.productImageView.transform = CGAffineTransformIdentity; [self.productImageView setCenter: CGPointMake (self.view.frame.size.width / 2, self.view.frame.size.height / 2)]; [UIView commitAnimations];
I denne metoden tilbakestiller vi bildet til standardstatus med en fin animasjon. Vi senterer bildet og fjerner transformasjonene.
For siste gang, gå til viewDidLoad metode og legg til følgende kode til denne metoden:
UIPanGestureRecognizer * panGesture = [[UIPanGestureRecognizer alloc] initWithTarget: selvhandling: @selector (moveImage :)]; [panGesture setMinimumNumberOfTouches: 1]; [panGesture setMaximumNumberOfTouches: 1]; [self.view addGestureRecognizer: panGesture];
Her har vi opprettet pan gesture recognizer. Vi setter egenskapen MinimumNumberOfTouches og maximumNumberOfTouches til 1, slik at denne gesten kun vil fungere med 1 finger. Legg nå til moveImage: metode:
- (void) moveImage: (UIPanGestureRecognizer *) recognizer CGPoint newCenter = [recognizer translationInView: self.view]; hvis ([recognizer state] == UIGestureRecognizerStateBegan) beginX = self.productImageView.center.x; beginY = self.productImageView.center.y; newCenter = CGPointMake (beginX + newCenter.x, startY + newCenter.y); [self.productImageView setCenter: newCenter];
Her oppretter vi en CGPoint og setter verdien til fingerens plassering. Hvis vi begynner med pannen gest. Vi setter verdien av beginX- og beginY-variablene til x- og y-koordinatene til midten av bildevisningen. Etter det beregner vi de nye koordinatene for midten av bildevisningen, slik at midten av bildevisningen blir på samme sted som vår finger. Til slutt setter vi midten av bildevisningen til newCenter CGPoint som vi nettopp har beregnet.
Kjør programmet igjen, og denne gangen kan du rotere, zoome og flytte bildet. Hvis du klikker på bildet, vil bildet gå til standardstatus.
Jeg håper du likte denne opplæringen om bevegelser. Hvis du har noen nye ideer for iOS-opplæringsprogrammer, vennligst legg dem i kommentarfeltet nedenfor!
Accentsconagua