iOS介面-仿網易新聞左側抽屜式互動 續(添加新聞內容頁和評論頁手勢)

1、介紹

有的博友看了上篇博文 iOS介面-仿網易新聞左側抽屜式互動 ，在微博裡問，網易新聞裡的內容和評論的拖拽如何?，

上面的UINavigation如何嵌進去。可能不少人有這樣的需求，現在花了些時間把這兩個效果做一下，

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

評論按鈕都是可以通過addsubview添加的。內容頁和評論頁的手勢互動 實現的效果如下：

圖中的箭頭是手勢拖動的方向。2、跳轉添加網易新聞的按鈕都是可點擊的，所以在這個例子中除了能通過手勢操作。運行例子代碼的時候注意下面的內容：我在代碼中添加了一些button，下面圖中紅色框框裡的地區是可點可跳轉的：列表頁第一條新聞可點，內容頁左上方可點返回，評論頁左上方也可點返回。其他部分都是圖片。3、部分代碼仿照customView的代碼做了新聞內容的視圖 DetailView，代碼如下：

--

#import <UIKit/UIKit.h>@class CommentView;@interface DetailView : UIView{    CommentView *commentView;    BOOL isPanComment;}- (id)initWithView:(UIView*)contentView parentView:(UIView*) parentView;@property (nonatomic, strong) UIView *parentView; //抽屜視圖的父視圖@property (nonatomic, strong) UIView *contentView; //抽屜顯示內容的視圖@end

////  DetailView.m//  NeteaseNews////  Created by rongfzh on 13-3-5.//  Copyright (c) 2013年 rongfzh. All rights reserved.//#import "DetailView.h"#import "CommentView.h"#import <QuartzCore/QuartzCore.h>@implementation DetailView- (id)initWithFrame:(CGRect)frame{    self = [super initWithFrame:frame];    if (self) {        // Initialization code    }    return self;}- (id)initWithView:(UIView *)contentView parentView:(UIView *)parentView{        self = [super initWithFrame:CGRectMake(0,0,contentView.frame.size.width, contentView.frame.size.height)];    if (self) {        [self addSubview:contentView];        UIPanGestureRecognizer *panGestureRecognier = [[UIPanGestureRecognizer alloc]                                                       initWithTarget:self                                                       action:@selector(HandlePan:)];        [self addGestureRecognizer:panGestureRecognier];                UIButton *backBtn = [UIButton buttonWithType:UIButtonTypeCustom];        backBtn.frame = CGRectMake(0, 0, 80, 50);        [backBtn addTarget:self                    action:@selector(back:)          forControlEvents:UIControlEventTouchUpInside];        [self addSubview:backBtn];        UIImageView *imageCommentView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"comment.png"]];        imageCommentView.frame  = CGRectMake(0, 0,                                                    self.frame.size.width,                                                    self.frame.size.height);        commentView = [[CommentView alloc] initWithView:imageCommentView parentView:self];        commentView.center = CGPointMake(480, 230);        [[commentView layer] setShadowOffset:CGSizeMake(10, 10)];        [[commentView layer] setShadowRadius:20];        [[commentView layer] setShadowOpacity:1];        [[commentView layer] setShadowColor:[UIColor blackColor].CGColor];        [self addSubview:commentView];        isPanComment = NO;            }        self.parentView = parentView;    return self;}- (void)HandlePan:(UIPanGestureRecognizer*)panGestureRecognizer{        CGPoint translation = [panGestureRecognizer translationInView:self.parentView];    float x = self.center.x + translation.x;    if (x < 160) {        x = 160;    }    if(translation.x > 0){        if (!isPanComment) {            self.center = CGPointMake(x, 230);        }    }        if (translation.x < 0 && self.center.x > 160) {        if (!isPanComment) {            self.center = CGPointMake(x, 230);        }    }else if(translation.x < 0){        isPanComment = YES;        commentView.center = CGPointMake(commentView.center.x + translation.x, 230);    }    if (commentView.center.x < 480 && translation.x > 0) {        isPanComment = YES;        commentView.center = CGPointMake(commentView.center.x + translation.x, 230);    }        if (panGestureRecognizer.state == UIGestureRecognizerStateEnded) {        if (commentView.center.x < 400) {            [UIView animateWithDuration:0.4                                  delay:0.1                                options:UIViewAnimationCurveEaseInOut                             animations:^(void){                                 commentView.center = CGPointMake(160, 230);                             }completion:^(BOOL finish){                                 isPanComment = NO;                             }];        }else{            [UIView animateWithDuration:0.4                                  delay:0.1                                options:UIViewAnimationCurveEaseInOut                             animations:^(void){                                 commentView.center = CGPointMake(480, 230);                             }completion:^(BOOL finish){                                 isPanComment = NO;                             }];        }        if (self.center.x > 190) {            [UIView animateWithDuration:0.4                                  delay:0.1                                options:UIViewAnimationCurveEaseInOut                             animations:^(void){                                 self.center = CGPointMake(480, 230);                             }completion:^(BOOL finish){                                 [self.parentView exchangeSubviewAtIndex:1 withSubviewAtIndex:2];                             }];        }else{            [UIView animateWithDuration:0.4                                  delay:0.1                                options:UIViewAnimationCurveEaseInOut                             animations:^(void){                                 self.center = CGPointMake(160, 230);                             }completion:^(BOOL finish){                                                              }];        }    }        [panGestureRecognizer setTranslation:CGPointZero inView:self.parentView];    }- (void) back:(id)sender{    [UIView animateWithDuration:0.4                          delay:0.1                        options:UIViewAnimationCurveEaseInOut                     animations:^(void){                         self.center = CGPointMake(480, 230);                     }completion:^(BOOL finish){                         [self.parentView exchangeSubviewAtIndex:1 withSubviewAtIndex:2];                     }];}/*// Only override drawRect: if you perform custom drawing.// An empty implementation adversely affects performance during animation.- (void)drawRect:(CGRect)rect{    // Drawing code}*/@end

3、評論頁的view和內容頁的代碼差不多

代碼還有很多值得最佳化的地方，現在只是展示實現了功能，手勢判斷部分代碼比較亂，只要掌握了手勢的原來，代碼可以自己根據需求來修改

代碼：

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

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

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

本文遵循“署名-非商業用途-保持一致”創作公用協議