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

1、介绍

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

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

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

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





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

2、跳转添加

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

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

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

3、部分代码

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

--

[cpp] view
plaincopy

#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

[cpp] view
plaincopy

//

// 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)

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