服务器之家

服务器之家 > 正文

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

时间:2021-01-17 20:30     来源/作者:菜鸟Alex

效果图如下

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

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

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

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享 2020-04-07
返回顶部