IOS 七種手勢操作（拖動、捏合、旋轉(zhuǎn)、點按、長按、輕掃、自定義）詳解及實例代碼
更新時間：2016年12月12日 15:36:42 投稿：lqh
這篇文章主要介紹了IOS 七種手勢操作（拖動、捏合、旋轉(zhuǎn)、點按、長按、輕掃、自定義）詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下
IOS 七種手勢操作
今天為大家介紹一下IOS 的七種手勢，手勢在開發(fā)中經(jīng)常用到，所以就簡單 通俗易懂的說下， 話不多說，直接看代碼：
1、UIGestureRecognizer 介紹
手勢識別在 iOS 中非常重要，他極大地提高了移動設(shè)備的使用便捷性。
iOS 系統(tǒng)在 3.2 以后，他提供了一些常用的手勢（UIGestureRecognizer 的子類），開發(fā)者可以直接使用他們進(jìn)行手勢操作。
- UIPanGestureRecognizer（拖動）
- UIPinchGestureRecognizer（捏合）
- UIRotationGestureRecognizer（旋轉(zhuǎn)）
- UITapGestureRecognizer（點按）
- UILongPressGestureRecognizer（長按）
- UISwipeGestureRecognizer（輕掃）
另外，可以通過繼承 UIGestureRecognizer 類，實現(xiàn)自定義手勢（手勢識別器類）。
PS：自定義手勢時，需要 #import <UIKit/UIGestureRecognizerSubclass.h>，一般需實現(xiàn)如下方法：
- (void)reset; - (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; //以上方法在分類 UIGestureRecognizer (UIGestureRecognizerProtected) 中聲明，更多方法聲明請自行查看
UIGestureRecognizer 的繼承關(guān)系如下：
2、手勢狀態(tài)
在六種手勢識別中，只有一種手勢是離散型手勢，他就是 UITapGestureRecognizer。
離散型手勢的特點就是：一旦識別就無法取消，而且只會調(diào)用一次手勢操作事件（初始化手勢時指定的回調(diào)方法）。
換句話說其他五種手勢是連續(xù)型手勢，而連續(xù)型手勢的特點就是：會多次調(diào)用手勢操作事件，而且在連續(xù)手勢識別后可以取消手勢。從下圖可以看出兩者調(diào)用操作事件的次數(shù)是不同的：
手勢狀態(tài)枚舉如下：
typedef NS_ENUM(NSInteger, UIGestureRecognizerState) {
UIGestureRecognizerStatePossible, // 尚未識別是何種手勢操作（但可能已經(jīng)觸發(fā)了觸摸事件），默認(rèn)狀態(tài)
UIGestureRecognizerStateBegan, // 手勢已經(jīng)開始，此時已經(jīng)被識別，但是這個過程中可能發(fā)生變化，手勢操作尚未完成
UIGestureRecognizerStateChanged, // 手勢狀態(tài)發(fā)生轉(zhuǎn)變
UIGestureRecognizerStateEnded, // 手勢識別操作完成（此時已經(jīng)松開手指）
UIGestureRecognizerStateCancelled, // 手勢被取消，恢復(fù)到默認(rèn)狀態(tài)
UIGestureRecognizerStateFailed, // 手勢識別失敗，恢復(fù)到默認(rèn)狀態(tài)
UIGestureRecognizerStateRecognized = UIGestureRecognizerStateEnded // 手勢識別完成，同UIGestureRecognizerStateEnded
};
對于離散型手勢 UITapGestureRecgnizer 要么被識別，要么失敗，點按（假設(shè)點按次數(shù)設(shè)置為1，并且沒有添加長按手勢）下去一次不松開則此時什么也不會發(fā)生，松開手指立即識別并調(diào)用操作事件，并且狀態(tài)為3（已完成）。
但是連續(xù)型手勢要復(fù)雜一些，就拿旋轉(zhuǎn)手勢來說，如果兩個手指點下去不做任何操作，此時并不能識別手勢（因為我們還沒旋轉(zhuǎn)）但是其實已經(jīng)觸發(fā)了觸摸開始事件，此時處于狀態(tài)0；如果此時旋轉(zhuǎn)會被識別，也就會調(diào)用對應(yīng)的操作事件，同時狀態(tài)變成1（手勢開始），但是狀態(tài)1只有一瞬間；緊接著狀態(tài)變?yōu)?（因為我們的旋轉(zhuǎn)需要持續(xù)一會），并且重復(fù)調(diào)用操作事件（如果在事件中打印狀態(tài)會重復(fù)打印2）；松開手指，此時狀態(tài)變?yōu)?，并調(diào)用1次操作事件。
3、使用手勢的步驟
使用手勢很簡單，分為三步：
- 創(chuàng)建手勢識別器對象實例。創(chuàng)建時，指定一個回調(diào)方法，當(dāng)手勢開始，改變、或結(jié)束時，執(zhí)行回調(diào)方法。
- 設(shè)置手勢識別器對象實例的相關(guān)屬性（可選部分）
- 添加到需要識別的 View 中。每個手勢只對應(yīng)一個 View，當(dāng)屏幕觸摸在 View 的邊界內(nèi)時，如果手勢和預(yù)定的一樣，那就會執(zhí)行回調(diào)方法。
PS：一個手勢只能對應(yīng)一個 View，但是一個 View 可以有多個手勢。建議在真機(jī)上測試這些手勢，模擬器操作不太方便，可能導(dǎo)致認(rèn)為手勢失效的情況。（模擬器測試捏合和旋轉(zhuǎn)手勢時，按住 option 鍵，再用觸摸板或鼠標(biāo)操作）
4、舉例說明
功能描述：
附加到兩個圖片視圖 UIImageView 的有『拖動』、『捏合』、『旋轉(zhuǎn)』、『點按』；
而『輕掃』和『自定義手勢 KMGestureRecognizer』附加在根視圖 UIView 中。
拖動：進(jìn)行當(dāng)前圖片視圖位置移動
捏合：進(jìn)行當(dāng)前圖片視圖縮放
旋轉(zhuǎn)：進(jìn)行當(dāng)前圖片視圖角度旋轉(zhuǎn)
點按：雙擊恢復(fù)當(dāng)前圖片視圖的縮放、角度旋轉(zhuǎn)、不透明度
長按：設(shè)置當(dāng)前圖片視圖的不透明度為0.7
輕掃：左右輕掃設(shè)置兩個圖片視圖為居中，同時以垂直居中的特定偏移量定位
自定義手勢：撓癢功能，左右掃動共3次或以上，設(shè)置兩個圖片視圖為居中，同時以水平居中的特定偏移量定位
效果如下：
KMGestureRecognizer.h
#import <UIKit/UIKit.h>
typedef NS_ENUM(NSUInteger, Direction) {
DirectionUnknown,
DirectionLeft,
DirectionRight
};
@interface KMGestureRecognizer : UIGestureRecognizer
@property (assign, nonatomic) NSUInteger tickleCount; //撓癢次數(shù)
@property (assign, nonatomic) CGPoint currentTickleStart; //當(dāng)前撓癢開始坐標(biāo)位置
@property (assign, nonatomic) Direction lastDirection; //最后一次撓癢方向
@end
KMGestureRecognizer.m
#import "KMGestureRecognizer.h"
#import <UIKit/UIGestureRecognizerSubclass.h>
@implementation KMGestureRecognizer
#define kMinTickleSpacing 20.0
#define kMaxTickleCount 3
- (void)reset {
_tickleCount = 0;
_currentTickleStart = CGPointZero;
_lastDirection = DirectionUnknown;
if (self.state == UIGestureRecognizerStatePossible) {
self.state = UIGestureRecognizerStateFailed;
}
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
_currentTickleStart = [touch locationInView:self.view]; //設(shè)置當(dāng)前撓癢開始坐標(biāo)位置
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
//『當(dāng)前撓癢開始坐標(biāo)位置』和『移動后坐標(biāo)位置』進(jìn)行 X 軸值比較，得到是向左還是向右移動
UITouch *touch = [touches anyObject];
CGPoint tickleEnd = [touch locationInView:self.view];
CGFloat tickleSpacing = tickleEnd.x - _currentTickleStart.x;
Direction currentDirection = tickleSpacing < 0 ? DirectionLeft : DirectionRight;
//移動的 X 軸間距值是否符合要求，足夠大
if (ABS(tickleSpacing) >= kMinTickleSpacing) {
//判斷是否有三次不同方向的動作，如果有則手勢結(jié)束，將執(zhí)行回調(diào)方法
if (_lastDirection == DirectionUnknown ||
(_lastDirection == DirectionLeft && currentDirection == DirectionRight) ||
(_lastDirection == DirectionRight && currentDirection == DirectionLeft)) {
_tickleCount++;
_currentTickleStart = tickleEnd;
_lastDirection = currentDirection;
if (_tickleCount >= kMaxTickleCount && self.state == UIGestureRecognizerStatePossible) {
self.state = UIGestureRecognizerStateEnded;
//NSLog(@"自定義手勢成功，將執(zhí)行回調(diào)方法");
}
}
}
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
[self reset];
}
- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event {
[self reset];
}
@end
ViewController.h
#import <UIKit/UIKit.h> #import "KMGestureRecognizer.h" @interface ViewController : UIViewController @property (strong, nonatomic) UIImageView *imgV; @property (strong, nonatomic) UIImageView *imgV2; @property (strong, nonatomic) KMGestureRecognizer *customGestureRecognizer; @end
ViewController.m
#import "ViewController.h"
@interface ViewController ()
- (void)handlePan:(UIPanGestureRecognizer *)recognizer;
- (void)handlePinch:(UIPinchGestureRecognizer *)recognizer;
- (void)handleRotation:(UIRotationGestureRecognizer *)recognizer;
- (void)handleTap:(UITapGestureRecognizer *)recognizer;
- (void)handleLongPress:(UILongPressGestureRecognizer *)recognizer;
- (void)handleSwipe:(UISwipeGestureRecognizer *)recognizer;
- (void)handleCustomGestureRecognizer:(KMGestureRecognizer *)recognizer;
- (void)bindPan:(UIImageView *)imgVCustom;
- (void)bindPinch:(UIImageView *)imgVCustom;
- (void)bindRotation:(UIImageView *)imgVCustom;
- (void)bindTap:(UIImageView *)imgVCustom;
- (void)bindLongPress:(UIImageView *)imgVCustom;
- (void)bindSwipe;
- (void)bingCustomGestureRecognizer;
- (void)layoutUI;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self layoutUI];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
#pragma mark - 處理手勢操作
/**
* 處理拖動手勢
*
* @param recognizer 拖動手勢識別器對象實例
*/
- (void)handlePan:(UIPanGestureRecognizer *)recognizer {
//視圖前置操作
[recognizer.view.superview bringSubviewToFront:recognizer.view];
CGPoint center = recognizer.view.center;
CGFloat cornerRadius = recognizer.view.frame.size.width / 2;
CGPoint translation = [recognizer translationInView:self.view];
//NSLog(@"%@", NSStringFromCGPoint(translation));
recognizer.view.center = CGPointMake(center.x + translation.x, center.y + translation.y);
[recognizer setTranslation:CGPointZero inView:self.view];
if (recognizer.state == UIGestureRecognizerStateEnded) {
//計算速度向量的長度，當(dāng)他小于200時，滑行會很短
CGPoint velocity = [recognizer velocityInView:self.view];
CGFloat magnitude = sqrtf((velocity.x * velocity.x) + (velocity.y * velocity.y));
CGFloat slideMult = magnitude / 200;
//NSLog(@"magnitude: %f, slideMult: %f", magnitude, slideMult); //e.g. 397.973175, slideMult: 1.989866
//基于速度和速度因素計算一個終點
float slideFactor = 0.1 * slideMult;
CGPoint finalPoint = CGPointMake(center.x + (velocity.x * slideFactor),
center.y + (velocity.y * slideFactor));
//限制最?。踓ornerRadius］和最大邊界值［self.view.bounds.size.width - cornerRadius］，以免拖動出屏幕界限
finalPoint.x = MIN(MAX(finalPoint.x, cornerRadius),
self.view.bounds.size.width - cornerRadius);
finalPoint.y = MIN(MAX(finalPoint.y, cornerRadius),
self.view.bounds.size.height - cornerRadius);
//使用 UIView 動畫使 view 滑行到終點
[UIView animateWithDuration:slideFactor*2
delay:0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
recognizer.view.center = finalPoint;
}
completion:nil];
}
}
/**
* 處理捏合手勢
*
* @param recognizer 捏合手勢識別器對象實例
*/
- (void)handlePinch:(UIPinchGestureRecognizer *)recognizer {
CGFloat scale = recognizer.scale;
recognizer.view.transform = CGAffineTransformScale(recognizer.view.transform, scale, scale); //在已縮放大小基礎(chǔ)下進(jìn)行累加變化；區(qū)別于：使用 CGAffineTransformMakeScale 方法就是在原大小基礎(chǔ)下進(jìn)行變化
recognizer.scale = 1.0;
}
/**
* 處理旋轉(zhuǎn)手勢
*
* @param recognizer 旋轉(zhuǎn)手勢識別器對象實例
*/
- (void)handleRotation:(UIRotationGestureRecognizer *)recognizer {
recognizer.view.transform = CGAffineTransformRotate(recognizer.view.transform, recognizer.rotation);
recognizer.rotation = 0.0;
}
/**
* 處理點按手勢
*
* @param recognizer 點按手勢識別器對象實例
*/
- (void)handleTap:(UITapGestureRecognizer *)recognizer {
UIView *view = recognizer.view;
view.transform = CGAffineTransformMakeScale(1.0, 1.0);
view.transform = CGAffineTransformMakeRotation(0.0);
view.alpha = 1.0;
}
/**
* 處理長按手勢
*
* @param recognizer 點按手勢識別器對象實例
*/
- (void)handleLongPress:(UILongPressGestureRecognizer *)recognizer {
//長按的時候，設(shè)置不透明度為0.7
recognizer.view.alpha = 0.7;
}
/**
* 處理輕掃手勢
*
* @param recognizer 輕掃手勢識別器對象實例
*/
- (void)handleSwipe:(UISwipeGestureRecognizer *)recognizer {
//代碼塊方式封裝操作方法
void (^positionOperation)() = ^() {
CGPoint newPoint = recognizer.view.center;
newPoint.y -= 20.0;
_imgV.center = newPoint;
newPoint.y += 40.0;
_imgV2.center = newPoint;
};
//根據(jù)輕掃方向，進(jìn)行不同控制
switch (recognizer.direction) {
case UISwipeGestureRecognizerDirectionRight: {
positionOperation();
break;
}
case UISwipeGestureRecognizerDirectionLeft: {
positionOperation();
break;
}
case UISwipeGestureRecognizerDirectionUp: {
break;
}
case UISwipeGestureRecognizerDirectionDown: {
break;
}
}
}
/**
* 處理自定義手勢
*
* @param recognizer 自定義手勢識別器對象實例
*/
- (void)handleCustomGestureRecognizer:(KMGestureRecognizer *)recognizer {
//代碼塊方式封裝操作方法
void (^positionOperation)() = ^() {
CGPoint newPoint = recognizer.view.center;
newPoint.x -= 20.0;
_imgV.center = newPoint;
newPoint.x += 40.0;
_imgV2.center = newPoint;
};
positionOperation();
}
#pragma mark - 綁定手勢操作
/**
* 綁定拖動手勢
*
* @param imgVCustom 綁定到圖片視圖對象實例
*/
- (void)bindPan:(UIImageView *)imgVCustom {
UIPanGestureRecognizer *recognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self
action:@selector(handlePan:)];
[imgVCustom addGestureRecognizer:recognizer];
}
/**
* 綁定捏合手勢
*
* @param imgVCustom 綁定到圖片視圖對象實例
*/
- (void)bindPinch:(UIImageView *)imgVCustom {
UIPinchGestureRecognizer *recognizer = [[UIPinchGestureRecognizer alloc] initWithTarget:self
action:@selector(handlePinch:)];
[imgVCustom addGestureRecognizer:recognizer];
//[recognizer requireGestureRecognizerToFail:imgVCustom.gestureRecognizers.firstObject];
}
/**
* 綁定旋轉(zhuǎn)手勢
*
* @param imgVCustom 綁定到圖片視圖對象實例
*/
- (void)bindRotation:(UIImageView *)imgVCustom {
UIRotationGestureRecognizer *recognizer = [[UIRotationGestureRecognizer alloc] initWithTarget:self
action:@selector(handleRotation:)];
[imgVCustom addGestureRecognizer:recognizer];
}
/**
* 綁定點按手勢
*
* @param imgVCustom 綁定到圖片視圖對象實例
*/
- (void)bindTap:(UIImageView *)imgVCustom {
UITapGestureRecognizer *recognizer = [[UITapGestureRecognizer alloc] initWithTarget:self
action:@selector(handleTap:)];
//使用一根手指雙擊時，才觸發(fā)點按手勢識別器
recognizer.numberOfTapsRequired = 2;
recognizer.numberOfTouchesRequired = 1;
[imgVCustom addGestureRecognizer:recognizer];
}
/**
* 綁定長按手勢
*
* @param imgVCustom 綁定到圖片視圖對象實例
*/
- (void)bindLongPress:(UIImageView *)imgVCustom {
UILongPressGestureRecognizer *recognizer = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(handleLongPress:)];
recognizer.minimumPressDuration = 0.5; //設(shè)置最小長按時間；默認(rèn)為0.5秒
[imgVCustom addGestureRecognizer:recognizer];
}
/**
* 綁定輕掃手勢；支持四個方向的輕掃，但是不同的方向要分別定義輕掃手勢
*/
- (void)bindSwipe {
//向右輕掃手勢
UISwipeGestureRecognizer *recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self
action:@selector(handleSwipe:)];
recognizer.direction = UISwipeGestureRecognizerDirectionRight; //設(shè)置輕掃方向；默認(rèn)是 UISwipeGestureRecognizerDirectionRight，即向右輕掃
[self.view addGestureRecognizer:recognizer];
[recognizer requireGestureRecognizerToFail:_customGestureRecognizer]; //設(shè)置以自定義撓癢手勢優(yōu)先識別
//向左輕掃手勢
recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self
action:@selector(handleSwipe:)];
recognizer.direction = UISwipeGestureRecognizerDirectionLeft;
[self.view addGestureRecognizer:recognizer];
[recognizer requireGestureRecognizerToFail:_customGestureRecognizer]; //設(shè)置以自定義撓癢手勢優(yōu)先識別
}
/**
* 綁定自定義撓癢手勢；判斷是否有三次不同方向的動作，如果有則手勢結(jié)束，將執(zhí)行回調(diào)方法
*/
- (void)bingCustomGestureRecognizer {
//當(dāng) recognizer.state 為 UIGestureRecognizerStateEnded 時，才執(zhí)行回調(diào)方法 handleCustomGestureRecognizer:
//_customGestureRecognizer = [KMGestureRecognizer new];
_customGestureRecognizer = [[KMGestureRecognizer alloc] initWithTarget:self
action:@selector(handleCustomGestureRecognizer:)];
[self.view addGestureRecognizer:_customGestureRecognizer];
}
- (void)layoutUI {
//圖片視圖 _imgV
UIImage *img = [UIImage imageNamed:@"Emoticon_tusiji_icon"];
CGFloat cornerRadius = img.size.width;
_imgV = [[UIImageView alloc] initWithImage:img];
_imgV.frame = CGRectMake(20.0, 20.0,
cornerRadius * 2, cornerRadius * 2);
_imgV.userInteractionEnabled = YES;
_imgV.layer.masksToBounds = YES;
_imgV.layer.cornerRadius = cornerRadius;
_imgV.layer.borderWidth = 2.0;
_imgV.layer.borderColor = [UIColor grayColor].CGColor;
[self.view addSubview:_imgV];
//圖片視圖 _imgV2
img = [UIImage imageNamed:@"Emoticon_tusiji_icon2"];
cornerRadius = img.size.width;
_imgV2 = [[UIImageView alloc] initWithImage:img];
_imgV2.frame = CGRectMake(20.0, 40.0 + _imgV.frame.size.height,
cornerRadius * 2, cornerRadius * 2);
_imgV2.userInteractionEnabled = YES;
_imgV2.layer.masksToBounds = YES;
_imgV2.layer.cornerRadius = cornerRadius;
_imgV2.layer.borderWidth = 2.0;
_imgV2.layer.borderColor = [UIColor orangeColor].CGColor;
[self.view addSubview:_imgV2];
[self bindPan:_imgV];
[self bindPinch:_imgV];
[self bindRotation:_imgV];
[self bindTap:_imgV];
[self bindLongPress:_imgV];
[self bindPan:_imgV2];
[self bindPinch:_imgV2];
[self bindRotation:_imgV2];
[self bindTap:_imgV2];
[self bindLongPress:_imgV2];
//為了處理手勢識別優(yōu)先級的問題，這里需先綁定自定義撓癢手勢
[self bingCustomGestureRecognizer];
[self bindSwipe];
}
@end
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
本篇文章主要介紹了iOS 圖片驗證碼繪制實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
一個iOS上的秒表小應(yīng)用的實現(xiàn)方法分享
這篇文章主要介紹了一個iOS上的秒表小應(yīng)用的實現(xiàn)方法分享,代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下2015-10-10
本篇文章主要介紹了ios用AFN進(jìn)行文件上傳的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了iOS圖片放大的兩種方式，transform方式放大圖片,從中心開始放大，另一種用frame改變寬高，詳細(xì)內(nèi)容請參考下文2016-04-04
這篇文章主要為大家介紹了99%?iOS開發(fā)都不知道的KVO崩潰分析詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要為大家詳細(xì)介紹了iOS自定義滑桿效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了IOS中UIWebView的使用詳解，涉及到初始化與三種加載方式，一些常用的屬性和變量及ios7中的一些新特征，本文介紹的非常詳細(xì)，感興趣的朋友一起學(xué)習(xí)吧2016-02-02
本篇文章主要介紹了iOS 圖片壓縮方法的示例代碼，主要有兩種壓縮圖片的方法，有興趣的可以了解一下，有興趣的可以了解一下。2017-01-01
這篇文章主要給大家介紹了關(guān)于iOS實現(xiàn)圖片水印與簡單封裝的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
這篇文章主要為大家詳細(xì)介紹了iOS自定義水平滾動條、進(jìn)度條，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-04-04