原文地址:http://blog.csdn.net/totogo2010/article/details/8637430
1、介绍
有的博友看了上篇博文 ,在微博里问,网易新闻里的内容和评论的拖拽如何实现,
上面的UINavigation如何嵌进去。可能不少人有这样的需求,现在花了些时间把这两个效果做一下,
和大家分享交流。思路和上篇基本差不多,但是没有用到UINavigation,其实在我看来上面的返回、
评论按钮都是可以通过addsubview添加的。内容页和评论页的手势交互 实现的效果如下:
图中的箭头是手势拖动的方向。
2、跳转添加
网易新闻的按钮都是可点击的,所以在这个例子中除了能通过手势操作。运行例子代码的时候注意下面的内容:
我在代码中添加了一些button,下面图中红色框框里的区域是可点可跳转的:
列表页第一条新闻可点,内容页左上角可点返回,评论页左上角也可点返回。其他部分都是图片。
3、部分代码
仿照customView的代码做了新闻内容的视图 DetailView,代码如下:
--
1 #import2 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 #import12 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.4101 delay:0.1102 options:UIViewAnimationCurveEaseInOut103 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.4111 delay:0.1112 options:UIViewAnimationCurveEaseInOut113 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.4120 delay:0.1121 options:UIViewAnimationCurveEaseInOut122 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.4138 delay:0.1139 options:UIViewAnimationCurveEaseInOut140 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)rect151 {152 // Drawing code153 }154 */155 156 @end
3、评论页的view和内容页的代码差不多
代码还有很多值得优化的地方,现在只是展示实现了功能,手势判断部分代码比较乱,只要掌握了手势的原来,代码可以自己根据需求来修改
代码:
Github:
CSDN资源: