效果圖如下
代碼實(shí)現(xiàn)以及思路下面分析:
代碼創(chuàng)建導(dǎo)航控制器
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];//必須要初始化導(dǎo)航控制器的根控制器 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;/** 記錄是否打開側(cè)邊欄 */@property (nonatomic, assign) bool openslide;/** 側(cè)欄按鈕 */@property (nonatomic, strong) uibarbuttonitem *btnleft;@end |
用一個bool值來記錄左側(cè)view是打開還是關(guān)閉狀態(tài).每次點(diǎn)擊都要改變記錄tableview狀態(tài)的值
用屬性保存 側(cè)欄 按鈕,用來當(dāng)左側(cè)tableview正在彈出或者收回執(zhí)行動畫過程中禁用.
|
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數(shù)據(jù)源-(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的同時調(diào)用了 self.tableview 則調(diào)用了懶加載,此時tableview已經(jīng)創(chuàng)建了.必須要先創(chuàng)建,否則有一個小bug就是,當(dāng)tableview第一次彈出的時候會從屏幕的(0,0)點(diǎn)彈出,而不是整個tableview從左側(cè)彈出.
|
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 - 初始化側(cè)欄按鈕-(void)initleftbarbutton{ uibutton * btnleft = [[uibutton alloc] init]; btnleft.frame = cgrectmake(0, 0, 90, 40); [btnleft settitle:@"側(cè)欄" 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]; //第一次點(diǎn)擊tableview從左上角彈出,優(yōu)化方案--先創(chuàng)建出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;} |
懶加載的時候直接創(chuàng)建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 - 點(diǎn)擊側(cè)欄按鈕彈出tableview-(void)didleftbtn{ //禁用button等待動畫執(zhí)行完畢再啟用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); }]; } //執(zhí)行完畢動畫 取消禁用button [self performselector:@selector(setbtnleftenabled) withobject:nil afterdelay:0.3]; //監(jiān)視側(cè)欄是否打開 if (self.openslide == yes) { self.openslide = no; } else { self.openslide = yes; }} |
點(diǎn)擊 側(cè)欄 按鈕彈出tableview,此過程中讓其動畫執(zhí)行,不會顯得生硬.讓tableview的寬度從0---> 屏幕寬度的三分之一
記錄tableview打開的狀態(tài).
執(zhí)行動畫的過程中禁用 側(cè)欄 按鈕,由于代碼執(zhí)行時間的瞬間完成的,動畫執(zhí)行時間是0.3s,則延遲0.3s取消禁用 側(cè)欄 按鈕.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
//不用反復(fù)創(chuàng)建tableview//#pragma mark - 移除tableview//-(void)removesliedview{//// [self.tableview removefromsuperview];// self.btnleft.enabled = yes;//}#pragma mark - 動畫執(zhí)行完畢啟用"側(cè)欄"按鈕-(void)setbtnleftenabled{ self.btnleft.enabled = yes; //動畫執(zhí)行完畢讓第一個cell顯示在最頂端 self.tableview.contentoffset = cgpointmake(0, 0);}- (void)didreceivememorywarning { [super didreceivememorywarning]; // dispose of any resources that can be recreated.}@end |
之前犯過一個錯誤就是點(diǎn)擊 側(cè)欄 按鈕創(chuàng)建tableview,再點(diǎn)擊 銷毀 tableview,這樣比較耗性能.通過懶加載先創(chuàng)建tableview,收回tableview的時候讓其寬度 == 0 即可.
上圖演示的可以看出,當(dāng)滑動tableview的時候,再次點(diǎn)擊進(jìn)去tableview還是滑動的位置,不會恢復(fù)到開始 下標(biāo)為 0 的cell為最上面顯示的cell.優(yōu)化方案:讓tableview的偏移contentoffset等于 0即可.代碼不能寫在 彈出tableview 與 收回 tableview的動畫代碼中,因?yàn)檫@樣會讓人看出來.寫在動畫執(zhí)行完畢后的代碼中.
源代碼地址:https://git.oschina.net/alexpei/pbsliedmenu.git
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。
