OCUI界面设计：触摸与手势

触摸（UITouch）

简介

1、UIView继承于UIResponder是一种响应者类，可以响应用户触摸事件。

2、UIViewController也是继承于UIResponder，属于响应者类。

3、UIKit 继承链：

4、UIResponder响应者类提供了便利的方法来处理触摸事件：

• 触摸开始
• 触摸移动
• 触摸结束
• 触摸取消

5、UITouch方法：

// 触摸开始- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event;// 触摸移动- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event;// 触摸结束- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event;// 触摸取消- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event;

场景举例

有时需要用户触摸某个视图移动，并且视图会跟着触摸手势轨迹的移动的时候，我们可通过触摸移动方法touchesMoved实现。

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {    NSLog(@"%@", NSStringFromSelector(_cmd));    UITouch *touch = [touches anyObject];    if (touch.view == _showView) {        // 前一个点        CGPoint previousLocation = [touch previousLocationInView:_showView];        // 当前点        CGPoint currentLocation = [touch locationInView:_showView];        // 偏移        CGPoint offset = CGPointMake(currentLocation.x - previousLocation.x,currentLocation.y - previousLocation.y);        // 改变视图位置        _showView.center = CGPointMake(_showView.center.x + offset.x,_showView.center.y + offset.y);    }}

手势（UIGestureRecognizer）

简介

1、Cocoa Touch中为我们提供了便利的手势处理类：UIGestureRecognizer

2、由UIGestureRecognizer衍生的常用子类有：

• 点击手势：UITapGestureRecognizer

• 缩放手势：UIPinchGestureRecognizer

• 旋转手势：UIRotationGestureRecognizer

• 滑动手势：UISwipeGestureRecognizer

• 拖动手势：UIPanGestureRecognizer

• 长按手势：UILongPressGestureRecognizer

3、初始化手势：

- (id)initWithTarget:(id)target action:(SEL)action;

4、添加或移除指定视图上的手势：

// 添加手势- (void)addGestureRecognizer:(UIGestureRecognizer*)gestureRecognizer;// 移除手势- (void)removeGestureRecognizer:(UIGestureRecognizer*)gestureRecognizer;

5、当手势发生冲突的时候可通过下述方法解决：

- (void)requireGestureRecognizerToFail:(UIGestureRecognizer *)otherGestureRecognizer;

6、在为一个视图添加手势的时候，可能手势不会触发，此时我们需要将视图的 userInteractionEnabled 属性置为 YES，开启用户交互。

点击手势 UITapGestureRecognizer

1、常用属性

• numberOfTapsRequired：设置点击次数

• numberOfTouchesRequired：设置手势数量

2、实现效果：点击视图，改变背景颜色。

3、代码示例

#import "ViewController.h"@interface ViewController ()@property (nonatomic, strong) UIView *gestureView;- (void)initializeUserInterface; /**< 初始化用户界面 */@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    [self initializeUserInterface];}#pragma mark - Initialize- (void)initializeUserInterface {    self.title = @"点击手势";    self.view.backgroundColor = [UIColor whiteColor];    // 视图加载    [self.view addSubview:self.gestureView];    // 1、点击手势    UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(respondsToTapGestureRecognizer:)];    // 设置点击次数    tapGesture.numberOfTapsRequired = 1;    // 设置手指数量    tapGesture.numberOfTouchesRequired = 1;    // 添加手势    [_gestureView addGestureRecognizer:tapGesture];}#pragma mark - Gestures- (void)respondsToTapGestureRecognizer:(UITapGestureRecognizer *)gesture {    NSLog(@"%@", NSStringFromSelector(_cmd));    [UIView animateWithDuration:0.5f animations:^{        _gestureView.backgroundColor = [UIColor redColor];    }];}#pragma mark - Getters- (UIView *)gestureView {    if (!_gestureView) {        _gestureView = [[UIView alloc] init];        _gestureView.bounds = CGRectMake(0, 0, 180, 180);        _gestureView.center = self.view.center;        _gestureView.backgroundColor = [UIColor blackColor];        // 开启用户交互        _gestureView.userInteractionEnabled = YES;    }    return _gestureView;}@end

长按手势 UILongPressGestureRecognizer

1、常用属性

• numberOfTapsRequired：设置点击多少次之后进入长按手势

• numberOfTouchesRequired：设置几个手指进行长按

2、效果实现，监听长按手势变化

3、代码示例

#import "ViewController.h"@interface ViewController ()@property (nonatomic, strong) UILabel *stateLabel;@property (nonatomic, strong) UIView  *gestureView;- (void)initializeUserInterface; /**< 初始化用户界面 */@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    [self initializeUserInterface];}#pragma mark - Initialize- (void)initializeUserInterface {    self.title = @"长按手势";    self.view.backgroundColor = [UIColor whiteColor];    // 视图加载    [self.view addSubview:self.stateLabel];    [self.view addSubview:self.gestureView];    // 1、长按手势    UILongPressGestureRecognizer *longPressGesture = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(respondsToLongPressGestureRecognizer:)];    [_gestureView addGestureRecognizer:longPressGesture];}#pragma mark - Gestures// 点击手势- (void)respondsToTapGestureRecognizer:(UITapGestureRecognizer *)gesture {    NSLog(@"%@", NSStringFromSelector(_cmd));    [UIView animateWithDuration:0.5f animations:^{        _gestureView.backgroundColor = [UIColor redColor];    }];}// 长按手势- (void)respondsToLongPressGestureRecognizer:(UILongPressGestureRecognizer *)gesture {    if (gesture.state == UIGestureRecognizerStateBegan) {        _stateLabel.text = @"长按手势开始";    }else if (gesture.state == UIGestureRecognizerStateChanged) {        _stateLabel.text = @"长按手势持续中";    }else if (gesture.state == UIGestureRecognizerStateEnded) {        _stateLabel.text = @"长按手势结束";    }}#pragma mark - Getters- (UILabel *)stateLabel {    if (!_stateLabel) {        _stateLabel = [[UILabel alloc] init];        _stateLabel.bounds = CGRectMake(0, 0, CGRectGetWidth(self.view.bounds), 45);        _stateLabel.center = CGPointMake(CGRectGetMidX(self.view.bounds), 64 + CGRectGetMidY(_stateLabel.bounds) + 45);        _stateLabel.textAlignment = NSTextAlignmentCenter;        _stateLabel.font = [UIFont boldSystemFontOfSize:25];    }    return _stateLabel;}- (UIView *)gestureView {    if (!_gestureView) {        _gestureView = [[UIView alloc] init];        _gestureView.bounds = CGRectMake(0, 0, 180, 180);        _gestureView.center = self.view.center;        _gestureView.backgroundColor = [UIColor blackColor];        // 开启用户交互        _gestureView.userInteractionEnabled = YES;    }    return _gestureView;}@end

滑动手势 UISwipeGestureRecognizer

1、常用属性

• numberOfTouchesRequired：设置手指数量

• direction：设置滑动方向

2、代码示例

2.1、懒加载创建视图

- (UIView *)gestureView {    if (!_gestureView) {        _gestureView = [[UIView alloc] init];        _gestureView.bounds = CGRectMake(0, 0, 180, 180);        _gestureView.center = self.view.center;        _gestureView.backgroundColor = [UIColor blackColor];        // 开启用户交互        _gestureView.userInteractionEnabled = YES;    }    return _gestureView;}

2.1、为视图添加滑动手势

#pragma mark - Initialize- (void)initializeUserInterface {    self.title = @"长按手势";    self.view.backgroundColor = [UIColor whiteColor];    // 视图加载    [self.view addSubview:self.gestureView];    // 1、滑动手势    UISwipeGestureRecognizer *swipeGesture = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(respondsToSwipeGestureRecognizer:)];    // 设置滑动方向    swipeGesture.direction = UISwipeGestureRecognizerDirectionRight;    [_gestureView addGestureRecognizer:swipeGesture];}

2.3、处理手势触发方法

// 滑动手势- (void)respondsToSwipeGestureRecognizer:(UISwipeGestureRecognizer *)gesture {    if (gesture.state == UIGestureRecognizerStateBegan) {        _stateLabel.text = @"滑动手势开始";    }else if (gesture.state == UIGestureRecognizerStateChanged) {        _stateLabel.text = @"滑动手势持续中";    }else if (gesture.state == UIGestureRecognizerStateEnded) {        _stateLabel.text = @"滑动手势结束";    }}

拖拽手势 UIPanGestureRecognizer

1、常用方法

// 获取拖拽到的位置- (CGPoint)translationInView:(nullable UIView *)view;  

2、实现效果，拖动视图，并提示拖拽状态。

3、代码示例

#import "ViewController.h"@interface ViewController ()@property (nonatomic, strong) UILabel *stateLabel;@property (nonatomic, strong) UIView  *gestureView;- (void)initializeUserInterface; /**< 初始化用户界面 */@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    [self initializeUserInterface];}#pragma mark - Initialize- (void)initializeUserInterface {    self.title = @"拖拽手势";    self.view.backgroundColor = [UIColor whiteColor];    // 视图加载    [self.view addSubview:self.stateLabel];    [self.view addSubview:self.gestureView];    // 1、拖拽手势    UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(respondsToPanGestureRecognier:)];    [_gestureView addGestureRecognizer:panGesture];}#pragma mark - Gestures// 拖拽手势- (void)respondsToPanGestureRecognier:(UIPanGestureRecognizer *)gesture {    // 声明一个静态的变量记录拖拽视图时视图当前的中心点位置    static CGPoint currentCenter;    if (gesture.state == UIGestureRecognizerStateBegan) {        // 赋值currentCenter        currentCenter = _gestureView.center;        _stateLabel.text = @"拖拽手势开始";    }else if (gesture.state == UIGestureRecognizerStateChanged) {        // 获取拖拽手势在某一个视图拖拽的距离        CGPoint translation = [gesture translationInView:self.view];        // 改变_gestureView.center        _gestureView.center = CGPointMake(currentCenter.x + translation.x, currentCenter.y + translation.y);        _stateLabel.text = @"拖拽手势拖拽中";    }else if (gesture.state == UIGestureRecognizerStateEnded) {        // 更新静态变量currentCenter的值，供下次识别这个手势时使用        currentCenter = _gestureView.center;        _stateLabel.text = @"拖拽手势结束";    }  }#pragma mark - Getters- (UILabel *)stateLabel {    if (!_stateLabel) {        _stateLabel = [[UILabel alloc] init];        _stateLabel.bounds = CGRectMake(0, 0, CGRectGetWidth(self.view.bounds), 45);        _stateLabel.center = CGPointMake(CGRectGetMidX(self.view.bounds), 64 + CGRectGetMidY(_stateLabel.bounds) + 45);        _stateLabel.textAlignment = NSTextAlignmentCenter;        _stateLabel.font = [UIFont boldSystemFontOfSize:25];    }    return _stateLabel;}- (UIView *)gestureView {    if (!_gestureView) {        _gestureView = [[UIView alloc] init];        _gestureView.bounds = CGRectMake(0, 0, 180, 180);        _gestureView.center = self.view.center;        _gestureView.backgroundColor = [UIColor blackColor];        // 开启用户交互        _gestureView.userInteractionEnabled = YES;    }    return _gestureView;}@end

捏合手势 UIPinchGestureRecognizer

1、常用属性

• scale：缩放值

2、效果实现，根据手势缩放视图，并显示手势状态：

3、代码示例

#import "ViewController.h"@interface ViewController ()@property (nonatomic, strong) UILabel *stateLabel;@property (nonatomic, strong) UIView  *gestureView;- (void)initializeUserInterface; /**< 初始化用户界面 */@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    [self initializeUserInterface];}#pragma mark - Initialize- (void)initializeUserInterface {    self.title = @"捏合手势";    self.view.backgroundColor = [UIColor whiteColor];    // 视图加载    [self.view addSubview:self.stateLabel];    [self.view addSubview:self.gestureView];    // 1、捏合手势    UIPinchGestureRecognizer *pinchGesture = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(respondsToPinchGestureRecognizer:)];    [_gestureView addGestureRecognizer:pinchGesture];}#pragma mark - Gestures// 捏合手势- (void)respondsToPinchGestureRecognizer:(UIPinchGestureRecognizer *)gesture {    // 声明一个静态的变量记录捏合时缩放值    static CGFloat lastScale;    if (gesture.state == UIGestureRecognizerStateBegan) {        lastScale = gesture.scale;        _stateLabel.text = @"捏合手势开始";    }else if (gesture.state == UIGestureRecognizerStateChanged) {        CGFloat changeScale = (gesture.scale - lastScale) / 2 + 1;        if (_gestureView.bounds.size.width < 100) { // 当试图的宽度 < 100时就不能再缩小            return;        }else {            _gestureView.transform = CGAffineTransformScale(_gestureView.transform, changeScale, changeScale);            lastScale = gesture.scale;        }    }else if (gesture.state == UIGestureRecognizerStateEnded) {        lastScale = 1;        _stateLabel.text = @"捏合手势结束";    }}#pragma mark - Getters- (UILabel *)stateLabel {    if (!_stateLabel) {        _stateLabel = [[UILabel alloc] init];        _stateLabel.bounds = CGRectMake(0, 0, CGRectGetWidth(self.view.bounds), 45);        _stateLabel.center = CGPointMake(CGRectGetMidX(self.view.bounds), 64 + CGRectGetMidY(_stateLabel.bounds) + 45);        _stateLabel.textAlignment = NSTextAlignmentCenter;        _stateLabel.font = [UIFont boldSystemFontOfSize:25];    }    return _stateLabel;}- (UIView *)gestureView {    if (!_gestureView) {        _gestureView = [[UIView alloc] init];        _gestureView.bounds = CGRectMake(0, 0, 180, 180);        _gestureView.center = self.view.center;        _gestureView.backgroundColor = [UIColor blackColor];        // 开启用户交互        _gestureView.userInteractionEnabled = YES;    }    return _gestureView;}@end

旋转手势 UIRotationGestureRecognizer

1、常用属性

• rotation：旋转角度

2、效果实现，根据旋转手势旋转视图，并显示手势状态：

3、代码示例

#import "ViewController.h"@interface ViewController ()@property (nonatomic, strong) UILabel *stateLabel;@property (nonatomic, strong) UIView  *gestureView;- (void)initializeUserInterface; /**< 初始化用户界面 */@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    [self initializeUserInterface];}#pragma mark - Initialize- (void)initializeUserInterface {    self.title = @"旋转手势";    self.view.backgroundColor = [UIColor whiteColor];    // 视图加载    [self.view addSubview:self.stateLabel];    [self.view addSubview:self.gestureView];    // 1、旋转手势    UIRotationGestureRecognizer *rotationGesture = [[UIRotationGestureRecognizer alloc] initWithTarget:self action:@selector(respondsToRotationGestureRecognizer:)];    [_gestureView addGestureRecognizer:rotationGesture];}#pragma mark - Gestures// 旋转手势- (void)respondsToRotationGestureRecognizer:(UIRotationGestureRecognizer *)gesture {    static CGFloat lastRotate;    if (gesture.state == UIGestureRecognizerStateBegan) {        lastRotate = gesture.rotation;        _stateLabel.text = @"旋转手势开始";    }else if (gesture.state == UIGestureRecognizerStateChanged){        CGFloat changeRotate = gesture.rotation - lastRotate;        _gestureView.transform = CGAffineTransformRotate(_gestureView.transform, changeRotate);        lastRotate = gesture.rotation;    }else if(gesture.state){        lastRotate = 0;        _stateLabel.text = @"旋转手势结束";    }}#pragma mark - Getters- (UILabel *)stateLabel {    if (!_stateLabel) {        _stateLabel = [[UILabel alloc] init];        _stateLabel.bounds = CGRectMake(0, 0, CGRectGetWidth(self.view.bounds), 45);        _stateLabel.center = CGPointMake(CGRectGetMidX(self.view.bounds), 64 + CGRectGetMidY(_stateLabel.bounds) + 45);        _stateLabel.textAlignment = NSTextAlignmentCenter;        _stateLabel.font = [UIFont boldSystemFontOfSize:25];    }    return _stateLabel;}- (UIView *)gestureView {    if (!_gestureView) {        _gestureView = [[UIView alloc] init];        _gestureView.bounds = CGRectMake(0, 0, 180, 180);        _gestureView.center = self.view.center;        _gestureView.backgroundColor = [UIColor blackColor];        // 开启用户交互        _gestureView.userInteractionEnabled = YES;    }    return _gestureView;}@end