手勢識別在 iOS 中非常重要,他極大地提高了移動(dòng)設(shè)備的使用便捷性。
iOS 系統(tǒng)在 3.2 以后,他提供了一些常用的手勢(UIGestureRecognizer 的子類),開發(fā)者可以直接使用他們進(jìn)行手勢操作。
UipanGestureRecognizer(拖動(dòng))
UIPinchGestureRecognizer(捏合)
UIRotationGestureRecognizer(旋轉(zhuǎn))
UITapGestureRecognizer(點(diǎn)按)
UILongPRessGestureRecognizer(長按)
?UISwipeGestureRecognizer(輕掃)
另外,可以通過繼承 UIGestureRecognizer 類,實(shí)現(xiàn)自定義手勢(手勢識別器類)。
PS:自定義手勢時(shí),需要 #import <UIKit/UIGestureRecognizerSubclass.h>,一般需實(shí)現(xiàn)如下方法:
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 的繼承關(guān)系如下:
在六種手勢識別中,只有一種手勢是離散型手勢,他就是 UITapGestureRecognizer。
離散型手勢的特點(diǎn)就是:一旦識別就無法取消,而且只會(huì)調(diào)用一次手勢操作事件(初始化手勢時(shí)指定的回調(diào)方法)。
?換句話說其他五種手勢是連續(xù)型手勢,而連續(xù)型手勢的特點(diǎn)就是:會(huì)多次調(diào)用手勢操作事件,而且在連續(xù)手勢識別后可以取消手勢。從下圖可以看出兩者調(diào)用操作事件的次數(shù)是不同的:
手勢狀態(tài)枚舉如下:
1 typedef NS_ENUM(NSInteger, UIGestureRecognizerState) {2 UIGestureRecognizerStatePossible, // 尚未識別是何種手勢操作(但可能已經(jīng)觸發(fā)了觸摸事件),默認(rèn)狀態(tài)3 UIGestureRecognizerStateBegan, // 手勢已經(jīng)開始,此時(shí)已經(jīng)被識別,但是這個(gè)過程中可能發(fā)生變化,手勢操作尚未完成4 UIGestureRecognizerStateChanged, // 手勢狀態(tài)發(fā)生轉(zhuǎn)變5 UIGestureRecognizerStateEnded, // 手勢識別操作完成(此時(shí)已經(jīng)松開手指)6 UIGestureRecognizerStateCancelled, // 手勢被取消,恢復(fù)到默認(rèn)狀態(tài)7 UIGestureRecognizerStateFailed, // 手勢識別失敗,恢復(fù)到默認(rèn)狀態(tài)8 UIGestureRecognizerStateRecognized = UIGestureRecognizerStateEnded // 手勢識別完成,同UIGestureRecognizerStateEnded9 };
但是連續(xù)型手勢要復(fù)雜一些,就拿旋轉(zhuǎn)手勢來說,如果兩個(gè)手指點(diǎn)下去不做任何操作,此時(shí)并不能識別手勢(因?yàn)槲覀冞€沒旋轉(zhuǎn))但是其實(shí)已經(jīng)觸發(fā)了觸摸開始事件,此時(shí)處于狀態(tài)0;如果此時(shí)旋轉(zhuǎn)會(huì)被識別,也就會(huì)調(diào)用對應(yīng)的操作事件,同時(shí)狀態(tài)變成1(手勢開始),但是狀態(tài)1只有一瞬間;緊接著狀態(tài)變?yōu)?(因?yàn)槲覀兊男D(zhuǎn)需要持續(xù)一會(huì)),并且重復(fù)調(diào)用操作事件(如果在事件中打印狀態(tài)會(huì)重復(fù)打印2);松開手指,此時(shí)狀態(tài)變?yōu)?,并調(diào)用1次操作事件。
使用手勢很簡單,分為三步:
創(chuàng)建手勢識別器對象實(shí)例。創(chuàng)建時(shí),指定一個(gè)回調(diào)方法,當(dāng)手勢開始,改變、或結(jié)束時(shí),執(zhí)行回調(diào)方法。
設(shè)置手勢識別器對象實(shí)例的相關(guān)屬性(可選部分)
添加到需要識別的 View 中。每個(gè)手勢只對應(yīng)一個(gè) View,當(dāng)屏幕觸摸在 View 的邊界內(nèi)時(shí),如果手勢和預(yù)定的一樣,那就會(huì)執(zhí)行回調(diào)方法。
PS:一個(gè)手勢只能對應(yīng)一個(gè) View,但是一個(gè) View 可以有多個(gè)手勢。建議在真機(jī)上測試這些手勢,模擬器操作不太方便,可能導(dǎo)致認(rèn)為手勢失效的情況。(模擬器測試捏合和旋轉(zhuǎn)手勢時(shí),按住 option 鍵,再用觸摸板或鼠標(biāo)操作)
功能描述:
附加到兩個(gè)圖片視圖 UIImageView 的有『拖動(dòng)』、『捏合』、『旋轉(zhuǎn)』、『點(diǎn)按』;
而『輕掃』和『自定義手勢 KMGestureRecognizer』附加在根視圖 UIView 中。
拖動(dòng):進(jìn)行當(dāng)前圖片視圖位置移動(dòng)
捏合:進(jìn)行當(dāng)前圖片視圖縮放
旋轉(zhuǎn):進(jìn)行當(dāng)前圖片視圖角度旋轉(zhuǎn)
點(diǎn)按:雙擊恢復(fù)當(dāng)前圖片視圖的縮放、角度旋轉(zhuǎn)、不透明度
長按:設(shè)置當(dāng)前圖片視圖的不透明度為0.7
輕掃:左右輕掃設(shè)置兩個(gè)圖片視圖為居中,同時(shí)以垂直居中的特定偏移量定位
自定義手勢:撓癢功能,左右掃動(dòng)共3次或以上,設(shè)置兩個(gè)圖片視圖為居中,同時(shí)以水平居中的特定偏移量定位
效果如下:
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; //撓癢次數(shù)11 @property (assign, nonatomic) CGPoint currentTickleStart; //當(dāng)前撓癢開始坐標(biāo)位置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]; //設(shè)置當(dāng)前撓癢開始坐標(biāo)位置21 }22 23 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {24 //『當(dāng)前撓癢開始坐標(biāo)位置』和『移動(dòng)后坐標(biāo)位置』進(jìn)行 X 軸值比較,得到是向左還是向右移動(dòng)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 //移動(dòng)的 X 軸間距值是否符合要求,足夠大31 if (ABS(tickleSpacing) >= kMinTickleSpacing) {32 //判斷是否有三次不同方向的動(dòng)作,如果有則手勢結(jié)束,將執(zhí)行回調(diào)方法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(@"自定義手勢成功,將執(zhí)行回調(diào)方法");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 * 處理拖動(dòng)手勢 38 * 39 * @param recognizer 拖動(dòng)手勢識別器對象實(shí)例 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 //計(jì)算速度向量的長度,當(dāng)他小于200時(shí),滑行會(huì)很短 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 //基于速度和速度因素計(jì)算一個(gè)終點(diǎn) 60 float slideFactor = 0.1 * slideMult; 61 CGPoint finalPoint = CGPointMake(center.x + (velocity.x * slideFactor), 62 center.y + (velocity.y * slideFactor)); 63 //限制最小[cornerRadius]和最大邊界值[self.view.bounds.size.width - cornerRadius],以免拖動(dòng)出屏幕界限 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 動(dòng)畫使 view 滑行到終點(diǎn) 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 捏合手勢識別器對象實(shí)例 84 */ 85 - (void)handlePinch:(UIPinchGestureRecognizer *)recognizer { 86 CGFloat scale = recognizer.scale; 87 recognizer.view.transform = CGAffineTransformScale(recognizer.view.transform, scale, scale); //在已縮放大小基礎(chǔ)下進(jìn)行累加變化;區(qū)別于:使用 CGAffineTransformMakeScale 方法就是在原大小基礎(chǔ)下進(jìn)行變化 88 recognizer.scale = 1.0; 89 } 90 91 /** 92 * 處理旋轉(zhuǎn)手勢 93 * 94 * @param recognizer 旋轉(zhuǎn)手勢識別器對象實(shí)例 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 * 處理點(diǎn)按手勢103 *104 * @param recognizer 點(diǎn)按手勢識別器對象實(shí)例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 點(diǎn)按手勢識別器對象實(shí)例117 */118 - (void)handleLongPress:(UILongPressGestureRecognizer *)recognizer {119 //長按的時(shí)候,設(shè)置不透明度為0.7120 recognizer.view.alpha = 0.7;121 }122 123 /**124 * 處理輕掃手勢125 *126 * @param recognizer 輕掃手勢識別器對象實(shí)例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 //根據(jù)輕掃方向,進(jìn)行不同控制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 自定義手勢識別器對象實(shí)例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 * 綁定拖動(dòng)手勢181 *182 * @param imgVCustom 綁定到圖片視圖對象實(shí)例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 綁定到圖片視圖對象實(shí)例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 * 綁定旋轉(zhuǎn)手勢204 *205 * @param imgVCustom 綁定到圖片視圖對象實(shí)例206 */207 - (void)bindRotation:(UIImageView *)imgVCustom {208 UIRotationGestureRecognizer *recognizer = [[UIRotationGestureRecognizer alloc] initWithTarget:self209 action:@selector(handleRotation:)];210 [imgVCustom addGestureRecognizer:recognizer];211 }212 213 /**214 * 綁定點(diǎn)按手勢215 *216 * @param imgVCustom 綁定到圖片視圖對象實(shí)例217 */218 - (void)bindTap:(UIImageView *)imgVCustom {219 UITapGestureRecognizer *recognizer = [[UITapGestureRecognizer alloc] initWithTarget:self220 action:@selector(handleTap:)];221 //使用一根手指雙擊時(shí),才觸發(fā)點(diǎn)按手勢識別器222 recognizer.numberOfTapsRequired = 2;223 recognizer.numberOfTouchesRequired = 1;224 [imgVCustom addGestureRecognizer:recognizer];225 }226 227 /**228 * 綁定長按手勢229 *230 * @param imgVCustom 綁定到圖片視圖對象實(shí)例231 */232 - (void)bindLongPress:(UIImageView *)imgVCustom {233 UILongPressGestureRecognizer *recognizer = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(handleLongPress:)];234 recognizer.minimumPressDuration = 0.5; //設(shè)置最小長按時(shí)間;默認(rèn)為0.5秒235 [imgVCustom addGestureRecognizer:recognizer];236 }237 238 /**239 * 綁定輕掃手勢;支持四個(gè)方向的輕掃,但是不同的方向要分別定義輕掃手勢240 */241 - (void)bindSwipe {242 //向右輕掃手勢243 UISwipeGestureRecognizer *recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self244 action:@selector(handleSwipe:)];245 recognizer.direction = UISwipeGestureRecognizerDirectionRight; //設(shè)置輕掃方向;默認(rèn)是 UISwipeGestureRecognizerDirectionRight,即向右輕掃246 [self.view addGestureRecognizer:recognizer];247 [recognizer requireGestureRecognizerToFail:_customGestureRecognizer]; //設(shè)置以自定義撓癢手勢優(yōu)先識別248 249 //向左輕掃手勢250 recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self251 action:@selector(handleSwipe:)];252 recognizer.direction = UISwipeGestureRecognizerDirectionLeft;253 [self.view addGestureRecognizer:recognizer];254 [recognizer requireGestureRecognizerToFail:_customGestureRecognizer]; //設(shè)置以自定義撓癢手勢優(yōu)先識別255 }256 257 /**258 * 綁定自定義撓癢手勢;判斷是否有三次不同方向的動(dòng)作,如果有則手勢結(jié)束,將執(zhí)行回調(diào)方法259 */260 - (void)bingCustomGestureRecognizer {261 //當(dāng) recognizer.state 為 UIGestureRecognizerStateEnded 時(shí),才執(zhí)行回調(diào)方法 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 //為了處理手勢識別優(yōu)先級的問題,這里需先綁定自定義撓癢手勢310 [self bingCustomGestureRecognizer];311 [self bindSwipe];312 }313 314 @end
新聞熱點(diǎn)
疑難解答
圖片精選