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

2020-01-15 14:30:22王振洲

注意:注册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