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

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

(0)

相关推荐

  • iOS开发之路--仿网易抽屉效果

    最终效果图: MainStoryBoard示意图: BeyondViewController.h // // BeyondViewController.h // 19_抽屉效果_仿网易 // // Created by beyond on 14-8-1. // Copyright (c) 2014年 com.beyond. All rights reserved. // #import <UIKit/UIKit.h> #import "LeftTableViewControllerD

  • iOS实现简单的抽屉效果

    说到抽屉效果在iOS中比较有名的第三方类库就是PPRevealSideViewController.一说到第三方类库就自然而然的想到我们的CocoaPods,本文用CocoaPods引入PPRevealSideViewController,然后在我们的工程中以代码结合storyboard来做出抽屉效果. 一.在工程中用CocoaPods引入第三方插件PPRevealSideViewController. (1).在终端中搜索PPRevealSideViewController的版本 (2).在P

  • iOS实现左右拖动抽屉效果

    本文实例介绍了iOS实现左右拖动抽屉效果,具体内容如下 利用了触摸事件滑动 touchesMoved: 来触发左右视图的出现和消失 利用loadView方法中添加view 在self.view载入前就把 左右中View都设置好frame 每一个方法都由单独的功能. #import "DarwViewController.h" @interface DarwViewController () @property (nonatomic, weak) UIView *leftView; @p

  • IOS实现点击滑动抽屉效果

    最近,看到好多Android上的抽屉效果,也忍不住想要自己写一个.在Android里面可以用SlidingDrawer,很方便的实现.IOS上面就只有自己写了.其实原理很简单就是 UIView 的移动,和一些手势的操作. 效果图: // // DrawerView.h // DrawerDemo // // Created by Zhouhaifeng on 12-3-27. // Copyright (c) 2012年 CJLU. All rights reserved. // #import

  • iOS如何用100行代码实现简单的抽屉效果

    前言 iOS中抽屉效果的简单实现现在很多应用中都使用到了,网上也有很多了例子,本文主要是通过简单的一些代码来实现的,有需要的可以一起学习学习. 下面是效果图 示例代码如下 #import <UIKit/UIKit.h> @interface MainViewController : UIViewController + (instancetype)mainViewControllerWithLeftViewController:(UIViewController *)leftViewContr

  • iOS实现侧拉栏抽屉效果

    本文实例介绍了iOS实现侧拉栏抽屉效果的相关代码,分享给大家供大家参考,具体内容如下 需要导入第三方的类库如下: 抽屉效果所需第三方类库下载 效果:既可以两侧都实现抽屉效果也可只实现左侧栏或者右侧栏的抽屉效果 关于抽屉效果主要是AppDelegate的代码 AppDelegate.h文件代码: <span style="font-size:18px;"><span style="font-size:18px;">#import <UIK

  • iOS抽屉效果开发案例分享

    本文实例为大家分享了iOS抽屉效果开发实例,供大家参考,具体内容如下 在显示在窗口的控制器上添加三个view(如果只需要往一边滑动就只加2个view) 先声明三个view #import "ViewController.h" @interface ViewController () @property(nonatomic, weak) UIView *mainV; @property(nonatomic, weak) UIView *leftV; @property(nonatomic

  • iOS实现简易抽屉效果、双边抽屉效果

    本文实例为大家分享了iOS实现抽屉效果的全部代码,供大家参考,具体内容如下 iOS实现简易抽屉效果,代码: @interface ViewController () { UIView* _leftView; } @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from

  • Android控件之SlidingDrawer(滑动式抽屉)详解与实例分享

    SlidingDrawer效果想必大家也见到过,它就是1.5模拟器上进入应用程序列表的效果.下面是截图 一.简介  SlidingDrawer隐藏屏外的内容,并允许用户通过handle以显示隐藏内容.它可以垂直或水平滑动,它有俩个View组成,其一 是可以拖动的handle,其二是隐藏内容的View.它里面的控件必须设置布局,在布局文件中必须指定handle和content.例如下面 复制代码 代码如下: <SlidingDrawer android:layout_width="fill_

  • iOS动画之向右拉的抽屉3D效果

    首先我们忽略掉3D效果,先要做的是一个右拉的抽屉效果. 总体思路: 1.创建一个ContainerViewController容器控制器,然后把左侧选择菜单的SideMenuViewController,和右侧负责显示内容的MainViewController 添加到ContainerViewController中. 2.给容器控制器ContainerViewController添加一个手势监听,通过修改偏移量完成抽屉效果. 3.设置anchorPoint,给左侧SideMenuViewCont

随机推荐