In the development process, in order to improve user experience and the interactive friendliness of the App, we usually add some gestures to the App to assist users in operation. This article will briefly outline the gesture events that we often use during development.

The class that manages gesture events is UIGestureRecognizer, which is a gesture recognizer. The gesture recognizer is a special touch event. Gesture events are designed using target-action mode, so we can specify the target and action when using them.

UIGestureRecognizer is an abstract superclass that we generally do not use during development, but use its subclasses instead.

The figure above shows a subclass of UIGestureRecognizer. Let’s take a look at the common centralized gesture events.

Start

So before we describe it, let’s say we have a scenario, and we have a UIView on UIViewController, and we set the color to red, and we call it redView. Now let’s add a gesture to it.

UIPanGestureRecognizer panning gestures

Now there’s nothing on UIView that can be triggered, so let’s add a pan gesture so that this image can be panned around the screen. We’re going to use a subclass of UIGestureRecognizer, UIPanGestureRecognizer, which has two properties and three methods in the API. Where properties are used to control the number of touches to the UIView. Method is demonstrated by code. The code is as follows:

Pan = [[UIPanGestureRecognizer alloc] initWithTarget:self; pan = [UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panView:)]; [_redView addGestureRecognizer:pan];Copy the code

The translation gesture can be triggered by:

- (void)panView:(UIPanGestureRecognizer *)sender{ CGPoint point = [sender translationInView:_redView]; / / the above times position for the standard sender. The transform = CGAffineTransformTranslate (sender. View. The transform, point, x, point, y); // The increment is zero [sender]setTranslation:CGPointZero inView:sender.view];
}
Copy the code

In order to allow the View to move freely, we set each move to the same position as the previous one and its increment to zero.

Panning gestures UIScreenEdgePanGestureRecognizer screen edge

UIScreenEdgePanGestureRecognizer is a subclass of UIPanGestureRecognizer, more than the parent class an attribute

Same scenario above, if we add the screen edge gesture to the View, but first of all, since we’re moving the screen edge, we know that the screen has four edges, up, left, down and right. So when we were in add gestures must first set UIScreenEdgePanGestureRecognizer edges of the properties. Here I set it to slide right edge, view move.

It is an enumeration variable, and the enumeration element represents the gesture location needed to start the event.

UIScreenEdgePanGestureRecognizer *screenEdgePan = [[UIScreenEdgePanGestureRecognizer alloc] initWithTarget:self action:@selector(screenEdgePanView:)]; // Property Settings (set boundaries) // Note that, with screen edge panning, two points need to be noted // 1. // 2. Set the screenedgepan. edges = UIRectEdgeRight; [_redView addGestureRecognizer:screenEdgePan];Copy the code

We also add movement events to it.

- (void) screenEdgePanView sender: (UIScreenEdgePanGestureRecognizer *) {/ / computing offset CGPoint point = [sender translationInView:_redView]; / / translation sender. View. Transform = CGAffineTransformMakeTranslation (point. X, point, y); }Copy the code

UITapGestureRecognizer Tap event

The tap event has two properties, which set the number of fingers and the number of taps.

To demonstrate the effect, we will set the finger taps to two and the number of taps to two. The triggered event is a random color change.

UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapView:)]; Tap. NumberOfTapsRequired = 2; / / number of fingers tap. NumberOfTouchesRequired = 2; // Add to view [_redView addGestureRecognizer:tap];Copy the code

The events triggered are:

- (void)tapView:(UITapGestureRecognizer *)sender{ _redView.backgroundColor = [UIColor ColorWithRed: arc4random () % 256/255.0 green: arc4random () % 256/255.0 blue: arc4random () % 256/255.0 alpha: 0.9]; }Copy the code

UISwipeGestureRecognizer Swipe gesture

The swipe gesture has two properties: the first is to set the number of fingers to swipe, the default is one. The second is to set the direction of the swipe. We add a gesture to the view, and the gesture triggers an event that causes the view to randomly change color.

