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

有的博友看了上篇博文 iOS界面-仿网易新闻左侧抽屉式交互 ，在微博里问，网易新闻里的内容和评论的拖拽如何实现，上面的UINavigation如何嵌进去。可能不少人有这样的需求，现在花了些时间把这两个效果做一下，和大家分享交流。思路和上篇基本差不多，但是没有用到UINavigation，其实在我看来上面的返回、评论按钮都是可以通过addsubview添加的。内容页和评论页的手势交互 实现的效果如下：

1、介绍

有的博友看了上篇博文 iOS界面-仿网易新闻左侧抽屉式交互 ，在微博里问，网易新闻里的内容和评论的拖拽如何实现，

上面的UINavigation如何嵌进去。可能不少人有这样的需求，现在花了些时间把这两个效果做一下，

和大家分享交流。思路和上篇基本差不多，但是没有用到UINavigation，其实在我看来上面的返回、

评论按钮都是可以通过addsubview添加的。内容页和评论页的手势交互 实现的效果如下：


 

 
图中的箭头是手势拖动的方向。

2、跳转添加

网易新闻的按钮都是可点击的，所以在这个例子中除了能通过手势操作。运行例子代码的时候注意下面的内容：
我在代码中添加了一些button，下面图中红色框框里的区域是可点可跳转的：
列表页第一条新闻可点，内容页左上角可点返回，评论页左上角也可点返回。其他部分都是图片。

3、部分代码

仿照customView的代码做了新闻内容的视图 DetailView，代码如下：

--

 

[cpp] view plaincopy
 
  1. #import   
  2.   
  3. @class CommentView;  
  4.   
  5. @interface DetailView : UIView  
  6. {  
  7.     CommentView *commentView;  
  8.     BOOL isPanComment;  
  9. }  
  10. - (id)initWithView:(UIView*)contentView parentView:(UIView*) parentView;  
  11.   
  12. @property (nonatomic, strong) UIView *parentView; //抽屉视图的父视图  
  13. @property (nonatomic, strong) UIView *contentView; //抽屉显示内容的视图  
  14. @end  

 

 

