抽屉效果

2016-06-12 本文已影响334人 laitys

一.RESideMenu

现在大多App的主框架都是UITabBarController加若干导航控制器或者是带有抽屉效果的框架,抽屉效果最明显的运用就是在QQ上,之前项目中运用到抽屉效果,运用的是Git上的一个第三方库RESideMenu(6000多star),当时没有太多的时间去研究其内部代码,如今有了点时间就研究了一下其内部实现,自己写了一个简单的demo.抽屉效果的实现看似简单,感觉加上两个手势就可以搞定,其实其内部实现是比较麻烦的,自己写的demo也只是简单实现了一下效果,远不及RESideMenu那样封装的出色.RESideMenu方便快捷,个人感觉封装的极好.而且作者在Examples中提供了两套解决方案,一套纯代码,一套StoryBoard,适用于不同情况的开发者.[RESideMenu下载地址]
(https://github.com/romaonthego/RESideMenu.git)

RESideMenu示例.gif

二.MYDemo

自己写的小示例的整体思想是创建一个MenuController,在这个菜单控制器上添加一个左侧菜单视图和一个根视图(MenController引用两个控制器,取它们视图添加到自己的view上,这样方便把事件分模块处理,特别是左侧菜单控制器),在根视图上添加左右滑动的手势(此处用的是UISwipeGestureRecognizer轻扫手势,而RESideMenu用的是拖动手势UIPanGestureRecognizer,轻扫手势一次势触发改变菜单视图和根视图frame的方法,而拖动手势可以连续实时拖动,触发其改变frame的方法,它触发变frame的方法代码就有150多行,他是根据偏移量判断拖动的方向和状态,逻辑比较复杂,而我用的轻扫手势触发的改变frame的方法仅仅是一次性改变,没有连续拖动的效果,只实现了一个简单的抽屉效果)

创建MenuController类
MenuController .h文件
@interface MenuViewController : UIViewController
/// 左侧抽屉控制器
@property (nonatomic, strong) UIViewController *leftVC;
/// 根视图控制器
@property (nonatomic, strong) UIViewController *rootVC;
/// 记录是否打开抽屉,默认是关闭
@property (nonatomic, assign) BOOL isDisplayMenu;
```
///  根视图控制器的初始化方法
- (instancetype)initWithRootViewController:(UIViewController *)controller;
@end
```

MenuController .m文件
#import "MenuViewController.h"

   @interface MenuViewController ()
  //向左轻扫手势
  @property (nonatomic, strong) UISwipeGestureRecognizer *leftSwipe;
  //向右轻扫手势
  @property (nonatomic, strong) UISwipeGestureRecognizer *rightSwipe;
  @end

  @implementation MenuViewController

   ///  根视图控制器的初始化方法
  -(instancetype)initWithRootViewController:(UIViewController *)controller
  {
      if (self = [super init]) {
      self.rootVC = controller;
  }
        return self;
   }

  - (void)viewDidLoad {
      [super viewDidLoad];

  }

    #pragma mark 设置导航栏控制器左侧按钮

      ///  rootVC根控制器是导航栏控制器的时候才能设置 所以要加上判读
     - (void)setLeftBarButton{
           if (self.rootVC == nil) {
    return;
    }
      //判断根控制器是否为导航控制器 因为只有导航控制器才有navigationBar
       if ([self.rootVC isKindOfClass:[UINavigationController class]]) {
           UIBarButtonItem *leftBarButtonItem = [[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:@"bianji"] style:UIBarButtonItemStylePlain target:self action:@selector(leftBarbuttonAction:)];
    
           UINavigationController *naVC =(UINavigationController *) self.rootVC;
           naVC.navigationBar.tintColor = [UIColor lightGrayColor];
           //取出导航控制器管理的控制器数组中第一个控制器
           UIViewController *firstVC = [[naVC viewControllers]objectAtIndex:0];
           firstVC.navigationItem.leftBarButtonItem = leftBarButtonItem;
    
    }
  }

     #pragma mark 导航栏左侧菜单按钮点击事件

    - (void)leftBarbuttonAction:(UIBarButtonItem *)button{
       //先判断当前状态是打开还是关闭
       if (self.isDisplayMenu) {
           [self hiddenLeftMenu];
       }else{
           [self showLeftMenu];
       }
   }

   #pragma mark setter && getter

   - (UISwipeGestureRecognizer *)leftSwipe
   {
       if (_leftSwipe == nil) {
           _leftSwipe = [[UISwipeGestureRecognizer alloc]initWithTarget:self        action:@selector(leftAction:)];
            _leftSwipe.direction = UISwipeGestureRecognizerDirectionLeft;
        }
       return _leftSwipe;
    }

    - (UISwipeGestureRecognizer *)rightSwipe
   {
       if (_rightSwipe == nil) {
           _rightSwipe = [[UISwipeGestureRecognizer alloc]initWithTarget:self     action:@selector(rightAction:)];
           }
          return _rightSwipe;
   }

   - (void)setLeftVC:(UIViewController *)leftVC
   {
       _leftVC = leftVC;
   }

   - (void)setRootVC:(UIViewController *)rootVC
   {
       _rootVC = rootVC;
       if (_rootVC) {
            //取出根视图控制器视图 添加到MenuViewVC的view上
           UIView *view = rootVC.view;
           view.frame = self.view.bounds;
           [self.view addSubview:view];
    
           //添加左右手势
          [view addGestureRecognizer:self.leftSwipe];
          [view addGestureRecognizer:self.rightSwipe];
    
           //设置导航栏左侧按钮
           [self setLeftBarButton];
     }
   }

  #pragma mark 手势回调方法

   - (void)leftAction:(UISwipeGestureRecognizer *)left{
      [self hiddenLeftMenu];
    }

  - (void)rightAction:(UISwipeGestureRecognizer *)right{
       [self showLeftMenu];
   }

    #pragma mark 显示和隐藏左侧菜单

   ///  显示左侧菜单
  - (void)showLeftMenu{
     //拿到左侧控制器视图
     UIView *leftView = self.leftVC.view;
     CGRect frame = self.view.frame;
     frame.size.width = 100;
     //设置菜单的大小 宽度100
     leftView.frame = frame;

     [self.view insertSubview:leftView atIndex:0];

      //移动菜单的根视图
      frame = _rootVC.view.frame;
      frame.origin.x = 100;
      [UIView animateWithDuration:0.5 animations:^{
           _rootVC.view.frame = frame;
          self.isDisplayMenu = YES;
      }];
   }

  ///  隐藏左侧菜单
  - (void)hiddenLeftMenu{
       CGRect frame = _rootVC.view.frame;
      frame.origin.x = 0;
      [UIView animateWithDuration:0.5 animations:^{
          _rootVC.view.frame = frame;
         self.isDisplayMenu = NO;
      }];
  }

创建LeftViewController左侧菜单类
LeftViewController .h文件
#import <UIKit/UIKit.h>

  @interface LeftViewController : UIViewController
  ///  标题数组
  @property (nonatomic, strong) NSMutableArray *leftTitleArray;
  ///  控制器数组
  @property (nonatomic, strong) NSMutableArray *viewControllers;
  @end

LeftViewController .m文件
#import "LeftViewController.h"
#import "AppDelegate.h"
static NSString *reuseID = @"cell";

    @interface LeftViewController ()<UITableViewDelegate,UITableViewDataSource>
    @property (nonatomic, strong) UITableView *tableView;
    @end

    @implementation LeftViewController

   - (void)viewDidLoad {
       [super viewDidLoad];
       [self prepareForTableView];
   }

   - (void)prepareForTableView{
         CGRect frame = self.view.bounds;
         frame.origin.y = 64;
         self.tableView.frame = frame;
         self.tableView.delegate = self;
         self.tableView.dataSource = self;
         self.tableView.backgroundColor = [UIColor lightGrayColor];
        [self.view addSubview:self.tableView];
        [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:reuseID];
  }

    #pragma mark - UItabelViewDelegate && DataSource

    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection: (NSInteger)section
     {
         return self.leftTitleArray.count;
     }

    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
         UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:reuseID  forIndexPath:indexPath];
         cell.textLabel.text = self.leftTitleArray[indexPath.row];
         return cell;
    }

    - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
    {
            //判断控制器数组是否存在 并且个数是否与标题个数一致
           if (self.viewControllers && self.leftTitleArray.count == self.viewControllers.count) {
                 AppDelegate *appDelegate = [[UIApplication sharedApplication] delegate];
                 //取到根视图控制器
                 MenuViewController *menuVC = appDelegate.menuVC;
                 menuVC.isDisplayMenu = NO;
                 UINavigationController *naVC = [[UINavigationController   alloc]initWithRootViewController:self.viewControllers[indexPath.row]];
                //重新设置菜单控制器的根控制器
                [menuVC setRootVC:naVC];
              }
       }

    - (UITableView *)tableView
       {
              if (_tableView == nil) {
               _tableView = [[UITableView alloc]init];
        }
           return _tableView;
       }

