ios仿侧边抽屉效果实现代码

效果图如下

代码实现以及思路下面分析:
代码创建导航控制器
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

以上就是本文的全部内容，希望对大家的学习有所帮助。