Share
La classe UIGestureRecognizer semplifica il rilevamento e la risposta a gesti complessi in un'applicazione iOS SDK. Questo tutorial ti insegnerà come utilizzare la classe UIGestureRecognizer dimostrando come creare una semplice libreria di foto gallery.
UIGestureRecognizer è disponibile da iOS 3.2. Tuttavia, potresti essere sorpreso di scoprire che raramente lavorerai direttamente con questa classe. Invece, implementerai una delle diverse sottoclassi progettate per rispondere a specifici gesti tattili. Le seguenti sottoclassi UIGestureRecognizer vengono fornite con l'SDK di iOS:
In questo tutorial faremo una semplice galleria fotografica. Per prima cosa vedrai una lista con i prodotti di Apple. Se ne selezioni uno, vedrai un'immagine di quel prodotto. Puoi zoomare, ruotare, spostare e ripristinare quell'immagine allo stato predefinito con i gesti.
Oltre a utilizzare i gesti predefiniti elencati sopra, puoi anche creare sottoclassi UIGestureRecognizer autonomamente, in modo da poter creare e rilevare i tuoi gesti personalizzati, come un segno di spunta o una cerchia. Non lo faremo in questo tutorial, ma puoi trovare maggiori informazioni a riguardo nella documentazione di Apple.
Apri Xcode e seleziona "Crea un nuovo progetto Xcode". Selezionare un'applicazione di dettaglio principale e fare clic su Avanti. Inserisci un nome per il tuo progetto, ho chiamato il mio "Photo Gallery". Inserisci il tuo identificatore aziendale e assicurati di aver selezionato iPhone per Famiglia di dispositivi, perché stiamo per creare un'app per iPhone. Assicurati inoltre che siano selezionate tutte le caselle di controllo, ad eccezione della casella di controllo Usa dati anagrafici. Come puoi vedere, utilizzeremo le nuove funzionalità Storyboard di iOS 5 e Conteggio di riferimento automatico (ARC) in questo tutorial. Al termine, fare clic su Avanti. Scegli un luogo per salvare il tuo progetto e fai clic su Crea.
Poiché in questo tutorial usiamo storyboard anziché file di pennini, non vedrai MainWindow.xib, ma un file chiamato MainStoryboard.storyboard. Quando apri questo file, vedrai l'intera interfaccia utente, che contiene un controller di navigazione e due controller di visualizzazione.
Se si seleziona il seguito (freccia) tra i due controller di vista, si vedrà che la cella di visualizzazione tabella si illumina. Ciò significa che il primo controller di visualizzazione spingerà il secondo controller di visualizzazione. Se selezioni la cella di visualizzazione tabella, non dovremo chiamare pushViewController: più.
Dai anche un'occhiata al file MasterViewController.m. Vedrai che non c'è dealloc metodo. Questo perché usiamo ARC, e ARC gestisce i metodi relativi alla memoria come conservare, pubblicazione, autorelease e dealloc per noi.
Ora costruisci ed esegui il progetto. Dovresti vedere un controller di navigazione con il titolo Master e una cella chiamata Detail. Quando selezioni questa cella, sarai spinto al secondo controller della vista che mostra del testo.
Aprire MasterViewController.h e modificare il codice da leggere come segue:
#importare#import "DetailViewController.h" @interface MasterViewController: UITableViewController NSArray * list; @property (strong, nonatomic) lista NSArray *; @fine
Qui importiamo la classe DetailViewController e creiamo un array chiamato list.
Ora vai su MasterViewController.m e aggiungi le seguenti righe sotto @implementation:
@ lista sintetica;
Ora scorrere verso il basso per viewDidLoad metodo e modificare il codice da leggere come segue:
- (void) viewDidLoad [super viewDidLoad]; self.title = @ "Prodotti"; NSArray * listArray = [[NSArray alloc] initWithObjects: @ "iPhone", @ "iPad", @ "iMac", @ "MacBook Air", nil]; self.list = listArray;
Qui impostiamo il titolo della barra di navigazione su "prodotti" e creiamo un array fittizio con prodotti Apple per riempire il nostro elenco di array. Non dobbiamo rilasciare listArray, perché ARC lo farà per noi.
Ora vai al shouldAutorotateToInterfaceOrientation: metodo e modificare il codice da leggere come segue, quindi la nostra applicazione funzionerà solo in verticale:
- (BOOL) shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation) interfaceOrientation return (interfaceOrientation == UIInterfaceOrientationPortrait);
Ora aggiungere i seguenti metodi di origine dati della vista tabella sotto shouldAutorotateToInterfaceOrientation: metodo:
- (NSInteger) numberOfSectionsInTableView: (UITableView *) tableView return 1; - (NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) section return [elenco count] ;; - (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath static NSString * CellIdentifier = @ "Cell"; UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier: CellIdentifier]; cell.textLabel.text = [lista objectAtIndex: [indexPath row]]; cella di ritorno;
Qui impostiamo il numero di sezioni della vista tabella su 1 e il numero di righe di quella sezione sul conteggio degli oggetti nella nostra lista. Impostiamo il testo delle celle nella vista tabella sui prodotti nella nostra lista.
Infine, aggiungi il seguente metodo sotto i metodi di origine dati della vista tabella:
- (void) prepareForSegue: (UIStoryboardSegue *) segue mittente: (id) sender [segue.destinationViewController setProductName: [lista objectAtIndex: [self.tableView.indexPathForSelectedRow row]]];
Qui passiamo la stringa del nome del prodotto al controller della vista di dettaglio. Useremo questa stringa per il titolo della barra di navigazione e per impostare l'immagine. Riceverai un errore, perché non abbiamo ancora definito la stringa productName nel DetailViewController. Lo storyboard chiamerà questo metodo in fase di esecuzione quando si attiva un seguito nella scena corrente.
L'ultima cosa che dovremo fare è aggiornare la nostra tableview nello storyboard, quindi apri "MainStoryboard.storyboard" e seleziona tableview. Apri l'ispettore Attributi e modifica il contenuto da Celle statiche a Prototipi dinamici.
Ora seleziona la cella della vista tabella e imposta l'identificatore su Cell. Impostare anche l'indicatore dell'indicatore di apertura.
Come puoi vedere, il passaggio tra i due controller di visualizzazione è scomparso. Questo perché abbiamo cambiato la vista tabella. Per aggiungere questo segue di nuovo, CTRL trascina da tableview a DetailViewController e seleziona Push per lo Storyboard Segues.
Aprire MainStoryboard.storyboard, selezionare l'etichetta nell'ultimo controller della vista ed eliminarla. Ora trascina un UIImageView nella vista e fallo riempire l'intero spazio. In Impostazioni Attributi, imposta la Modalità della vista immagine su Adatta.
Ora dobbiamo solo collegare la vista dell'immagine, quindi selezionare il pulsante centrale dell'Editor per mostrare "Assistant editor".
Selezionare la vista dell'immagine e control-drag in sotto l'istruzione DetailViewController @interface. Apparirà un pop-up. Immettere "productImageView" per il campo del nome, impostare il tipo di archiviazione su strong e fare clic su Connetti.
Aprire DetailViewController.h e modificare il codice da leggere come segue:
#importare@interface DetailViewController: UIViewController NSString * productName; CGFloat previousScale; CGFloat previousRotation; CGFloat beginX; CGFloat beginY; @property (strong, nonatomic) IBOutlet UIImageView * productImageView; @property (strong, nonatomic) NSString * productName; @fine
Qui, creiamo alcune variabili che useremo per regolare l'immagine. Creiamo anche il nome del prodotto stringa di cui abbiamo parlato prima.
Ora vai al file DetailViewController.m ed elimina le seguenti linee:
@synthesize detailItem = _detailItem; @synthesize detailDescriptionLabel = _detailDescriptionLabel;
Elimina anche queste righe e il setDetailItem: e configureView metodi:
@interface DetailViewController () - (void) configureView; @fine
ora aggiungi la seguente riga sotto @implementation:
@synthesize productName;
Vai al shouldAutorotateToInterfaceOrientation: metodo e modificare il codice per leggere come segue, quindi la nostra applicazione sarà anche in questa vista il controller funziona solo in verticale:
- (BOOL) shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation) interfaceOrientation return (interfaceOrientation == UIInterfaceOrientationPortrait);
Per prima cosa dobbiamo aggiungere le immagini al nostro progetto, quindi scarica il codice di esempio allegato a questo progetto e trascina le immagini di iMac, iPad, iPhone e MacBook Air nel tuo progetto. Assicurati che "Copia gli elementi nella cartella del gruppo di destinazione (se necessario)" sia selezionato, quindi fai clic su Fine.
Ora scorrere verso il basso per viewDidLoad metodo nel file DetailViewController.m e modificare il codice da leggere come segue:
- (void) viewDidLoad [super viewDidLoad]; self.title = productName; NSString * imageName = [NSString stringWithFormat: @ "% @. Jpg", productName]; self.productImageView.image = [UIImage imageNamed: imageName];
Qui impostiamo il titolo della barra di navigazione sul prodotto selezionato e successivamente assegniamo l'immagine corrispondente di quel prodotto alla vista dell'immagine.
Ora, costruisci ed esegui l'applicazione. Ora dovresti vedere un elenco di prodotti Apple. Se ne selezioni uno, andrai alla vista successiva con un'immagine di quel prodotto.
Vai al viewDidLoad metodo in DetailViewController.m e aggiungere il seguente codice a tale metodo:
UIRotationGestureRecognizer * rotationGesture = [[UIRotationGestureRecognizer alloc] initWithTarget: self action: @selector (rotateImage :)]; [self.view addGestureRecognizer: rotationGesture];
Qui, abbiamo creato il riconoscimento del gesto di rotazione. Ora aggiungi il rotateImage: metodo:
- (void) rotateImage: (UIRotationGestureRecognizer *) recognizer if ([recognizer state] == UIGestureRecognizerStateEnded) previousRotation = 0.0; ritorno; CGFloat newRotation = 0.0 - (previousRotation - [riconoscimento rotazione]); CGAffineTransform currentTransformation = self.productImageView.transform; CGAffineTransform newTransform = CGAffineTransformRotate (currentTransformation, newRotation); self.productImageView.transform = newTransform; previousRotation = [rotazione del riconoscimento];
In questo metodo, per prima cosa controlliamo se i gesti di rotazione sono terminati. Se lo è, impostiamo il valore precedenteRotazione su 0. Successivamente, calcoliamo la nuova rotazione con la rotazione precedente e quindi impostiamo la rotazione corrente. Questo è fatto in modo che la nostra prossima rotazione inizi con la rotazione corrente. Vogliamo applicare questa rotazione alla trasformazione corrente. Quindi, otteniamo la nostra trasformazione attuale e aggiungiamo la rotazione ad essa. Alla fine, impostiamo il valore precedenteRotationValue alla rotazione corrente delle dita.
Vai al viewDidLoad metodo e aggiungere il seguente codice a tale metodo:
UIPinchGestureRecognizer * pinchGesture = [[UIPinchGestureRecognizer alloc] initWithTarget: self action: @selector (scaleImage :)]; [self.view addGestureRecognizer: pinchGesture];
Qui creiamo il riconoscimento del gesto di pizzicare. Ora aggiungi il scaleImage: metodo:
- (void) scaleImage: (UIPinchGestureRecognizer *) recognizer if ([recognizer state] == UIGestureRecognizerStateEnded) previousScale = 1.0; ritorno; CGFloat newScale = 1.0 - (previousScale - [riconoscitore scala]); CGAffineTransform currentTransformation = self.productImageView.transform; CGAffineTransform newTransform = CGAffineTransformScale (currentTransformation, newScale, newScale); self.productImageView.transform = newTransform; previousScale = [scala di riconoscimento];
Questo metodo è molto simile al metodo rotateImage, ma invece di ruotare l'immagine, ridimensioniamo l'immagine.
Vai al viewDidLoad metodo e aggiungere il seguente codice a tale metodo:
UITapGestureRecognizer * tapGesture = [[UITapGestureRecognizer alloc] initWithTarget: self action: @selector (resetImage :)]; [self.view addGestureRecognizer: tapGesture];
Qui abbiamo creato il riconoscimento del gesto toccato. Ora aggiungi il scaleImage: metodo:
- (void) resetImage: (UITapGestureRecognizer *) recognizer [UIView beginAnimations: nil context: nil]; [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];
In questo metodo, ripristiniamo l'immagine allo stato predefinito con una bella animazione. Centriamo l'immagine e rimuoviamo le trasformazioni.
Per l'ultima volta, vai al viewDidLoad metodo e aggiungere il seguente codice a tale metodo:
UIPanGestureRecognizer * panGesture = [[UIPanGestureRecognizer alloc] initWithTarget: self action: @selector (moveImage :)]; [panGesture setMinimumNumberOfTouches: 1]; [panGesture setMaximumNumberOfTouches: 1]; [self.view addGestureRecognizer: panGesture];
Qui abbiamo creato il riconoscimento pan gesture. Impostiamo la proprietà minimumNumberOfTouches e maximumNumberOfTouches su 1, quindi questo gesto funzionerà solo con 1 dito. Ora aggiungi il moveImage: metodo:
- (void) moveImage: (UIPanGestureRecognizer *) recognizer CGPoint newCenter = [recognizer translationInView: self.view]; if ([recognizer state] == UIGestureRecognizerStateBegan) beginX = self.productImageView.center.x; beginY = self.productImageView.center.y; newCenter = CGPointMake (beginX + newCenter.x, beginY + newCenter.y); [self.productImageView setCenter: newCenter];
Qui creiamo un CGPoint e impostiamo il valore sulla posizione del dito. Se iniziamo con il gesto di pan. Impostiamo il valore delle variabili beginX e beginY alle coordinate xey del centro della vista dell'immagine. Successivamente, calcoliamo le nuove coordinate per il centro della vista dell'immagine, quindi il centro della vista dell'immagine sarà nella stessa posizione del nostro dito. Alla fine, abbiamo impostato il centro della vista immagine sul nuovo CGPoint appena calcolato.
Esegui nuovamente l'applicazione e questa volta puoi ruotare, ingrandire e spostare l'immagine. Se si tocca l'immagine, l'immagine andrà al suo stato predefinito.
Spero ti sia piaciuto questo tutorial sui gesti. Se hai qualche idea nuova per le esercitazioni iOS, ti preghiamo di lasciarle nella sezione commenti qui sotto!
Accentsconagua