至此关于抽屉效果的两个类完成了,在APPDelegate中引用
AppDelegate.h文件
#import <UIKit/UIKit.h>
#import "MenuViewController.h"

@interface AppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;
@property (nonatomic, strong) MenuViewController *menuVC;

@end

AppDelegate.m文件
#import "AppDelegate.h"
#import "MenuViewController.h"
#import "LeftViewController.h"
@interface AppDelegate ()

  @end

  @implementation AppDelegate

  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:     (NSDictionary *)launchOptions {
        self.window = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];
        UITableViewController *tableVC = [[UITableViewController alloc]init];
        UINavigationController *naVC = [[UINavigationController  alloc]initWithRootViewController:tableVC];
        //设置菜单控制器根控制器
        self.menuVC = [[MenuViewController alloc]initWithRootViewController:naVC];
        //设置菜单控制器的左侧控制器
        LeftViewController *leftVC = [[LeftViewController alloc]init];
        leftVC.leftTitleArray = [NSMutableArray arrayWithObjects:@"个人",@"共享", nil];
        UIViewController *firstVC = [[UIViewController alloc]init];
        firstVC.view.backgroundColor = [UIColor brownColor];
        UIViewController *secondVC = [[UIViewController alloc]init];
        secondVC.view.backgroundColor = [UIColor orangeColor];
        leftVC.viewControllers = [NSMutableArray arrayWithObjects:firstVC,secondVC, nil];
        _menuVC.leftVC = leftVC;
        leftVC.view.backgroundColor = [UIColor grayColor];
        //设置window的根控制器为菜单控制器
        self.window.rootViewController = _menuVC;
        [self.window makeKeyAndVisible];
        return YES;
    }

Mydemo.gif

抽屉效果

一.RESideMenu

二.MYDemo

猜你喜欢

热点阅读