Share
La classe UIGestureRecognizer facilite la détection et la réponse à des gestes complexes dans une application SDK iOS. Ce tutoriel vous apprendra à utiliser la classe UIGestureRecognizer en montrant comment créer une bibliothèque de galerie de photos simple..
UIGestureRecognizer est disponible depuis iOS 3.2. Cependant, vous serez peut-être surpris de constater que vous travaillerez rarement directement avec cette classe. Au lieu de cela, vous implémenterez l'une des nombreuses sous-classes conçues pour répondre à des gestes tactiles spécifiques. Les sous-classes UIGestureRecognizer suivantes sont livrées avec le SDK iOS:
Dans ce tutoriel, nous allons faire une simple galerie de photos. Vous verrez d’abord une liste de produits Apple. Si vous en sélectionnez un, vous verrez une image de ce produit. Vous pouvez zoomer, faire pivoter, déplacer et réinitialiser cette image à son état par défaut avec des gestes.
En plus d'utiliser les gestes prédéfinis énumérés ci-dessus, vous pouvez également créer une sous-classe UIGestureRecognizer afin de pouvoir créer et détecter vos propres gestes personnalisés, comme une coche ou un cercle. Nous ne ferons pas cela dans ce tutoriel, mais vous trouverez plus d'informations à ce sujet dans la documentation Apple..
Ouvrez Xcode et sélectionnez «Créer un nouveau projet Xcode». Sélectionnez une application maître-détail et cliquez sur Suivant. Entrez un nom pour votre projet, j'ai appelé le mien "Galerie de photos". Entrez votre identifiant d'entreprise et assurez-vous que vous avez sélectionné l'iPhone pour la famille de périphériques, car nous allons créer une application pour iPhone. Assurez-vous également que toutes les cases à cocher sont sélectionnées, à l'exception de la case à cocher Utiliser les données de base. Comme vous pouvez le constater, nous allons utiliser les nouvelles fonctionnalités iOS 5 Storyboard et Comptage de référence automatique (ARC) dans ce didacticiel. Si vous avez terminé, cliquez sur Suivant. Choisissez un emplacement pour enregistrer votre projet et cliquez sur Créer..
Étant donné que nous utilisons des storyboards au lieu de fichiers nib dans ce tutoriel, vous ne verrez pas MainWindow.xib, mais un fichier appelé MainStoryboard.storyboard. Lorsque vous ouvrez ce fichier, vous verrez toute l'interface utilisateur, qui contient un contrôleur de navigation et deux contrôleurs de vue..
Si vous sélectionnez le point (flèche) entre les deux contrôleurs de vue, vous verrez que la cellule de vue du tableau s’illumine. Cela signifie que le premier contrôleur de vue poussera le second contrôleur de vue. Si vous sélectionnez la cellule d'affichage du tableau, nous n'aurons pas à appeler pushViewController: plus.
Regardez également le fichier MasterViewController.m. Vous verrez qu'il n'y a pas dealloc méthode. En effet, nous utilisons ARC, et ARC gère les méthodes liées à la mémoire, telles que conserver, Libération, autorelease et dealloc pour nous.
Maintenant, générez et exécutez le projet. Vous devriez voir un contrôleur de navigation avec le titre Maître et une cellule appelée Détail. Lorsque vous sélectionnez cette cellule, vous serez poussé vers le deuxième contrôleur de vue qui affiche du texte..
Ouvrez MasterViewController.h et modifiez le code comme suit:
#importation#import "DetailViewController.h" @interface MasterViewController: UITableViewController NSArray * list; @property (strong, nonatomic) NSArray * list; @fin
Ici, nous importons la classe DetailViewController et créons un tableau appelé list.
Maintenant, allez à MasterViewController.m et ajoutez les lignes suivantes sous le @implementation:
@synthèse la liste;
Maintenant, faites défiler jusqu'à la viewDidLoad et modifiez le code pour lire comme suit:
- (void) viewDidLoad [super viewDidLoad]; self.title = @ "Produits"; NSArray * listArray = [[NSArray alloc] initWithObjects: @ "iPhone", @ "iPad", @ "iMac", @ "MacBook Air", nil]; self.list = listArray;
Ici, nous définissons le titre de la barre de navigation sur «produits» et créons un tableau factice avec des produits Apple pour compléter notre liste. Nous n'avons pas à publier le listArray, car ARC le fera pour nous..
Allez maintenant au devraitAutorotateToInterfaceOrientation: méthode et modifier le code pour lire comme suit, de sorte que notre application ne fonctionne que dans portrait:
- (BOOL) shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation) interfaceOrientation return (interfaceOrientation == UIInterfaceOrientationPortrait);
Ajoutez maintenant les méthodes de source de données de la vue tableau suivantes sous devraitAutorotateToInterfaceOrientation: méthode:
- (NSInteger) numberOfSectionsInTableView: (UITableView *) tableView return 1; - (NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) section return [list count] ;; - (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath statique NSString * CellIdentifier = @ "Cell"; UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier: CellIdentifier]; cell.textLabel.text = [list objectAtIndex: [ligne de chemin d'index]]; cellule de retour;
Ici, nous définissons le nombre de sections de la vue tableau sur 1 et le nombre de lignes de cette section sur le nombre d'objets de notre tableau de liste. Nous définissons le texte des cellules de la vue tableau sur les produits de notre tableau de liste.
Enfin, ajoutez la méthode suivante sous les méthodes de source de données de la vue table:
- (void) prepareForSegue: (UIStoryboardSegue *) seender sender: (id) sender [segue.destinationViewController setProductName: [list objectAtIndex: [self.tableView.indexPathForSelectedRow rang]]];
Ici, nous passons notre chaîne de nom de produit au contrôleur de vue de détail. Nous allons utiliser cette chaîne pour le titre de la barre de navigation et pour définir l'image. Vous obtiendrez une erreur, car nous n'avons pas encore défini la chaîne productName dans DetailViewController. Le storyboard appelle cette méthode au moment de l'exécution lorsque vous déclenchez une séquence dans la scène en cours..
La dernière chose à faire est de mettre à jour notre tableview dans le storyboard. Ouvrez donc «MainStoryboard.storyboard» et sélectionnez la table. Ouvrez l'inspecteur d'attributs et modifiez le contenu des cellules statiques en prototypes dynamiques..
Sélectionnez maintenant la cellule de la vue tableau et définissez l'identifiant sur la cellule. Définir également l'accessoire à l'indicateur de divulgation.
Comme vous pouvez le constater, la séparation entre les deux contrôleurs de vue a disparu. C'est parce que nous avons changé la vue de la table. Pour ajouter à nouveau cette séquence, faites glisser la touche CTRL de la vue table vers le DetailViewController et sélectionnez Pousser pour les séquences de storyboard..
Ouvrez MainStoryboard.storyboard, sélectionnez l’étiquette dans le dernier contrôleur de vue et supprimez-la. Maintenant, faites glisser un UIImageView dans la vue et faites-le remplir tout l'espace. Dans l’Inspecteur des attributs, définissez le Mode de la vue d’image sur Ajuster le format..
Maintenant, il ne reste plus qu'à connecter la vue de l'image, sélectionnez donc le bouton du milieu de l'éditeur pour afficher «Assistant éditeur»..
Sélectionnez la vue d'image et maintenez la touche Ctrl enfoncée pour faire glisser le curseur sous l'instruction DetailViewController @interface. Une pop-up apparaîtra. Entrez «productImageView» pour le champ du nom, définissez le type de stockage sur fort, puis cliquez sur Connecter..
Ouvrez DetailViewController.h et modifiez le code pour qu'il se lise comme suit:
#importation@interface DetailViewController: UIViewController NSString * productName; CGFloat previousScale; CGFloat previousRotation; CGFloat beginX; CGFloat beginY; @property (strong, nonatomic) IBOutlet UIImageView * productImageView; @property (strong, nonatomic) NSString * productName; @fin
Ici, nous créons des variables que nous utiliserons pour ajuster l’image. Nous créons également le productName chaîne dont nous avons parlé plus tôt.
Maintenant, allez dans le fichier DetailViewController.m et supprimez les lignes suivantes:
@synthesize detailItem = _detailItem; @synthesize detailDescriptionLabel = _detailDescriptionLabel;
Supprimez également ces lignes et le setDetailItem: et configureView méthodes:
@interface DetailViewController () - (void) configureView; @fin
ajoutez maintenant la ligne suivante sous @implementation:
@synthesize productName;
Aller au devraitAutorotateToInterfaceOrientation: méthode et modifier le code pour lire comme suit, de sorte que notre application fonctionnera également dans ce contrôleur de vue uniquement en mode portrait:
- (BOOL) shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation) interfaceOrientation return (interfaceOrientation == UIInterfaceOrientationPortrait);
Tout d'abord, nous devons ajouter les images à notre projet. Téléchargez donc l'exemple de code joint à ce projet et faites glisser les images iMac, iPad, iPhone et MacBook Air dans votre projet. Assurez-vous que l'option «Copier les éléments dans le dossier du groupe de destination (si nécessaire)» est cochée, puis cliquez sur Terminer..
Maintenant, faites défiler jusqu'à la viewDidLoad méthode dans le fichier DetailViewController.m et modifiez le code pour qu'il se lise comme suit:
- (void) viewDidLoad [super viewDidLoad]; self.title = productName; NSString * imageName = [NSString stringWithFormat: @ "% @. Jpg", NomProduit]; self.productImageView.image = [UIImage imageNamed: imageName];
Ici, nous définissons le titre de la barre de navigation sur le produit sélectionné, puis nous affectons l'image correspondante de ce produit à la vue d'image..
Maintenant, générez et exécutez l'application. Vous devriez maintenant voir une liste de produits Apple. Si vous en sélectionnez un, vous passerez à la vue suivante avec une image de ce produit..
Aller au viewDidLoad dans DetailViewController.m et ajoutez le code suivant à cette méthode:
UIRotationGestureRecognizer * rotationGesture = [[UIRotationGestureRecognizer alloc] initWithTarget: action auto: @selector (rotationImage :)]; [auto.view addGestureRecognizer: rotationGesture];
Ici, nous avons créé le dispositif de reconnaissance des mouvements de rotation. Maintenant, ajoutez le rotationImage: méthode:
- (void) rotationImage: (UIRotationGestureRecognizer *) reconnaissance if ([état de la reconnaissance]] == UIGestureRecognizerStateEnded) previousRotation = 0.0; revenir; CGFloat newRotation = 0.0 - (previousRotation - [rotation de la reconnaissance]); CGAffineTransform currentTransformation = self.productImageView.transform; CGAffineTransform newTransform = CGAffineTransformRotate (currentTransformation, newRotation); self.productImageView.transform = newTransform; previousRotation = [rotation de reconnaissance];
Dans cette méthode, nous vérifions d’abord si les mouvements de rotation sont terminés. Si tel est le cas, nous définissons la valeur previousRotation sur 0. Ensuite, nous calculons la nouvelle rotation avec la rotation précédente, puis définissons la rotation actuelle. Ceci est fait pour que notre prochaine rotation commence par la rotation actuelle. Nous voulons appliquer cette rotation à la transformation en cours. Nous obtenons donc notre transformation actuelle et y ajoutons la rotation. Enfin, nous définissons la previousRotationValue à la rotation actuelle de vos doigts.
Aller au viewDidLoad method et ajoutez le code suivant à cette méthode:
UIPinchGestureRecognizer * pinchGesture = [[UIPinchGestureRecognizer alloc] initWithTarget: action autonome: @selector (scaleImage :)]; [auto.view addGestureRecognizer: pinchGesture];
Ici, nous créons le dispositif de reconnaissance de geste de pincement. Maintenant, ajoutez le scaleImage: méthode:
- (void) scaleImage: (UIPinchGestureRecognizer *) reconnaissance if ([état de la reconnaissance]] == UIGestureRecognizerStateEnded) previousScale = 1.0; revenir; CGFloat newScale = 1.0 - (previousScale - [échelle de reconnaissance]); CGAffineTransform currentTransformation = self.productImageView.transform; CGAffineTransform newTransform = CGAffineTransformScale (currentTransformation, newScale, newScale); self.productImageView.transform = newTransform; previousScale = [échelle de reconnaissance];
Cette méthode est très similaire à la méthode rotateImage, mais au lieu de faire pivoter l'image, nous la redimensionnons.
Aller au viewDidLoad method et ajoutez le code suivant à cette méthode:
UITapGestureRecognizer * tapGesture = [[UITapGestureRecognizer alloc] initWithTarget: action automatique: @selector (resetImage :)]; [auto.view addGestureRecognizer: tapGesture];
Ici, nous avons créé le dispositif de reconnaissance des gestes du tap. Maintenant, ajoutez le scaleImage: méthode:
- (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];
Dans cette méthode, nous réinitialisons l'image à son état par défaut avec une belle animation. Nous centrons l'image et supprimons les transformations.
Pour la dernière fois, allez au viewDidLoad method et ajoutez le code suivant à cette méthode:
UIPanGestureRecognizer * panGesture = [[UIPanGestureRecognizer alloc] initWithTarget: action autonome: @selector (moveImage :)]; [panGesture setMinimumNumberOfTouches: 1]; [panGesture setMaximumNumberOfTouches: 1]; [auto.view addGestureRecognizer: panGesture];
Ici, nous avons créé la reconnaissance de geste panoramique. Nous avons défini la propriété minimumNumberOfTouches et maximumNumberOfTouches sur 1, de sorte que ce geste ne fonctionne qu'avec un seul doigt. Maintenant, ajoutez le moveImage: méthode:
- (void) moveImage: (UIPanGestureRecognizer *) identificateur CGPoint newCenter = [identificateur translationInView: self.view]; if ([identifiant état]] == UIGestureRecognizerStateBegan) beginX = self.productImageView.center.x; beginY = self.productImageView.center.y; newCenter = CGPointMake (beginX + newCenter.x, beginY + newCenter.y); [self.productImageView setCenter: newCenter];
Ici, nous créons un CGPoint et définissons la valeur sur l'emplacement de votre doigt. Si on commence par le geste pan. Nous définissons la valeur des variables beginX et beginY sur les coordonnées x et y du centre de la vue de l'image. Après cela, nous calculons les nouvelles coordonnées pour le centre de la vue de l’image, de sorte que le centre de la vue de l’image se trouve au même endroit que notre doigt. Enfin, nous avons défini le centre de la vue d’image sur le nouveau centre CGPoint que nous venons de calculer..
Exécutez l'application à nouveau et cette fois, vous pouvez faire pivoter, zoomer et déplacer l'image. Si vous appuyez sur l'image, l'image reviendra à son état par défaut.
J'espère que vous avez aimé ce tutoriel sur les gestes. Si vous avez de nouvelles idées pour les didacticiels iOS, veuillez les laisser dans la section commentaires ci-dessous.!
Accentsconagua