手勢識別在 iOS 中非常重要,他極大地提高了移動設備的使用便捷性。
iOS 系統在 3.2 以后,他提供了一些常用的手勢(UIGestureRecognizer 的子類),開發者可以直接使用他們進行手勢操作。
UipanGestureRecognizer(拖動)
UIPinchGestureRecognizer(捏合)
UIRotationGestureRecognizer(旋轉)
UITapGestureRecognizer(點按)
UILongPRessGestureRecognizer(長按)
?UISwipeGestureRecognizer(輕掃)
另外,可以通過繼承 UIGestureRecognizer 類,實現自定義手勢(手勢識別器類)。
PS:自定義手勢時,需要 #import <UIKit/UIGestureRecognizerSubclass.h>,一般需實現如下方法:
1 - (void)reset;2 3 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event;4 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event;5 - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event;6 - (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event;7 //以上方法在分類 UIGestureRecognizer (UIGestureRecognizerProtected) 中聲明,更多方法聲明請自行查看
UIGestureRecognizer 的繼承關系如下:
在六種手勢識別中,只有一種手勢是離散型手勢,他就是 UITapGestureRecognizer。
離散型手勢的特點就是:一旦識別就無法取消,而且只會調用一次手勢操作事件(初始化手勢時指定的回調方法)。
?換句話說其他五種手勢是連續型手勢,而連續型手勢的特點就是:會多次調用手勢操作事件,而且在連續手勢識別后可以取消手勢。從下圖可以看出兩者調用操作事件的次數是不同的:
手勢狀態枚舉如下:
1 typedef NS_ENUM(NSInteger, UIGestureRecognizerState) {2 UIGestureRecognizerStatePossible, // 尚未識別是何種手勢操作(但可能已經觸發了觸摸事件),默認狀態3 UIGestureRecognizerStateBegan, // 手勢已經開始,此時已經被識別,但是這個過程中可能發生變化,手勢操作尚未完成4 UIGestureRecognizerStateChanged, // 手勢狀態發生轉變5 UIGestureRecognizerStateEnded, // 手勢識別操作完成(此時已經松開手指)6 UIGestureRecognizerStateCancelled, // 手勢被取消,恢復到默認狀態7 UIGestureRecognizerStateFailed, // 手勢識別失敗,恢復到默認狀態8 UIGestureRecognizerStateRecognized = UIGestureRecognizerStateEnded // 手勢識別完成,同UIGestureRecognizerStateEnded9 };
但是連續型手勢要復雜一些,就拿旋轉手勢來說,如果兩個手指點下去不做任何操作,此時并不能識別手勢(因為我們還沒旋轉)但是其實已經觸發了觸摸開始事件,此時處于狀態0;如果此時旋轉會被識別,也就會調用對應的操作事件,同時狀態變成1(手勢開始),但是狀態1只有一瞬間;緊接著狀態變為2(因為我們的旋轉需要持續一會),并且重復調用操作事件(如果在事件中打印狀態會重復打印2);松開手指,此時狀態變為3,并調用1次操作事件。
使用手勢很簡單,分為三步:
創建手勢識別器對象實例。創建時,指定一個回調方法,當手勢開始,改變、或結束時,執行回調方法。
設置手勢識別器對象實例的相關屬性(可選部分)
添加到需要識別的 View 中。每個手勢只對應一個 View,當屏幕觸摸在 View 的邊界內時,如果手勢和預定的一樣,那就會執行回調方法。
PS:一個手勢只能對應一個 View,但是一個 View 可以有多個手勢。建議在真機上測試這些手勢,模擬器操作不太方便,可能導致認為手勢失效的情況。(模擬器測試捏合和旋轉手勢時,按住 option 鍵,再用觸摸板或鼠標操作)
功能描述:
附加到兩個圖片視圖 UIImageView 的有『拖動』、『捏合』、『旋轉』、『點按』;
而『輕掃』和『自定義手勢 KMGestureRecognizer』附加在根視圖 UIView 中。
拖動:進行當前圖片視圖位置移動
捏合:進行當前圖片視圖縮放
旋轉:進行當前圖片視圖角度旋轉
點按:雙擊恢復當前圖片視圖的縮放、角度旋轉、不透明度
長按:設置當前圖片視圖的不透明度為0.7
輕掃:左右輕掃設置兩個圖片視圖為居中,同時以垂直居中的特定偏移量定位
自定義手勢:撓癢功能,左右掃動共3次或以上,設置兩個圖片視圖為居中,同時以水平居中的特定偏移量定位
效果如下:
KMGestureRecognizer.h
1 #import <UIKit/UIKit.h> 2 3 typedef NS_ENUM(NSUInteger, Direction) { 4 DirectionUnknown, 5 DirectionLeft, 6 DirectionRight 7 }; 8 9 @interface KMGestureRecognizer : UIGestureRecognizer10 @property (assign, nonatomic) NSUInteger tickleCount; //撓癢次數11 @property (assign, nonatomic) CGPoint currentTickleStart; //當前撓癢開始坐標位置12 @property (assign, nonatomic) Direction lastDirection; //最后一次撓癢方向13 14 @end
KMGestureRecognizer.m
1 #import "KMGestureRecognizer.h" 2 #import <UIKit/UIGestureRecognizerSubclass.h> 3 4 @implementation KMGestureRecognizer 5 #define kMinTickleSpacing 20.0 6 #define kMaxTickleCount 3 7 8 - (void)reset { 9 _tickleCount = 0;10 _currentTickleStart = CGPointZero;11 _lastDirection = DirectionUnknown;12 13 if (self.state == UIGestureRecognizerStatePossible) {14 self.state = UIGestureRecognizerStateFailed;15 }16 }17 18 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {19 UITouch *touch = [touches anyObject];20 _currentTickleStart = [touch locationInView:self.view]; //設置當前撓癢開始坐標位置21 }22 23 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {24 //『當前撓癢開始坐標位置』和『移動后坐標位置』進行 X 軸值比較,得到是向左還是向右移動25 UITouch *touch = [touches anyObject];26 CGPoint tickleEnd = [touch locationInView:self.view];27 CGFloat tickleSpacing = tickleEnd.x - _currentTickleStart.x;28 Direction currentDirection = tickleSpacing < 0 ? DirectionLeft : DirectionRight;29 30 //移動的 X 軸間距值是否符合要求,足夠大31 if (ABS(tickleSpacing) >= kMinTickleSpacing) {32 //判斷是否有三次不同方向的動作,如果有則手勢結束,將執行回調方法33 if (_lastDirection == DirectionUnknown ||34 (_lastDirection == DirectionLeft && currentDirection == DirectionRight) ||35 (_lastDirection == DirectionRight && currentDirection == DirectionLeft)) {36 _tickleCount++;37 _currentTickleStart = tickleEnd;38 _lastDirection = currentDirection;39 40 if (_tickleCount >= kMaxTickleCount && self.state == UIGestureRecognizerStatePossible) {41 self.state = UIGestureRecognizerStateEnded;42 //NSLog(@"自定義手勢成功,將執行回調方法");43 }44 }45 }46 }47 48 - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {49 [self reset];50 }51 52 - (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event {53 [self reset];54 }55 56 @end
ViewController.h
1 #import <UIKit/UIKit.h>2 #import "KMGestureRecognizer.h"3 4 @interface ViewController : UIViewController5 @property (strong, nonatomic) UIImageView *imgV;6 @property (strong, nonatomic) UIImageView *imgV2;7 @property (strong, nonatomic) KMGestureRecognizer *customGestureRecognizer;8 9 @end
ViewController.m
1 #import "ViewController.h" 2 3 @interface ViewController () 4 - (void)handlePan:(UIPanGestureRecognizer *)recognizer; 5 - (void)handlePinch:(UIPinchGestureRecognizer *)recognizer; 6 - (void)handleRotation:(UIRotationGestureRecognizer *)recognizer; 7 - (void)handleTap:(UITapGestureRecognizer *)recognizer; 8 - (void)handleLongPress:(UILongPressGestureRecognizer *)recognizer; 9 - (void)handleSwipe:(UISwipeGestureRecognizer *)recognizer; 10 - (void)handleCustomGestureRecognizer:(KMGestureRecognizer *)recognizer; 11 12 - (void)bindPan:(UIImageView *)imgVCustom; 13 - (void)bindPinch:(UIImageView *)imgVCustom; 14 - (void)bindRotation:(UIImageView *)imgVCustom; 15 - (void)bindTap:(UIImageView *)imgVCustom; 16 - (void)bindLongPress:(UIImageView *)imgVCustom; 17 - (void)bindSwipe; 18 - (void)bingCustomGestureRecognizer; 19 - (void)layoutUI; 20 @end 21 22 @implementation ViewController 23 24 - (void)viewDidLoad { 25 [super viewDidLoad]; 26 27 [self layoutUI]; 28 } 29 30 - (void)didReceiveMemoryWarning { 31 [super didReceiveMemoryWarning]; 32 // Dispose of any resources that can be recreated. 33 } 34 35 #pragma mark - 處理手勢操作 36 /** 37 * 處理拖動手勢 38 * 39 * @param recognizer 拖動手勢識別器對象實例 40 */ 41 - (void)handlePan:(UIPanGestureRecognizer *)recognizer { 42 //視圖前置操作 43 [recognizer.view.superview bringSubviewToFront:recognizer.view]; 44 45 CGPoint center = recognizer.view.center; 46 CGFloat cornerRadius = recognizer.view.frame.size.width / 2; 47 CGPoint translation = [recognizer translationInView:self.view]; 48 //NSLog(@"%@", NSStringFromCGPoint(translation)); 49 recognizer.view.center = CGPointMake(center.x + translation.x, center.y + translation.y); 50 [recognizer setTranslation:CGPointZero inView:self.view]; 51 52 if (recognizer.state == UIGestureRecognizerStateEnded) { 53 //計算速度向量的長度,當他小于200時,滑行會很短 54 CGPoint velocity = [recognizer velocityInView:self.view]; 55 CGFloat magnitude = sqrtf((velocity.x * velocity.x) + (velocity.y * velocity.y)); 56 CGFloat slideMult = magnitude / 200; 57 //NSLog(@"magnitude: %f, slideMult: %f", magnitude, slideMult); //e.g. 397.973175, slideMult: 1.989866 58 59 //基于速度和速度因素計算一個終點 60 float slideFactor = 0.1 * slideMult; 61 CGPoint finalPoint = CGPointMake(center.x + (velocity.x * slideFactor), 62 center.y + (velocity.y * slideFactor)); 63 //限制最?。踓ornerRadius]和最大邊界值[self.view.bounds.size.width - cornerRadius],以免拖動出屏幕界限 64 finalPoint.x = MIN(MAX(finalPoint.x, cornerRadius), 65 self.view.bounds.size.width - cornerRadius); 66 finalPoint.y = MIN(MAX(finalPoint.y, cornerRadius), 67 self.view.bounds.size.height - cornerRadius); 68 69 //使用 UIView 動畫使 view 滑行到終點 70 [UIView animateWithDuration:slideFactor*2 71 delay:0 72 options:UIViewAnimationOptionCurveEaSEOut 73 animations:^{ 74 recognizer.view.center = finalPoint; 75 } 76 completion:nil]; 77 } 78 } 79 80 /** 81 * 處理捏合手勢 82 * 83 * @param recognizer 捏合手勢識別器對象實例 84 */ 85 - (void)handlePinch:(UIPinchGestureRecognizer *)recognizer { 86 CGFloat scale = recognizer.scale; 87 recognizer.view.transform = CGAffineTransformScale(recognizer.view.transform, scale, scale); //在已縮放大小基礎下進行累加變化;區別于:使用 CGAffineTransformMakeScale 方法就是在原大小基礎下進行變化 88 recognizer.scale = 1.0; 89 } 90 91 /** 92 * 處理旋轉手勢 93 * 94 * @param recognizer 旋轉手勢識別器對象實例 95 */ 96 - (void)handleRotation:(UIRotationGestureRecognizer *)recognizer { 97 recognizer.view.transform = CGAffineTransformRotate(recognizer.view.transform, recognizer.rotation); 98 recognizer.rotation = 0.0; 99 }100 101 /**102 * 處理點按手勢103 *104 * @param recognizer 點按手勢識別器對象實例105 */106 - (void)handleTap:(UITapGestureRecognizer *)recognizer {107 UIView *view = recognizer.view;108 view.transform = CGAffineTransformMakeScale(1.0, 1.0);109 view.transform = CGAffineTransformMakeRotation(0.0);110 view.alpha = 1.0;111 }112 113 /**114 * 處理長按手勢115 *116 * @param recognizer 點按手勢識別器對象實例117 */118 - (void)handleLongPress:(UILongPressGestureRecognizer *)recognizer {119 //長按的時候,設置不透明度為0.7120 recognizer.view.alpha = 0.7;121 }122 123 /**124 * 處理輕掃手勢125 *126 * @param recognizer 輕掃手勢識別器對象實例127 */128 - (void)handleSwipe:(UISwipeGestureRecognizer *)recognizer {129 //代碼塊方式封裝操作方法130 void (^positionOperation)() = ^() {131 CGPoint newPoint = recognizer.view.center;132 newPoint.y -= 20.0;133 _imgV.center = newPoint;134 135 newPoint.y += 40.0;136 _imgV2.center = newPoint;137 };138 139 //根據輕掃方向,進行不同控制140 switch (recognizer.direction) {141 case UISwipeGestureRecognizerDirectionRight: {142 positionOperation();143 break;144 }145 case UISwipeGestureRecognizerDirectionLeft: {146 positionOperation();147 break;148 }149 case UISwipeGestureRecognizerDirectionUp: {150 break;151 }152 case UISwipeGestureRecognizerDirectionDown: {153 break;154 }155 }156 }157 158 /**159 * 處理自定義手勢160 *161 * @param recognizer 自定義手勢識別器對象實例162 */163 - (void)handleCustomGestureRecognizer:(KMGestureRecognizer *)recognizer {164 //代碼塊方式封裝操作方法165 void (^positionOperation)() = ^() {166 CGPoint newPoint = recognizer.view.center;167 newPoint.x -= 20.0;168 _imgV.center = newPoint;169 170 newPoint.x += 40.0;171 _imgV2.center = newPoint;172 };173 174 positionOperation();175 }176 177 178 #pragma mark - 綁定手勢操作179 /**180 * 綁定拖動手勢181 *182 * @param imgVCustom 綁定到圖片視圖對象實例183 */184 - (void)bindPan:(UIImageView *)imgVCustom {185 UIPanGestureRecognizer *recognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self186 action:@selector(handlePan:)];187 [imgVCustom addGestureRecognizer:recognizer];188 }189 190 /**191 * 綁定捏合手勢192 *193 * @param imgVCustom 綁定到圖片視圖對象實例194 */195 - (void)bindPinch:(UIImageView *)imgVCustom {196 UIPinchGestureRecognizer *recognizer = [[UIPinchGestureRecognizer alloc] initWithTarget:self197 action:@selector(handlePinch:)];198 [imgVCustom addGestureRecognizer:recognizer];199 //[recognizer requireGestureRecognizerToFail:imgVCustom.gestureRecognizers.firstObject];200 }201 202 /**203 * 綁定旋轉手勢204 *205 * @param imgVCustom 綁定到圖片視圖對象實例206 */207 - (void)bindRotation:(UIImageView *)imgVCustom {208 UIRotationGestureRecognizer *recognizer = [[UIRotationGestureRecognizer alloc] initWithTarget:self209 action:@selector(handleRotation:)];210 [imgVCustom addGestureRecognizer:recognizer];211 }212 213 /**214 * 綁定點按手勢215 *216 * @param imgVCustom 綁定到圖片視圖對象實例217 */218 - (void)bindTap:(UIImageView *)imgVCustom {219 UITapGestureRecognizer *recognizer = [[UITapGestureRecognizer alloc] initWithTarget:self220 action:@selector(handleTap:)];221 //使用一根手指雙擊時,才觸發點按手勢識別器222 recognizer.numberOfTapsRequired = 2;223 recognizer.numberOfTouchesRequired = 1;224 [imgVCustom addGestureRecognizer:recognizer];225 }226 227 /**228 * 綁定長按手勢229 *230 * @param imgVCustom 綁定到圖片視圖對象實例231 */232 - (void)bindLongPress:(UIImageView *)imgVCustom {233 UILongPressGestureRecognizer *recognizer = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(handleLongPress:)];234 recognizer.minimumPressDuration = 0.5; //設置最小長按時間;默認為0.5秒235 [imgVCustom addGestureRecognizer:recognizer];236 }237 238 /**239 * 綁定輕掃手勢;支持四個方向的輕掃,但是不同的方向要分別定義輕掃手勢240 */241 - (void)bindSwipe {242 //向右輕掃手勢243 UISwipeGestureRecognizer *recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self244 action:@selector(handleSwipe:)];245 recognizer.direction = UISwipeGestureRecognizerDirectionRight; //設置輕掃方向;默認是 UISwipeGestureRecognizerDirectionRight,即向右輕掃246 [self.view addGestureRecognizer:recognizer];247 [recognizer requireGestureRecognizerToFail:_customGestureRecognizer]; //設置以自定義撓癢手勢優先識別248 249 //向左輕掃手勢250 recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self251 action:@selector(handleSwipe:)];252 recognizer.direction = UISwipeGestureRecognizerDirectionLeft;253 [self.view addGestureRecognizer:recognizer];254 [recognizer requireGestureRecognizerToFail:_customGestureRecognizer]; //設置以自定義撓癢手勢優先識別255 }256 257 /**258 * 綁定自定義撓癢手勢;判斷是否有三次不同方向的動作,如果有則手勢結束,將執行回調方法259 */260 - (void)bingCustomGestureRecognizer {261 //當 recognizer.state 為 UIGestureRecognizerStateEnded 時,才執行回調方法 handleCustomGestureRecognizer:262 263 //_customGestureRecognizer = [KMGestureRecognizer new];264 _customGestureRecognizer = [[KMGestureRecognizer alloc] initWithTarget:self265 action:@selector(handleCustomGestureRecognizer:)];266 [self.view addGestureRecognizer:_customGestureRecognizer];267 }268 269 - (void)layoutUI {270 //圖片視圖 _imgV271 UIImage *img = [UIImage imageNamed:@"Emoticon_tusiji_icon"];272 CGFloat cornerRadius = img.size.width;273 _imgV = [[UIImageView alloc] initWithImage:img];274 _imgV.frame = CGRectMake(20.0, 20.0,275 cornerRadius * 2, cornerRadius * 2);276 _imgV.userInteractionEnabled = YES;277 _imgV.layer.masksToBounds = YES;278 _imgV.layer.cornerRadius = cornerRadius;279 _imgV.layer.borderWidth = 2.0;280 _imgV.layer.borderColor = [UIColor grayColor].CGColor;281 [self.view addSubview:_imgV];282 283 //圖片視圖 _imgV2284 img = [UIImage imageNamed:@"Emoticon_tusiji_icon2"];285 cornerRadius = img.size.width;286 _imgV2 = [[UIImageView alloc] initWithImage:img];287 _imgV2.frame = CGRectMake(20.0, 40.0 + _imgV.frame.size.height,288 cornerRadius * 2, cornerRadius * 2);289 _imgV2.userInteractionEnabled = YES;290 _imgV2.layer.masksToBounds = YES;291 _imgV2.layer.cornerRadius = cornerRadius;292 _imgV2.layer.borderWidth = 2.0;293 _imgV2.layer.borderColor = [UIColor orangeColor].CGColor;294 [self.view addSubview:_imgV2];295 296 297 [self bindPan:_imgV];298 [self bindPinch:_imgV];299 [self bindRotation:_imgV];300 [self bindTap:_imgV];301 [self bindLongPress:_imgV];302 303 [self bindPan:_imgV2];304 [self bindPinch:_imgV2];305 [self bindRotation:_imgV2];306 [self bindTap:_imgV2];307 [self bindLongPress:_imgV2];308 309 //為了處理手勢識別優先級的問題,這里需先綁定自定義撓癢手勢310 [self bingCustomGestureRecognizer];311 [self bindSwipe];312 }313 314 @end
新聞熱點
疑難解答