UISwipeGestureRecognizer *swipe = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeView:)]; swipe.numberOfTouchesRequired = 1; / / / / set the light scanning direction swipe. Direction = UISwipeGestureRecognizerDirectionUp; swipe.direction = UISwipeGestureRecognizerDirectionDown; // swipe.direction = UISwipeGestureRecognizerDirectionLeft; // swipe.direction = UISwipeGestureRecognizerDirectionRight; [_redView addGestureRecognizer:swipe];Copy the code

The events triggered are:

- (void)swipeView:(UISwipeGestureRecognizer *)sender{ _redView.backgroundColor = [UIColor ColorWithRed: arc4random () % 256/255.0 green: arc4random () % 256/255.0 blue: arc4random () % 256/255.0 alpha: 0.9]; }Copy the code

UILongPressGestureRecognizer long-press gestures

For the long press gesture we set the same scene as above.

UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(longPressView:)]; / / minimum according to time long longPress. MinimumPressDuration = 2; [_redView addGestureRecognizer:longPress];Copy the code

In the code above, we set the minimum duration of the long press gesture by using the minimumPressDuration property. That is, we set the minimum duration of the event longPressView: to be triggered.

For the long press gesture, we still set the event to randomly change color

- (void) longPressView sender: (UILongPressGestureRecognizer *) {/ / judgment gesturesif (sender.state == UIGestureRecognizerStateEnded) {
         NSLog(@"Long press!"); BackgroundColor = [UIColor colorWithRed: arc4Random ()%256/255.0 Green: arc4Random ()%256/255.0 Alpha blue: arc4random () % 256/255.0:0.9]; }}Copy the code

In the above code, we use state to determine the state of the gesture. This property is the parent property, which contains the entire state of the gesture event from start to finish. You can refer to the official Apple API for details. So that’s the long press.

UIPinchGestureRecognizer Kneading gestures

We all know that when we look at photos in an album, we zoom in and out by pinching or expanding with our fingers. We use the scene above to add kneading gestures to the View to do something similar.

Here, we can hold down the Alt key on the keyboard with the mouse to simulate the scene.

UIPinchGestureRecognizer *pinch = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(pinchView:)]; / / add gestures [_redView addGestureRecognizer: pinch];Copy the code

I believe that with the gesture above, we no longer need to describe the triggering of events in this place

- (void)pinchView:(UIPinchGestureRecognizer *)sender{// use the last sender as the standard sender.view.transform = CGAffineTransformScale(sender.view.transform, sender.scale, sender.scale); // Set the scale scale (1 is normal scale, <1 is small, >1 is large) sender.scale = 1; }Copy the code

Here we use affine transformation to control the view zoom in and out.

UIRotationGestureRecognizer rotation gestures

We use the same method as above to create the gesture and add it to the view.

UIRotationGestureRecognizer *rotation = [[UIRotationGestureRecognizer alloc] initWithTarget:self action:@selector(rotationView:)];
    
[_redView addGestureRecognizer:rotation];
Copy the code

We still use 2D affine transformations to rotate the View

- (void) rotationView sender: (UIRotationGestureRecognizer *) {/ / two parameters, on the basis of the location of the last sender. The transform = CGAffineTransformRotate(sender.view.transform, sender.rotation); // Clear the increment sender.rotation = 0.0; }Copy the code

other

There is a gestureRecognizers property in UIView that characterizes the gesture types in the View and allows you to iterate through the gestures in the View.

for (UIGestureRecognizer *ges in _redView.gestureRecognizers) {
        NSLog(@"% @",ges);
    }
Copy the code

conclusion

Above we have introduced some simple gestures. During the development process, we can add gestures to improve the user experience and make the App more user-friendly. I believe that through the above several gestures, our team iOS development gestures also have a general understanding, if you find any questions or omissions in the process of reading, welcome to discuss or correct, I will be very grateful.