iOS界面-仿网易新闻左侧抽屉式交互

用过网易新闻客户端的同学都会发现，网易新闻向左滑动时，左侧的导航栏会跟着拖动出来，新闻内容列表会拉到最右侧。像一个抽屉拉出来一样。很酷。除了网易新闻，现在好多应用都采用了这样的交互。

1、介绍 

   用过网易新闻客户端的同学都会发现，网易新闻向左滑动时，左侧的导航栏会跟着拖动出来，新闻内容列表会拉到最右侧。像一个抽屉拉出来一样。很酷。除了网易新闻，现在好多应用都采用了这样的交互。

对手势识别不熟悉的请参考上篇： iOS手势识别的详细使用(拖动,缩放,旋转,点击,手势依赖,自定义手势)

这个交互效果主要用到两个手势，一个是pan拖拽，一个是tap点击。拖拽可以把抽屉拉出来，再推回去。点击可以把抽屉推回去。

 

效果如下：

    

那么这个效果如何实现呢？

2、实现思路和步骤

思路：从实现的效果分析出来，可以这样实现：

这个交互是由两个View组成，左侧导航的View在下面，显示内容列表的View在上面，内容列表的View覆盖住了导航View,拖动内容列表的View向右，这时候导航View就显示出来了。

实现步骤：

 

  1. 自定义一个View，它做为显示内容的View。给这个View添加两个手势，pan拖拽，tap点击。
  2. 当拖拽这个View时，让view.center向右移动，这样就能看到内容View向右移动了。
  3. 定义一个抽屉打开停止时的x值为：OPENCENTERX，这个是内容View最终停止的位置
  4. 当内容View越过中间靠右的一个x值时，view自动向右动画移动到右边位置停下。
  5. 当内容View在打开的状态下，点击内容View，利用UIView动画把内容View.center移动回到中间。
  6. 设置内容View的阴影效果

 

3、代码实现

新建CustomView继承UIView

 

[cpp] view plaincopy
 
  1. #import   
  2.   
  3. @interface CustomView : UIView  
  4. {  
  5.     CGPoint openPointCenter;  
  6.     CGPoint closePointCenter;  
  7. }  
  8. -(id)initWithView:(UIView*)contentview parentView:(UIView*) parentview;  
  9.   
  10. @property (nonatomic, strong) UIView *parentView; //抽屉视图的父视图  
  11. @property (nonatomic, strong) UIView *contenView; //抽屉显示内容的视图  
  12. @end  

 

两个手势在Custom里实现，并在初始化的时候传入内容View和父视图。

