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

本文转载至  http://blog.csdn.net/totogo2010/article/details/8637430

1、介绍

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

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

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

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

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

2、跳转添加

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

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

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

3、部分代码

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

--

[cpp] view plaincopy

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

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

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

代码：

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

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

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

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