UIScrollView实现类似91助手抽屉效果

抽屉效果是移动应用最常用的效果之一，网易新闻、91手机助手都用到了这样效果，但实现的方法和细节上还有差别的。

先总结一下91助手般的抽屉效果

      

通过图片可以看到，抽屉效果的左右部分，左边是主功能的VIew，右边是与用户相关的View

那么要实现的功能点有：

一、点击让功能View右上角按纽后，用户功能菜单从右往左推出

二、当两个VIew同时出现时，点击主VIew右上角按纽或主View的视图时，收起抽屉

知道以上两点，就能知道具体的实现了。

首先创建主视图，并为主视图设置title，右边按纽

[cpp] view plain copy

1. // 创建主视图  
2. UIView *leftMainView = [[UIView alloc] initWithFrame:self.view.frame];  
3. leftMainView.backgroundColor = [UIColor redColor];  
4. // 为主视图绑定单击事件  
5. UITapGestureRecognizer *tapRec = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(lessPress:)];  
6. [leftMainView addGestureRecognizer:tapRec];  
7.       
8. // 创建一个UINavigationBar，并为其设置title，右边按纽  
9. UINavigationBar *navBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 44)];  
10. UINavigationItem *item = [[UINavigationItem alloc] initWithTitle:@"抽屉Demo"];  
11. item.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"开关" style:UIBarButtonItemStyleDone target:self action:@selector(rightPress:)];  
12. [navBar pushNavigationItem:item animated:YES];  
13. [leftMainView addSubview:navBar];  
14.       
15. // 创建右边用户菜单视图  
16. UIView *rightSettingView = [[UIView alloc] initWithFrame:CGRectMake(leftMainView.frame.size.width, 0, 200, self.view.frame.size.height)];  
17. rightSettingView.backgroundColor = [UIColor blueColor];  

主要的两个视图创建好了，在创建一个UIScrollVIew，并将两个主视图设置到UIScrollView中

[cpp] view plain copy

1. scrollView = [[UIScrollView alloc] initWithFrame:self.view.frame];  
2. scrollView.contentSize = CGSizeMake(leftMainView.frame.size.width + rightSettingView.frame.size.width, self.view.frame.size.height);  
3. scrollView.showsHorizontalScrollIndicator = NO;  
4. scrollView.showsVerticalScrollIndicator = NO;  
5. scrollView.bounces = NO;  
6. scrollView.scrollEnabled = NO;  
7. [scrollView addSubview:leftMainView];  
8. [scrollView addSubview:rightSettingView];  
9. [self.view addSubview:scrollView];  

UIScrollView的详细设置在

点击打开链接

最后还有个两个实现动画的方法

1、点击右边按纽时打开抽屉

[cpp] view plain copy

1. - (void) rightPress: (id)sender  
2. {  
3.     // 获得UIScrollView当前的位置  
4.     float offSetX = scrollView.contentOffset.x;  
5.     if (offSetX == 0) {  
6.         // 如果offSetX等于0时，打开抽屉  
7.         [UIView animateWithDuration:0.6f animations:^{  
8.             scrollView.contentOffset = CGPointMake(200, 0);  
9.         }];  
10.     } else {  
11.         // 反之关闭抽屉  
12.         [UIView animateWithDuration:0.6f animations:^{  
13.             scrollView.contentOffset = CGPointMake(0, 0);  
14.         }];  
15.     }  
16. }  

2、如果抽屉的状态为已打开，点击主视图任意位置关闭抽屉

[cpp] view plain copy

1. - (void) lessPress: (id)sender  
2. {  
3.     float offSetX = scrollView.contentOffset.x;  
4.     if (offSetX == 200) {  
5.         [UIView animateWithDuration:0.6f animations:^{  
6.             scrollView.contentOffset = CGPointMake(0, 0);  
7.         }];  
8.     }  
9. }