效果图如下
代码实现以及思路下面分析:
代码创建导航控制器
Appdelegate.m中
#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中
// // 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正在弹出或者收回执行动画过程中禁用.
@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从左侧弹出.
#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 即可.
#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取消禁用 侧栏 按钮.
//不用反复创建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
以上就是本文的全部内容，希望对大家的学习有所帮助。