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

2013-04-02 17:31 maying_07 阅读(270) 评论(0) 编辑收藏举报

原文地址：http://blog.csdn.net/totogo2010/article/details/8637430

1、介绍

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

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

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

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

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

2、跳转添加

网易新闻的按钮都是可点击的，所以在这个例子中除了能通过手势操作。运行例子代码的时候注意下面的内容：

我在代码中添加了一些button，下面图中红色框框里的区域是可点可跳转的：

列表页第一条新闻可点，内容页左上角可点返回，评论页左上角也可点返回。其他部分都是图片。

3、部分代码

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

 1 #import <UIKit/UIKit.h>
 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

  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 <QuartzCore/QuartzCore.h>
 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

会员力量，点亮园子希望

刷新页面返回顶部

maying_07