像Facebook一樣左滑效果

其實這個效果是一個國外的APP叫Path首先推出，然後Facebook引進來用。

當這個效果出來後，很多人都在問這怎麼做的，當然我這篇不是講要怎麼做。

而是我之前某個app用到了ZUUIRevealController這個Library寫的一個差不多效果的東西。

把他兩個檔引進進來，很容易的可以做到點一下像FaceBook一樣拉出左邊的選單列，

然後再點一下按鈕可以自動彈回來或是手動拉回來。

之前遇到個問題是，他Pan手勢是做在NavigationController上，所以只有拉上面才會出拖動，

想要在中間(FrontView)主頁面也要加上手勢功能的話，就要做一點處理。

首先在 ViewDidLoad 中找到

1
if ([self.navigationController.parentViewController respondsToSelector:@selector(revealGesture:)] && [self.navigationController.parentViewController respondsToSelector:@selector(revealToggle:)])

然後應該會看到

1
2
UIPanGestureRecognizer *navigationBarPanGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self.navigationController.parentViewController action:@selector(revealGesture:)];
[self.navigationController.navigationBar addGestureRecognizer:navigationBarPanGestureRecognizer];

我們就在下面加入同樣對主頁面的View進行添加手勢

1
2
3
4
5
6
UIPanGestureRecognizer *tableviewPanGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self.navigationController.parentViewController action:@selector(revealGesture:)];
//這裡的self.aTableView是我自己的Tableview property 你可以決定你自己的View
[self.aTableView addGestureRecognizer:tableviewPanGestureRecognizer];
//下面會講到為什麼要設delegate
tableviewPanGestureRecognizer.delegate = self;

這樣就可以完成了左右手識添加，可是還有一步，就是它連上下手勢都加進去了

以至於我們無法滾動TableView了
所以必須要借助 UIPanGestureRecognizer 這裡面的Delegate 方法

首先在.h檔中加入 UIGestureRecognizerDelegate 這個 Protocol

然後再.m檔中，- (BOOL)gestureRecognizerShouldBegin:(UIPanGestureRecognizer *)gestureRecognizer 這個delegate中寫入偵測方法

所以在上面的method中 要加入delegate指向自己

加入偵測手勢
1
2
3
4
5
6
7
8
9
10
11
12
//判斷手勢只能左右移
- (BOOL)gestureRecognizerShouldBegin:(UIPanGestureRecognizer *)gestureRecognizer
{
    UIView *cell = [gestureRecognizer view];
    CGPoint translation = [gestureRecognizer translationInView:[cell superview]];
    // Check for horizontal gesture
    if (fabsf(translation.x) > fabsf(translation.y))
    {
        return YES;
    }
    return NO;
}

到目前為止，我們完成了在主頁面讓上下兩個Controller都加入了手勢的功能，

但是用這個Library一定覺得奇怪，為什麼我移到右邊了，我裡面的Cell還是能點，
因為作者這方面沒有做處理，所以又到我們自己下功夫的地方了。

首先找到RevealController.m 這個檔案

找到裡面的

- (void)revealController:(ZUUIRevealController *)revealController willRevealRearViewController:(UIViewController *)rearViewController
這個Method

加入以下程式碼 (就不詳細講了有問題再提出)

*需先在.h檔中 加入

1
UIView *touchIntercepterView;

然後再.m檔中

加入點擊和拖拉返回兩個手識 完整程式碼
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
- (void)revealController:(ZUUIRevealController *)revealController willRevealRearViewController:(UIViewController *)rearViewController 
{
	if (touchIntercepterView == nil) {
		touchIntercepterView = [[UIView alloc] initWithFrame:revealController.frontViewController.view.frame];
		//加入點擊返回
		UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:revealController action:@selector(revealToggle:)];
		[touchIntercepterView addGestureRecognizer:tapGestureRecognizer];
		[tapGestureRecognizer release];
		//加入拖拉手勢
		UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:revealController action:@selector(revealGesture:)];
		[touchIntercepterView addGestureRecognizer:panGestureRecognizer];
		[panGestureRecognizer release];
		[revealController.frontViewController.view insertSubview:touchIntercepterView atIndex:INT_MAX];
	}
	
	NSLog(@"%@", NSStringFromSelector(_cmd));
}

然後再找到

- (void)revealController:(ZUUIRevealController *)revealController didHideRearViewController:(UIViewController *)rearViewController
加入下面程式碼

移除添加的View
1
2
3
4
5
if (touchIntercepterView != nil) {
	[touchIntercepterView removeFromSuperview];
	[touchIntercepterView release];
	touchIntercepterView = nil;	
}

這樣就完完全全跟Facebook功能一樣，能拖拉到右邊，也能點擊返回和拖拉返回主頁面了。