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