-
移动开发
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
白羽
2018-06-05
来源 ：网络
阅读 1419
评论 0
摘要：本文将带你了解iOS界面左侧抽屉式交互如何制作，希望本文对大家学IOS有所帮助
1、介绍
评论按钮都是可以通过addsubview添加的。内容页和评论页的手势交互 实现的效果如下：
图中的箭头是手势拖动的方向。
2、跳转添加
网易新闻的按钮都是可点击的，所以在这个例子中除了能通过手势操作。运行例子代码的时候注意下面的内容：
我在代码中添加了一些button，下面图中红色框框里的区域是可点可跳转的：
列表页第一条新闻可点，内容页左上角可点返回，评论页左上角也可点返回。其他部分都是图片。
3、部分代码
仿照customView的代码做了新闻内容的视图 DetailView，代码如下：
--
[cpp] view plain copy
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
[cpp] view plain copy
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
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之IOS频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