[cpp] view plaincopy
 
  1. //  
  2. //  DetailView.m  
  3. //  NeteaseNews  
  4. //  
  5. //  Created by rongfzh on 13-3-5.  
  6. //  Copyright (c) 2013年 rongfzh. All rights reserved.  
  7. //  
  8.   
  9. #import "DetailView.h"  
  10. #import "CommentView.h"  
  11. #import   
  12.   
  13. @implementation DetailView  
  14.   
  15. - (id)initWithFrame:(CGRect)frame  
  16. {  
  17.     self = [super initWithFrame:frame];  
  18.     if (self) {  
  19.         // Initialization code  
  20.     }  
  21.     return self;  
  22. }  
  23.   
  24. - (id)initWithView:(UIView *)contentView parentView:(UIView *)parentView{  
  25.       
  26.     self = [super initWithFrame:CGRectMake(0,0,contentView.frame.size.width, contentView.frame.size.height)];  
  27.     if (self) {  
  28.         [self addSubview:contentView];  
  29.         UIPanGestureRecognizer *panGestureRecognier = [[UIPanGestureRecognizer alloc]  
  30.                                                        initWithTarget:self  
  31.                                                        action:@selector(HandlePan:)];  
  32.         [self addGestureRecognizer:panGestureRecognier];  
  33.           
  34.         UIButton *backBtn = [UIButton buttonWithType:UIButtonTypeCustom];  
  35.         backBtn.frame = CGRectMake(0, 0, 80, 50);  
  36.         [backBtn addTarget:self  
  37.                     action:@selector(back:)  
  38.           forControlEvents:UIControlEventTouchUpInside];  
  39.         [self addSubview:backBtn];  
  40.   
  41.         UIImageView *imageCommentView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"comment.png"]];  
  42.         imageCommentView.frame  = CGRectMake(0, 0,  
  43.                                                     self.frame.size.width,  
  44.                                                     self.frame.size.height);  
  45.         commentView = [[CommentView alloc] initWithView:imageCommentView parentView:self];  
  46.         commentView.center = CGPointMake(480, 230);  
  47.         [[commentView layer] setShadowOffset:CGSizeMake(10, 10)];  
  48.         [[commentView layer] setShadowRadius:20];  
  49.         [[commentView layer] setShadowOpacity:1];  
  50.         [[commentView layer] setShadowColor:[UIColor blackColor].CGColor];  
  51.         [self addSubview:commentView];  
  52.         isPanComment = NO;  
  53.           
  54.     }  
  55.       
  56.     self.parentView = parentView;  
  57.     return self;  
  58. }  
  59.   
  60.   
  61. - (void)HandlePan:(UIPanGestureRecognizer*)panGestureRecognizer{  
  62.       
  63.     CGPoint translation = [panGestureRecognizer translationInView:self.parentView];  
  64.     float x = self.center.x + translation.x;  
  65.     if (x < 160) {  
  66.         x = 160;  
  67.     }  
  68.   
  69.     if(translation.x > 0){  
  70.         if (!isPanComment) {  
  71.             self.center = CGPointMake(x, 230);  
  72.         }  
  73.     }  
  74.       
  75.     if (translation.x < 0 && self.center.x > 160) {  
  76.         if (!isPanComment) {  
  77.             self.center = CGPointMake(x, 230);  
  78.         }  
  79.     }else if(translation.x < 0){  
  80.         isPanComment = YES;  
  81.         commentView.center = CGPointMake(commentView.center.x + translation.x, 230);  
  82.     }  
  83.   
  84.     if (commentView.center.x < 480 && translation.x > 0) {  
  85.         isPanComment = YES;  
  86.         commentView.center = CGPointMake(commentView.center.x + translation.x, 230);  
  87.     }  
  88.       
  89.     if (panGestureRecognizer.state == UIGestureRecognizerStateEnded) {  
  90.         if (commentView.center.x < 400) {  
  91.             [UIView animateWithDuration:0.4  
  92.                                   delay:0.1  
  93.                                 options:UIViewAnimationCurveEaseInOut  
  94.                              animations:^(void){  
  95.                                  commentView.center = CGPointMake(160, 230);  
  96.                              }completion:^(BOOL finish){  
  97.                                  isPanComment = NO;  
  98.                              }];  
  99.         }else{  
  100.             [UIView animateWithDuration:0.4  
  101.                                   delay:0.1  
  102.                                 options:UIViewAnimationCurveEaseInOut  
  103.                              animations:^(void){  
  104.                                  commentView.center = CGPointMake(480, 230);  
  105.                              }completion:^(BOOL finish){  
  106.                                  isPanComment = NO;  
  107.                              }];  
  108.         }  
  109.         if (self.center.x > 190) {  
  110.             [UIView animateWithDuration:0.4  
  111.                                   delay:0.1  
  112.                                 options:UIViewAnimationCurveEaseInOut  
  113.                              animations:^(void){  
  114.                                  self.center = CGPointMake(480, 230);  
  115.                              }completion:^(BOOL finish){  
  116.                                  [self.parentView exchangeSubviewAtIndex:1 withSubviewAtIndex:2];  
  117.                              }];  
  118.         }else{  
  119.             [UIView animateWithDuration:0.4  
  120.                                   delay:0.1  
  121.                                 options:UIViewAnimationCurveEaseInOut  
  122.                              animations:^(void){  
  123.                                  self.center = CGPointMake(160, 230);  
  124.                              }completion:^(BOOL finish){  
  125.                                    
  126.                              }];  
  127.   
  128.         }  
  129.   
  130.     }  
  131.       
  132.     [panGestureRecognizer setTranslation:CGPointZero inView:self.parentView];  
  133.       
  134. }  
  135.   
  136. - (void) back:(id)sender{  
  137.     [UIView animateWithDuration:0.4  
  138.                           delay:0.1  
  139.                         options:UIViewAnimationCurveEaseInOut  
  140.                      animations:^(void){  
  141.                          self.center = CGPointMake(480, 230);  
  142.                      }completion:^(BOOL finish){  
  143.                          [self.parentView exchangeSubviewAtIndex:1 withSubviewAtIndex:2];  
  144.                      }];  
  145. }  
  146.   
  147. /* 
  148. // Only override drawRect: if you perform custom drawing. 
  149. // An empty implementation adversely affects performance during animation. 
  150. - (void)drawRect:(CGRect)rect 
  151. { 
  152.     // Drawing code 
  153. } 
  154. */  
  155.   
  156. @end  

 

3、评论页的view和内容页的代码差不多

代码还有很多值得优化的地方，现在只是展示实现了功能，手势判断部分代码比较乱，只要掌握了手势的原来，代码可以自己根据需求来修改

代码：

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

CSDN资源：http://download.csdn.net/detail/totogo2010/5110546

 

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

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

iOS界面-仿网易新闻左侧抽屉式交互 续(添加新闻内容页和评论页手势) Apple开发 1w+ 0 46
偉 2015-03-09 来源：容芳志专栏
精彩推荐