在開發(fā)過程中,我們?yōu)榱颂岣哂脩趔w驗(yàn)和App的交互友好性,我們通常會(huì)在App中添加一些手勢(shì),來輔助用戶操作.那么這篇文章將簡(jiǎn)述一下在開發(fā)過程中我們經(jīng)常用到的手勢(shì)事件.
管理手勢(shì)事件的類是UIGestureRecognizer,這是一個(gè)手勢(shì)識(shí)別器.而手勢(shì)識(shí)別器則是一個(gè)特殊的觸摸事件.手勢(shì)事件是使用了target-action模式(目標(biāo)-動(dòng)作模式)設(shè)計(jì)的,所以我們?cè)谑褂玫臅r(shí)候指定目標(biāo)跟動(dòng)作就好了.
UIGestureRecognizer是一個(gè)抽象的父類,在開發(fā)過程中我們一般不使用這個(gè)類,而是使用其子類.
上圖展示了UIGestureRecognizer的子類.下面我們就來介紹其中常用的集中手勢(shì)事件.
First
我們進(jìn)行描述之前先假定一個(gè)場(chǎng)景,在UIViewController上有一個(gè)UIView,設(shè)置顏色為紅色,我們?nèi)∶麨閞edView.現(xiàn)在我們對(duì)其進(jìn)行手勢(shì)添加.
UIPanGestureRecognizer平移手勢(shì)
現(xiàn)在UIView上面是沒有任何可以被觸發(fā)的事件的,現(xiàn)在我們添加一個(gè)平移手勢(shì),讓這張圖片可以在屏幕上任意平移.
此時(shí)我們會(huì)用到UIGestureRecognizer的子類UIPanGestureRecognizer,在API中有兩個(gè)屬性三個(gè)方法.其中屬性使用來控制觸摸到UIView 的觸點(diǎn)個(gè)數(shù).方法我們通過代碼演示.
代碼如下:
// 我們初始化這個(gè)手勢(shì)事件,并為它制定一個(gè)觸發(fā)方法,就是讓他平移
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panView:)];
//我們將手勢(shì)事件添加到view上
[_redView addGestureRecognizer:pan];
平移手勢(shì)觸發(fā)的方法為:
- (void)panView:(UIPanGestureRecognizer *)sender{
CGPoint point = [sender translationInView:_redView];
// 以上次位置為標(biāo)準(zhǔn)
sender.view.transform = CGAffineTransformTranslate(sender.view.transform, point.x, point.y);
// 增量值為零
[sender setTranslation:CGPointZero inView:sender.view];
}
我們?yōu)榱四茏屵@個(gè)View自由平移,我們?cè)O(shè)置為每次移動(dòng)是以上一次的位置為標(biāo)準(zhǔn),并且其增量值為零.
UIScreenEdgePanGestureRecognizer屏幕邊緣平移手勢(shì)
UIScreenEdgePanGestureRecognizer是UIPanGestureRecognizer的子類,比父類多了一個(gè)屬性
同樣是上面的場(chǎng)景,如果我們?cè)趘iew上添加屏幕邊緣手勢(shì),但是首先聲明一下,由于是屏幕邊緣移動(dòng),我們知道,屏幕四個(gè)邊緣,上,左,下,右.所以我們?cè)谔砑邮謩?shì)的時(shí)候必須先設(shè)置UIScreenEdgePanGestureRecognizer的edges這個(gè)屬性.在這里我設(shè)置為滑動(dòng)右側(cè)邊緣,視圖移動(dòng).
它是一個(gè)枚舉變量,枚舉元素表示出發(fā)這個(gè)事件需要的手勢(shì)位置.
UIScreenEdgePanGestureRecognizer *screenEdgePan = [[UIScreenEdgePanGestureRecognizer alloc] initWithTarget:self action:@selector(screenEdgePanView:)];
// 屬性設(shè)置(設(shè)置邊界)
// 注意,使用屏幕邊緣平移,需要注意兩點(diǎn)
// 1.視圖的位置
// 2.設(shè)置edges屬性
screenEdgePan.edges = UIRectEdgeRight;
[_redView addGestureRecognizer:screenEdgePan];
我們同樣為它添加移動(dòng)事件.
- (void)screenEdgePanView:(UIScreenEdgePanGestureRecognizer *)sender{
// 計(jì)算偏移量
CGPoint point = [sender translationInView:_redView];
// 進(jìn)行平移
sender.view.transform = CGAffineTransformMakeTranslation(point.x, point.y);
}
UITapGestureRecognizer輕拍事件
輕拍事件有兩個(gè)屬性,分別是設(shè)置輕拍時(shí)手指的個(gè)數(shù)和輕拍的次數(shù).
我們依然使用上面的場(chǎng)景,為了演示效果,我們?cè)O(shè)置輕拍手指為兩個(gè),輕拍次數(shù)為兩次.觸發(fā)的事件是隨機(jī)變換顏色.
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapView:)];
// 設(shè)置屬性
// 輕拍次數(shù)
tap.numberOfTapsRequired = 2;
// 手指?jìng)€(gè)數(shù)
tap.numberOfTouchesRequired = 2;
// 添加到視圖上
[_redView addGestureRecognizer:tap];
觸發(fā)的事件為:
- (void)tapView:(UITapGestureRecognizer *)sender{
_redView.backgroundColor = [UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:0.9];
}
UISwipeGestureRecognizer輕掃手勢(shì)
輕掃手勢(shì)有兩個(gè)屬性:
第一個(gè)是設(shè)置輕掃手指的個(gè)數(shù),默認(rèn)是一個(gè).而第二個(gè)則是設(shè)置輕掃的方向.我們?cè)趘iew上面添加手勢(shì),手勢(shì)觸發(fā)的事件依然是讓view的顏色隨機(jī)改變.
UISwipeGestureRecognizer *swipe = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeView:)];
swipe.numberOfTouchesRequired = 1;
// 設(shè)置輕掃方向
// swipe.direction = UISwipeGestureRecognizerDirectionUp;
swipe.direction = UISwipeGestureRecognizerDirectionDown;
// swipe.direction = UISwipeGestureRecognizerDirectionLeft;
// swipe.direction = UISwipeGestureRecognizerDirectionRight;
[_redView addGestureRecognizer:swipe];
觸發(fā)的事件為:
- (void)swipeView:(UISwipeGestureRecognizer *)sender{
_redView.backgroundColor = [UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:0.9];
}
UILongPressGestureRecognizer長(zhǎng)按手勢(shì)
對(duì)于長(zhǎng)按手勢(shì)我們?cè)O(shè)置的場(chǎng)景依然跟上面一樣.
UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(longPressView:)];
// 最小長(zhǎng)按時(shí)間
longPress.minimumPressDuration = 2;
[_redView addGestureRecognizer:longPress];
在上面的代碼中,我們通過長(zhǎng)按手勢(shì)的minimumPressDuration屬性來設(shè)置最小長(zhǎng)按時(shí)間,也就是設(shè)置了事件longPressView:被觸發(fā)所需要長(zhǎng)按的最小時(shí)間.
對(duì)于長(zhǎng)按手勢(shì),我們?cè)O(shè)置的事件依舊是隨機(jī)改變顏色
- (void)longPressView:(UILongPressGestureRecognizer *)sender{
// 判斷手勢(shì)狀態(tài)
if (sender.state == UIGestureRecognizerStateEnded) {
NSLog(@"長(zhǎng)按狀態(tài)!");
_redView.backgroundColor = [UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:0.9];
}
}
在上面的代碼中我們通過state來判斷手勢(shì)的狀態(tài),這個(gè)屬性是其父類的屬性,這個(gè)屬性中包含了手勢(shì)事件從開始到結(jié)束的整個(gè)狀態(tài).讀者可以自行參考蘋果官方API,在此就不贅述.以上就是長(zhǎng)按手勢(shì).
UIPinchGestureRecognizer捏合手勢(shì)
我們都知道當(dāng)我們查看相冊(cè)中照片的時(shí)候,我們會(huì)通過手指的捏合或擴(kuò)展來進(jìn)行照片的縮小或放大.我們利用上面的場(chǎng)景對(duì),view進(jìn)行添加捏合手勢(shì)實(shí)現(xiàn)類似的功能.
在此,我們可以按住鍵盤的Alt鍵加上鼠標(biāo)來實(shí)現(xiàn)這個(gè)場(chǎng)景的模擬.
UIPinchGestureRecognizer *pinch = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(pinchView:)];
// 添加手勢(shì)
[_redView addGestureRecognizer:pinch];
相信通過上面的手勢(shì),我們?cè)谶@個(gè)地方已經(jīng)不需要描述事件的觸發(fā)了
- (void)pinchView:(UIPinchGestureRecognizer *)sender{
// 以上一次的為標(biāo)準(zhǔn)
sender.view.transform = CGAffineTransformScale(sender.view.transform, sender.scale, sender.scale);
// 重新設(shè)置縮放比例(1是正?？s放, <1 是縮小, >1是放大 )
sender.scale = 1;
}
在這里我們使用了仿射變換來控制view放大縮小的比例.
UIRotationGestureRecognizer旋轉(zhuǎn)手勢(shì)
如同上面一樣我們使用同樣的方法來創(chuàng)建手勢(shì),并添加到視圖上.
UIRotationGestureRecognizer *rotation = [[UIRotationGestureRecognizer alloc] initWithTarget:self action:@selector(rotationView:)];
[_redView addGestureRecognizer:rotation];
我們依舊使用2D仿射變換來實(shí)現(xiàn)View的旋轉(zhuǎn)
- (void)rotationView:(UIRotationGestureRecognizer *)sender{
// 兩個(gè)參數(shù),以上一次的位置為標(biāo)準(zhǔn)
sender.view.transform = CGAffineTransformRotate(sender.view.transform, sender.rotation);
// 清除增量
sender.rotation = 0.0;
}
其他
在UIView中有一個(gè)gestureRecognizers屬性,它表征了View上面的手勢(shì)類型,我們可以通過這個(gè)屬性來遍歷查看View上面添加的手勢(shì).
for (UIGestureRecognizer *ges in _redView.gestureRecognizers) {
NSLog(@"%@",ges);
}
總結(jié)
以上我們介紹了幾種簡(jiǎn)單的手勢(shì).在開發(fā)過程中,我們可以通過添加手勢(shì)來提高用戶體驗(yàn),增加App對(duì)用戶的友好性.相信通過上面的幾種手勢(shì),我們隊(duì)iOS開發(fā)中的手勢(shì)也有了大致的了解,如果您在閱讀過程中發(fā)現(xiàn)疑問或者疏漏,歡迎留言探討或更正,我將不勝感激.
