最终效果图:
mainstoryboard示意图:
beyondviewcontroller.h
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
//// beyondviewcontroller.h// 19_抽屉效果_仿网易//// created by beyond on 14-8-1.// copyright (c) 2014年 com.beyond. all rights reserved.//#import <uikit/uikit.h>#import "lefttableviewcontrollerdelegate.h"@interface beyondviewcontroller : uiviewcontroller// 左半边 (显示 的是栏目列表 )@property (weak, nonatomic) iboutlet uiview *leftview;// 右半边 (显示 的是个人信息设置视图)@property (weak, nonatomic) iboutlet uiview *rightview;// 最上面,最大的全屏的是主视图@property (weak, nonatomic) iboutlet uiview *mainview;// 上面标题状态栏视图中的标题按钮 (网易的logo图片和栏目的名称 水平排列)@property (weak, nonatomic) iboutlet uibutton *titlebtn;// mainview的下半部分 是 正文的view,显示子栏目的view@property (weak, nonatomic) iboutlet uiview *contentview;// pan 拽 手势处理- (ibaction)pangesture:(uipangesturerecognizer *)sender;// mainview的上半部分 标题状态栏视图中的左,右按钮- (ibaction)btnclick:(uibutton *)sender;@end |
beyondviewcontroller.m
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
|
//// beyondviewcontroller.m// 19_抽屉效果_仿网易//// created by beyond on 14-8-1.// copyright (c) 2014年 com.beyond. all rights reserved.//#import "beyondviewcontroller.h"#import "lefttableviewcontroller.h"#import "rightviewcontroller.h"#import "column.h"#import <quartzcore/quartzcore.h>// 手势结束时的x#define kendx frame.origin.x// 左view的宽度#define kleftwidth _leftview.frame.size.width// 右view的宽度#define krightwidth _rightview.frame.size.width// 对协议进行提前声明@protocol lefttableviewcontrollerdelegate ;@interface beyondviewcontroller ()<lefttableviewcontrollerdelegate>{ // 手指按下的时候,记住,mainview的起始x cgfloat _startx; // 成员变量,记住左边控制器的实例 lefttableviewcontroller *_leftvc; // 成员变量,记住右边控制器的实例 rightviewcontroller *_rightvc; // 字典 ,记住所有实例化了 栏目的子控制器,避免每次都重新创建 nsmutabledictionary *_columnviewcontrollers; }@end@implementation beyondviewcontroller// 隐藏状态栏- (bool)prefersstatusbarhidden{ return yes;}- (void)viewdidload{ [super viewdidload]; _titlebtn.backgroundcolor = [uicolor clearcolor]; // 0 字典 ,记住所有实例化了 栏目的子控制器,避免每次都重新创建 _columnviewcontrollers = [nsmutabledictionary dictionary]; // 0,设置导航条bar的背景 为网 易 红 //[[uinavigationbar appearance] setbackgroundimage:[uiimage imagenamed:@"bg.png"] forbarmetrics:uibarmetricsdefault]; // 状态条颜色 改成默认的样式 //[uiapplication sharedapplication].statusbarstyle = uistatusbarstyledefault; // 1,添加左边控制器的view到左边的view里面 _leftvc = [[lefttableviewcontroller alloc]init]; // 关键代码 为了拿到左边控制器的某一行被点击时候,对应的栏目数据模型对象,主控制器成为了左边控制器的代理,遵守了它定好的协议,实现了协议中的方法,从而拿到左边控制器被点击行号对应的数据模型对象 _leftvc.delegate = self; _leftvc.view.frame = self.leftview.bounds; [self.leftview addsubview:_leftvc.view]; // 2,同理,添加右边控制器的view到右边的view里面 _rightvc = [[rightviewcontroller alloc]init]; _rightvc.view.frame = self.rightview.bounds; [self.rightview addsubview:_rightvc.view]; // 3,第一次加载时候,就就应该显示新闻 子栏目的控制器到导航控制器,再将导航控制器的view添加到 mainview里面 [self firstloading]; }// 自定义方法,第一次加载时候,就就应该显示新闻 子栏目的控制器到导航控制器,再将导航控制器的view添加到 mainview里面- (void)firstloading{ column * column = [column columnnamed:@"新闻" imgname:@"news.png" classname:@"newsviewcontroller"]; // 仅需手动调用一个 leftviewcontroller的代理 方法,lefttableviewrowclicked,传递一个新闻 子栏目即可 [self lefttableviewrowclicked:column];}// pan 拽 手势处理- (ibaction)pangesture:(uipangesturerecognizer *)sender{ // 如果是刚按下的状态,则记住,mainview的起始x if (uigesturerecognizerstatebegan == sender.state) { _startx = self.mainview.frame.origin.x; } // 平移拖动的距离 cgpoint delta = [sender translationinview:_mainview]; cgrect frame = self.mainview.frame; // 计算新的x值,并做健壮性判断 kendx = _startx + delta.x; // 1,限制最大拖动范围 if (kendx >= kleftwidth) { kendx = kleftwidth; } if (kendx <= - krightwidth) { kendx = - krightwidth; } // 2,由于 左view和右view在重叠,所以要隐藏其中的一个 if (kendx > 0) { // nslog(@"--调用频率相当高--"); _rightview.hidden = yes; _leftview.hidden = no; } else { _rightview.hidden = no; _leftview.hidden = yes; } if (uigesturerecognizerstateended == sender.state) { // 手势结束的时候,需进行robust判断 // 2,分析end松手时候,的位置x,决定展开到什么程度/* // 2.1 如果只向右拖了一点点,小于 1/2 的左view的宽度,则归0 if (kendx < 0.5*kleftwidth && kendx >= 0) { kendx = 0; }else if (kendx >= 0.5*kleftwidth && kendx <= kleftwidth) { // 2.2 如果向右拖一大半了,大于 1/2 的左view的宽度,虽然还没到位,也可以认为是到位了 kendx = kleftwidth; }else if (kendx > - 0.5*krightwidth && kendx <= 0) { // 2.3 如果只向左拖了一点点,小于 1/2 的右view的宽度,则归0 kendx = 0; }else if (kendx <= - 0.5*krightwidth) { // 2.4 如果向左拖一大半了,大于 1/2 的右view的宽度,虽然还没到位,也可以认为是到位了 kendx = - krightwidth; }*/ // 第2种判断方式 // 起始为0,delta.x大于0 代表向右滑动 if (_startx == 0 && delta.x >0) { kendx = kleftwidth; }else if (_startx == 0 && delta.x < 0){ // 起始为0,delta.x小于0 代表向左滑动 kendx = - krightwidth; }else if (_startx == kleftwidth && delta.x < 0){ // 起始为kleftwidth,delta.x小于0 代表向左滑动 kendx =0; }else if (_startx == - krightwidth && delta.x > 0){ // 起始为- krightwidth,delta.x大于0 代表向右滑动 kendx = 0; } } // 最后,才设置mainview的新的frame [uiview animatewithduration:0.2 animations:^{ self.mainview.frame=frame; }]; // 最后,为mainview所在的图层 添加阴影效果 [self addshadowformainviewwithendx:kendx]; }// 自定义方法,为mainview所在的图层 添加阴影效果 (调用频率相当高)- (void)addshadowformainviewwithendx:(cgfloat)endx{ // 1,点击工程,加号,导入第3方框架 #import <quartzcore/quartzcore.h> // 2,拿到mainview所在的图层,设置阴影 参数 // nslog(@"调用频率很高---"); _mainview.layer.shadowcolor = [uicolor blackcolor].cgcolor; _mainview.layer.shadowopacity = 0.5; if (endx >= 0) { _mainview.layer.shadowoffset = cgsizemake(-5, 0); } else { _mainview.layer.shadowoffset = cgsizemake(5, 0); } }// 单击按钮,也一样可以展开 左右侧边栏- (ibaction)btnclick:(uibutton *)sender{ // 定义一个临时变量 cgfloat startx = _mainview.frame.origin.x; // 先为mainview所在的图层 添加阴影效果 [self addshadowformainviewwithendx:sender.tag == 1?1:-1]; // 定义一个临时变量 cgfloat tempendx = 0; // 左边的按钮被单击 if (1 == sender.tag) { // 隐藏右半边 _leftview.hidden = no; _rightview.hidden = yes; if (startx == 0) { tempendx = kleftwidth; }else if (startx == kleftwidth){ tempendx = 0; } } else { // 单击右边按钮, 隐藏左半边 _leftview.hidden = yes; _rightview.hidden = no; if (startx == 0) { tempendx = - krightwidth; }else if (startx == - krightwidth){ tempendx = 0; } } // 最后才设置mainview的x,调用抽取出来的公共代码,设置mainview的x,参数是endx [self setmainviewx:tempendx]; }// 抽取出来的公共代码,设置mainview的x,参数是endx- (void)setmainviewx:(cgfloat)endx{ cgrect frame = self.mainview.frame; frame.origin.x = endx; [uiview animatewithduration:0.2 animations:^{ self.mainview.frame=frame; }]; }// 最关键的方法,左边控制器的代理 方法,当前左边控制器中的某一行被点击的时候 会调用- (void)lefttableviewrowclicked:(id)columnselected{ column *column = (column *)columnselected; // 1,关闭左边的控制======================= // 调用抽取出来的公共代码,设置mainview的x,参数是endx [self setmainviewx:0]; // 2,更改标题按钮上面的文字 _titlebtn.titlelabel.text = column.columnname; // 根据栏目数据模型中的类名,实例化对应栏目的控制器,并且将其设置为导航控制器的根控制器,最后将导航控制器的view添加到mainview中,目的是方便设置导航条,以及,各控制器的跳转 // 2,从缓存字典中取,如果子控制器字典有曾经创建过的子控制器,直接取出来用 uiviewcontroller *columnvc = _columnviewcontrollers[column.columnclassname]; // 如果子控制器字典中没有保存过该栏目的控制器,才要创建子控制器 if (columnvc == nil) { class c = nsclassfromstring(column.columnclassname); columnvc = [[c alloc]init]; // 并且一定要将其放到 子控制器字典里面,存起来 [_columnviewcontrollers setobject:columnvc forkey:column.columnclassname]; } // 4,移除contentview中的正在显示的旧的子view if (_contentview.subviews.count > 0) { uiview *oldview = [_contentview subviews][0]; [oldview removefromsuperview]; } // 5,最后将子控制器的view添加到contentview中,显示 columnvc.view.frame = _contentview.bounds; [self.contentview addsubview:columnvc.view]; nslog(@"%@",self.contentview); // 在添加到mainview之前 ,先得到mainview导航控制器的子控制器,并将其移除(如果有的话),然后才将新的栏目对应的子控制器添加到导航控制器容器中,注意,这儿可以用字典 记住 所有的已经实例化出来 的栏目子控制器,这样就避免每次都alloc创建新的栏目子控制器,而是只需要根据类名,从字典取出上一次实例化了的同一栏目的子控制器即可 }@end |
栏目数据模型column.h
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
//// column.h// 19_抽屉效果_仿网易//// created by beyond on 14-8-1.// copyright (c) 2014年 com.beyond. all rights reserved.//#import <foundation/foundation.h>// 数据模型 代表一个栏目@interface column : nsobject// 栏目名称@property (nonatomic,copy)nsstring *columnname;// 栏目图片名称@property (nonatomic,copy)nsstring *columnimgname;// 栏目对应的控制器的类名@property (nonatomic,copy)nsstring *columnclassname;// ui控件用weak,字符串用copy,其他对象用strong// 提供一个类方法,即构造函数,返回封装好数据的对象(返回id亦可)+ (column *)columnnamed:(nsstring *)columnname imgname:(nsstring*)columnimgname classname:(nsstring *)columnclassname;@end |
栏目数据模型column.m
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
//// column.m// 19_抽屉效果_仿网易//// created by beyond on 14-8-1.// copyright (c) 2014年 com.beyond. all rights reserved.// 数据模型 代表一条栏目#import "column.h"@implementation column// 返回一个包含了 栏目对应控制器名字的 对象实例+ (column *)columnnamed:(nsstring *)columnname imgname:(nsstring *)columnimgname classname:(nsstring *)columnclassname{ // 为了兼容子类 使用self column *column = [[self alloc]init]; column.columnname = columnname; column.columnimgname = columnimgname; column.columnclassname = columnclassname; return column;}@end |
左边控制器定义好的协议lefttableviewcontrollerdelegate.h
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
//// lefttableviewcontrollerdelegate.h// 19_抽屉效果_仿网易//// created by beyond on 14-8-1.// copyright (c) 2014年 com.beyond. all rights reserved.//#import <foundation/foundation.h>#import "column.h"// 左边控制器 定义的代理/协议 它通过调用自己的成员属性(即代理)的该方法,将数据传递出去(给它的代理去使用) (其实 是主控制器想要数据,所以主控制器在实例化左边控制器的时候,要设置左边控制器对应的代理 为 主控制器 自身)@protocol lefttableviewcontrollerdelegate <nsobject>- (void)lefttableviewrowclicked:(column *)columnselected;@end |
lefttableviewcontroller.h
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
//// lefttableviewcontroller.h// 19_抽屉效果_仿网易//// created by beyond on 14-8-1.// copyright (c) 2014年 com.beyond. all rights reserved.//#import <uikit/uikit.h>// 对协议进行提前声明@protocol lefttableviewcontrollerdelegate;@interface lefttableviewcontroller : uitableviewcontroller// 代理 用weak,防止循环问题,可以是任意类型,但必须遵守协议@property (nonatomic,weak) id<lefttableviewcontrollerdelegate> delegate;@end |
lefttableviewcontroller.m
|
1
|
//<br>// lefttableviewcontroller.m<br>// 19_抽屉效果_仿网易<br>//<br>// created by beyond on 14-8-1.<br>// copyright (c) 2014年 com.beyond. all rights reserved.<br>// |
|
1
|
#import "lefttableviewcontroller.h"<br>#import "column.h"<br>#import "lefttableviewcontrollerdelegate.h"<br>@interface lefttableviewcontroller ()<br>{<br> // 栏目数组,保存的是左边栏目列表中的所有栏目对象<br> nsarray *_arr;<br>} |
|
1
|
@end |
|
1
|
@implementation lefttableviewcontroller |
|
1
|
- (void)viewdidload<br>{<br> [super viewdidload];<br> // 新闻 栏目<br> column *newscolumn = [column columnnamed:@"新闻" imgname:@"news.png" classname:@"newsviewcontroller"];<br> // 图片 栏目<br> column *piccolumn = [column columnnamed:@"图片" imgname:@"pic.png" classname:@"picviewcontroller"];<br> // 图片 栏目<br> column *commentcolumn = [column columnnamed:@"跟帖" imgname:@"comment.png" classname:@"commentviewcontroller"];<br> // 以后要添加栏目,只要改这里就可以了<br> <br> <br> // 将栏目对象,一次性全添加到不可变数组中<br> _arr = @[newscolumn,piccolumn,commentcolumn];<br> <br>}<br>- (nsinteger)tableview:(uitableview *)tableview numberofrowsinsection:(nsinteger)section<br>{<br> return _arr.count;<br>}<br>- (uitableviewcell *)tableview:(uitableview *)tableview cellforrowatindexpath:(nsindexpath *)indexpath<br>{<br> static nsstring *cellid = @"leftvc";<br> // 下面这个dequeue只能用于storyboard或xib中<br> // uitableviewcell *cell = [tableview dequeuereusablecellwithidentifier:cellid forindexpath:indexpath];<br> // <br> uitableviewcell *cell = [tableview dequeuereusablecellwithidentifier:cellid];<br> <br> if (cell == nil) {<br> cell = [[uitableviewcell alloc]initwithstyle:uitableviewcellstyledefault reuseidentifier:cellid];<br> }<br> <br> // 设置独一无二的数据<br> column *column = _arr[indexpath.row];<br> cell.textlabel.text = column.columnname;<br> cell.imageview.image = [uiimage imagenamed:column.columnimgname];<br> return cell;<br>} |
|
1
|
<br>// 点击一行时,主控制中的主视图必须展示相应栏目的内容,因此,必须实例化对应点击的行的栏目控制器,并用添加到导航控制器,调用代理 的方法传递数据给代理 使用,此处的代理 其实就是 主控制器<br>- (void)tableview:(uitableview *)tableview didselectrowatindexpath:(nsindexpath *)indexpath<br>{<br> // 先取消默认的点击 高亮的颜色<br> [tableview deselectrowatindexpath:indexpath animated:yes];<br> // 取出对应行的数据模型(栏目)<br> column *column = _arr[indexpath.row];<br> <br> if ([self.delegate respondstoselector:@selector(lefttableviewrowclicked:)]) {<br> <br> // 传递数据给主控制器 beyondviewcontroller,通过代理<br> // 关键代码~<br> [self.delegate lefttableviewrowclicked:column];<br> }<br> <br> <br>}<br>@end<br> |
rightviewcontroller.xib
newsviewcontroller.xib
picviewcontroller.xib
commentviewcontroller.xib
