抽屉式导航

曾经读过@kentzhu 一篇文章，《说说抽屉式导航》

他指出抽屉式导航这种导航方式始于Facebook，Facebook中，用户核心的操作是阅读Timeline，所以抽屉里隐藏了所有其他的操作。这种导航模式一般采用将导航主体隐藏在app侧边的方式，以一个按钮来呼出导航，在使用完成之后在使用相同的按钮隐藏起来。一拉一缩，从形象上与抽屉类似，于是这样称呼他。抽屉式导航的核心思路是“隐藏”。隐藏非核心的操作与功能，让用户更专注于核心的功能操作上去。

于是我尝试了做了一个简陋的抽屉式导航，这个抽屉式导航主要是用两个视图和添加手势来实现的。

storyboard上只有一个UIView，上面有两个tableView。用了不同颜色来区分。

#import <UIKit/UIKit.h>

@interface PathViewController : UIViewController <UITableViewDataSource , UITableViewDelegate , UIGestureRecognizerDelegate>
@property (weak, nonatomic) IBOutlet UITableView *masterTable;
@property (weak, nonatomic) IBOutlet UITableView *detailTable;
@property (nonatomic) CGPoint panPoint;
@property (strong , nonatomic) NSString *str;
@end

这里是Controller.h文件，有两个outlet的tableView。panPoint用来纪录Pan手势所在的坐标。而str是用来从masterView把数据传到detailView的。controller符合三个协议。

 <UITableViewDataSource , UITableViewDelegate , UIGestureRecognizerDelegate>

如果你对<UIGestureRecognizerDelegate>有疑问，先不要急，下面会讲到。

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    [self addSubview];
    [self initViewController];
    [self addGesture];
}

addSubview添加两个tableView。

- (void) addSubview
{
    //添加子视图
    [[self view] addSubview:self.masterTable];
    [[self view] addSubview:self.detailTable];
    [self.detailTable setFrame:CGRectMake(320 , 0, 320, 460)];
    [self.masterTable setFrame:CGRectMake(0, 0, 320, 460)];
}

同时设置了两个View的Frame。这里我先把DetailView的X设为320，目的是先让他离开窗口之内，因为我还没在MasterView选择，DetailView实际上是没有数据的。

- (void) initViewController
{
    self.masterTable.delegate = self;
    self.masterTable.dataSource = self;
    self.detailTable.delegate = self;
    self.detailTable.dataSource = self;
    self.panPoint = CGPointMake(90,0);
    self.str = @"?";    
}

这里把属性初始化。

- (void) addGesture
{
    UIPanGestureRecognizer *recognizer;
    //添加手势
    recognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(Pan:)];
    recognizer.delegate = self;
    [self.detailTable addGestureRecognizer:recognizer];
}

添加手势，action：@selector（Pan：）

-(void)Pan:(UIPanGestureRecognizer*)gestureRecognizer

{

    //平移的距离

    double gap = [gestureRecognizerlocationInView:self.view].x -self.panPoint.x;

    self.panPoint = [gestureRecognizerlocationInView:self.view];

   

    [self.detailTablesetCenter:CGPointMake(self.detailTable.center.x + gap,230)];

    

    //判断是否超出规定位置

    [UIViewbeginAnimations:nilcontext:NULL];

    if(self.detailTable.center.x <160)

        [self.detailTablesetCenter:CGPointMake(160,230)];

    if(self.detailTable.center.x >250)

        [self.detailTablesetCenter:CGPointMake(250,230)];

    

    if([gestureRecognizerstate] ==UIGestureRecognizerStateEnded)

    {  

        if(self.detailTable.center.x <205)

            [self.detailTablesetCenter:CGPointMake(160,230)];

        if(self.detailTable.center.x >=205)

            [self.detailTablesetCenter:CGPointMake(250,230)];

    }

    [UIViewcommitAnimations];

}

声明一个变量gap纪录x移动的距离，同时纪录下现在的坐标，最后把gap加到View的中心坐标上重新定好detailView的位置。

下面的代码是用来判断平移过程中有没有超出平移的范围。

再下面的代码是当平移结束时如果detailView在平移范围的左半部分就把masterView覆盖。如果在右半部分就显示masterView。

[UIView beginAnimations:nil context:NULL];

[UIView commitAnimations];

让改变DetailView坐标时有个动画的效果。

下面讲一下<UIGestureRecognizerDelegate>的方法，下面两个都是<UIGestureRecognizerDelegate>的方法。

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch
{
    self.panPoint = [touch previousLocationInView:self.view];
    return YES;
}

- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer
{
    // Check for horizontal gesture
    double x = sqrt(([gestureRecognizer locationInView:self.view].x - self.panPoint.x) * ([gestureRecognizer locationInView:self.view].x - self.panPoint.x));
    double y = sqrt(([gestureRecognizer locationInView:self.view].y - self.panPoint.y) * ([gestureRecognizer locationInView:self.view].y - self.panPoint.y));
    
    if ((x/y) > 1)
    {
        return YES ;
    }
    return NO ;
}

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch

这个方法是当用户touch到view就调用，我用这个方法来给我的panPoint赋值，方便下面判断手势的方向。返回yes则同意实现平移手势，返回no则平移手势失效。

用这个方法还可以判断用户touch的是控件还是想使用手势。

例如说，你的视图上有个slider，同时你添加了pan手势，当用户touch，调用这个方法

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch
{ 
	 if([touch.view isKindOfClass:[UISlider class]])
 		return YES; 
 	return NO;
}

- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer

是当用户第一次平移时调用（注意是已经平移），我在里面判断了一下到底用户想上下滑动还是左右平移，返回yes则同意实现平移手势，返回no则平移手势失效，从而实现table的上下滑动。

在里面还有一个

-(BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer*)otherGestureRecognizer

的方法。

这个方法返回yes的话就会可以使两个手势同时使用。

我把自己做的抽屉式导航上传上去，有兴趣看下的可以下载，手工比较粗糙。

抽屉式导航下载

http://blog.youkuaiyun.com/toss156/article/details/7400065  有天看到有人在博客贴了自己写的代码。是实现上拉的效果。