[cpp] view plaincopy
 
  1. #import "CustomView.h"  
  2.   
  3. #define OPENCENTERX 220.0  
  4. #define DIVIDWIDTH 70.0 //OPENCENTERX 对应确认是否打开或关闭的分界线。  
  5.   
  6. @implementation CustomView  
  7.   
  8. - (id)initWithFrame:(CGRect)frame  
  9. {  
  10.     self = [super initWithFrame:frame];  
  11.     if (self) {  
  12.         // Initialization code  
  13.     }  
  14.     return self;  
  15. }  
  16.   
  17. - (id)initWithView:(UIView *)contentview parentView:(UIView *)parentview  
  18. {  
  19.     self = [super initWithFrame:CGRectMake(0,0,contentview.frame.size.width, contentview.frame.size.height)];  
  20.       
  21.     if (self) {  
  22.         self.contenView = contentview;  
  23.         self.parentView = parentview;  
  24.           
  25.         [self addSubview:contentview];  
  26.         UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc]  
  27.                                                         initWithTarget:self  
  28.                                                         action:@selector(handlePan:)];  
  29.         [self addGestureRecognizer:panGestureRecognizer];  
  30.           
  31.         UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc]  
  32.                                                         initWithTarget:self  
  33.                                                         action:@selector(handleTap:)];  
  34.           
  35.         [self addGestureRecognizer:tapGestureRecognizer];  
  36.         openPointCenter = CGPointMake(self.parentView.center.x + OPENCENTERX,  
  37.                                       self.parentView.center.y);  
  38.           
  39.         NSLog(@"openPointCenter x:%f, openPointCenter y:%f",  
  40.               openPointCenter.x,  
  41.               openPointCenter.y);  
  42.   
  43.           
  44.     }  
  45.       
  46.       
  47.       
  48.     return self;  
  49. }  
  50.   
  51. -(void) handlePan:(UIPanGestureRecognizer*) recognizer  
  52. {  
  53.     CGPoint translation = [recognizer translationInView:self.parentView];  
  54.       
  55.     float x = self.center.x + translation.x;  
  56.     NSLog(@"translation x:%f", translation.x);  
  57.    
  58.     if (x < self.parentView.center.x) {  
  59.         x = self.parentView.center.x;  
  60.     }  
  61.     self.center = CGPointMake(x, openPointCenter.y);  
  62.       
  63.     if(recognizer.state == UIGestureRecognizerStateEnded)  
  64.     {  
  65.             [UIView animateWithDuration:0.75  
  66.                                   delay:0.01  
  67.                                 options:UIViewAnimationCurveEaseInOut  
  68.                              animations:^(void)  
  69.             {  
  70.                 if (x > openPointCenter.x -  DIVIDWIDTH) {  
  71.                     self.center = openPointCenter;  
  72.                 }else{  
  73.                     self.center = CGPointMake(openPointCenter.x - OPENCENTERX,  
  74.                                               openPointCenter.y);  
  75.                       
  76.                 }  
  77.                   
  78.             }completion:^(BOOL isFinish){  
  79.                   
  80.             }];  
  81.         }  
  82.       
  83.     [recognizer setTranslation:CGPointZero inView:self.parentView];  
  84. }  
  85.   
  86. -(void) handleTap:(UITapGestureRecognizer*) recognizer  
  87. {  
  88.     [UIView animateWithDuration:0.75  
  89.                           delay:0.01  
  90.                         options:UIViewAnimationTransitionCurlUp animations:^(void){  
  91.                             self.center = CGPointMake(openPointCenter.x - OPENCENTERX,  
  92.                                                       openPointCenter.y);  
  93.     }completion:nil];  
  94.       
  95. }  
  96. @end  

4、viewController的调用

为了实现自定义视图的阴影，添加需要使用QuartzCore框架。在项目里添加QuartzCore框架后引入头文件。

[cpp] view plaincopy
 
  1. - (void)viewDidLoad  
  2. {  
  3.     [super viewDidLoad];  
  4.       
  5.     CGRect rect = CGRectMake(0, 0,  
  6.                              self.view.frame.size.width,  
  7.                              self.view.frame.size.height);  
  8.     NSLog(@"w:%f, h:%f", rect.size.width, rect.size.height);  
  9.     UIImageView *imageleft = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"left.png"]];  
  10.     imageleft.frame = rect;  
  11.     [self.view addSubview:imageleft];  
  12.       
  13.     UIView *contentView = [[UIView alloc] initWithFrame:rect];  
  14.       
  15.     UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"index.png"]];  
  16.     imageView.frame = rect;  
  17.     [contentView addSubview:imageView];  
  18.   
  19.     CustomView *customView = [[CustomView alloc] initWithView:contentView  
  20.                                                    parentView:self.view];  
  21.     [[customView layer] setShadowOffset:CGSizeMake(10, 10)];  
  22.     [[customView layer] setShadowRadius:20];  
  23.     [[customView layer] setShadowOpacity:1];  
  24.     [[customView layer] setShadowColor:[UIColor blackColor].CGColor];  
  25.       
  26.     [self.view addSubview:customView];  
  27.   
  28. }  

为了看起来好看，我弄了两张截图了，一个是内容视图，一个是左侧导航栏的视图，然后作为背景图放到上面的两个view的里。

所以不要点里面的内容，点不了滴，那是图片而已。这里只是演示抽屉的效果。

最后，网易新闻的这个交互能从右边拉出来的效果，原理差不多，可能需要多一个view。还有交互时左侧栏里还有由明变暗，忽大忽小的效果。这些以后有时间再实现。

续篇：iOS界面-仿网易新闻左侧抽屉式交互 续(添加新闻内容页和评论页手势)

CSDN下载：代码下载

github：https://github.com/schelling/NeteaseNews

 

容芳志 (http://blog.csdn.net/totogo2010)

本文遵循“署名-非商业用途-保持一致”创作公用协议

iOS界面-仿网易新闻左侧抽屉式交互 Apple开发 1w+ 0 38
偉 2015-03-09 来源：容芳志专栏
精彩推荐