效果图如下
代码实现以及思路下面分析:
代码创建导航控制器
appdelegate.m中
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
#import "appdelegate.h"#import "viewcontroller.h"@interface appdelegate ()@end@implementation appdelegate- (bool)application:(uiapplication *)application didfinishlaunchingwithoptions:(nsdictionary *)launchoptions { self.window = [[uiwindow alloc] initwithframe:[uiscreen mainscreen].bounds]; viewcontroller * vc = [[viewcontroller alloc] init];//必须要初始化导航控制器的根控制器 uinavigationcontroller * nav = [[uinavigationcontroller alloc] initwithrootviewcontroller:vc]; self.window.rootviewcontroller = nav; [self.window makekeyandvisible]; return yes;} |
viewcontroller.m中
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
//// viewcontroller.m// pbsliedmenu//// created by 裴波波 on 16/4/21.// copyright © 2016年 裴波波. all rights reserved.//#import "viewcontroller.h"#define kscreenh [uiscreen mainscreen].bounds.size.height#define kscreenw [uiscreen mainscreen].bounds.size.width#define knavw 64@interface viewcontroller ()<uitableviewdelegate,uitableviewdatasource>@property (nonatomic, strong) uitableview *tableview;/** 记录是否打开侧边栏 */@property (nonatomic, assign) bool openslide;/** 侧栏按钮 */@property (nonatomic, strong) uibarbuttonitem *btnleft;@end |
用一个bool值来记录左侧view是打开还是关闭状态.每次点击都要改变记录tableview状态的值
用属性保存 侧栏 按钮,用来当左侧tableview正在弹出或者收回执行动画过程中禁用.
|
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
|
@implementation viewcontroller#pragma mark - 选中某个cell代理方法-(void)tableview:(uitableview *)tableview didselectrowatindexpath:(nsindexpath *)indexpath{ uitableviewcell * cell = [tableview cellforrowatindexpath:indexpath]; nslog(@"%@",cell.textlabel.text); //选中cell后立即取消选中 [tableview deselectrowatindexpath:indexpath animated:yes];}#pragma mark - tableview数据源-(nsinteger)tableview:(uitableview *)tableview numberofrowsinsection:(nsinteger)section{ return 20;}-(uitableviewcell *)tableview:(uitableview *)tableview cellforrowatindexpath:(nsindexpath *)indexpath{ static nsstring * id = @"cell"; uitableviewcell * cell = [tableview dequeuereusablecellwithidentifier:id forindexpath:indexpath]; cell.textlabel.text = [nsstring stringwithformat:@"我是%zd",indexpath.row]; cell.backgroundcolor = [uicolor orangecolor]; return cell;}- (void)viewdidload { [super viewdidload]; self.view.backgroundcolor = [uicolor whitecolor]; [self initleftbarbutton]; //注册cell [self.tableview registerclass:[uitableviewcell class] forcellreuseidentifier:@"cell"];} |
注意:注册cell的同时调用了 self.tableview 则调用了懒加载,此时tableview已经创建了.必须要先创建,否则有一个小bug就是,当tableview第一次弹出的时候会从屏幕的(0,0)点弹出,而不是整个tableview从左侧弹出.
|
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
|
#pragma mark - 初始化侧栏按钮-(void)initleftbarbutton{ uibutton * btnleft = [[uibutton alloc] init]; btnleft.frame = cgrectmake(0, 0, 90, 40); [btnleft settitle:@"侧栏" forstate:uicontrolstatenormal]; [btnleft settitlecolor:[uicolor blackcolor] forstate:uicontrolstatenormal]; [btnleft addtarget:self action:@selector(didleftbtn) forcontrolevents:uicontroleventtouchupinside]; self.navigationitem.leftbarbuttonitem = [[uibarbuttonitem alloc] initwithcustomview:btnleft]; self.btnleft = self.navigationitem.leftbarbuttonitem;}#pragma mark - 懒加载tableview-(uitableview *)tableview{ if (_tableview == nil) { _tableview = [[uitableview alloc] init]; _tableview.delegate = self; _tableview.datasource = self; _tableview.backgroundcolor = [uicolor orangecolor]; //第一次点击tableview从左上角弹出,优化方案--先创建出tableview cgfloat hight = kscreenh; cgfloat x = 0; cgfloat y = knavw; cgfloat width = 0; _tableview.frame = cgrectmake(x, y, width, hight); //取消显示竖直滚动条 _tableview.showsverticalscrollindicator = no; } return _tableview;} |
懒加载的时候直接创建tableview,让其宽度 == 0 即可.
|
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
|
#pragma mark - 点击侧栏按钮弹出tableview-(void)didleftbtn{ //禁用button等待动画执行完毕再启用button self.btnleft.enabled = no; cgfloat hight = kscreenh; cgfloat x = 0; cgfloat y = knavw; if (!self.openslide) { //添加动画 [uiview animatewithduration:0.3 animations:^{ cgfloat width = kscreenw / 3; self.tableview.frame = cgrectmake(x, y, width, hight); }]; [self.view addsubview:self.tableview]; } else { [uiview animatewithduration:0.3 animations:^{ cgfloat width = 0; self.tableview.frame = cgrectmake(x, y, width, hight); }]; } //执行完毕动画 取消禁用button [self performselector:@selector(setbtnleftenabled) withobject:nil afterdelay:0.3]; //监视侧栏是否打开 if (self.openslide == yes) { self.openslide = no; } else { self.openslide = yes; }} |
点击 侧栏 按钮弹出tableview,此过程中让其动画执行,不会显得生硬.让tableview的宽度从0---> 屏幕宽度的三分之一
记录tableview打开的状态.
执行动画的过程中禁用 侧栏 按钮,由于代码执行时间的瞬间完成的,动画执行时间是0.3s,则延迟0.3s取消禁用 侧栏 按钮.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
//不用反复创建tableview//#pragma mark - 移除tableview//-(void)removesliedview{//// [self.tableview removefromsuperview];// self.btnleft.enabled = yes;//}#pragma mark - 动画执行完毕启用"侧栏"按钮-(void)setbtnleftenabled{ self.btnleft.enabled = yes; //动画执行完毕让第一个cell显示在最顶端 self.tableview.contentoffset = cgpointmake(0, 0);}- (void)didreceivememorywarning { [super didreceivememorywarning]; // dispose of any resources that can be recreated.}@end |
之前犯过一个错误就是点击 侧栏 按钮创建tableview,再点击 销毁 tableview,这样比较耗性能.通过懒加载先创建tableview,收回tableview的时候让其宽度 == 0 即可.
上图演示的可以看出,当滑动tableview的时候,再次点击进去tableview还是滑动的位置,不会恢复到开始 下标为 0 的cell为最上面显示的cell.优化方案:让tableview的偏移contentoffset等于 0即可.代码不能写在 弹出tableview 与 收回 tableview的动画代码中,因为这样会让人看出来.写在动画执行完毕后的代码中.
源代码地址:https://git.oschina.net/alexpei/pbsliedmenu.git
以上就是本文的全部内容，希望对大家的学习有所帮助。
