一.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@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 ()
@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
#import "MenuViewController.h"@interface AppDelegate : UIResponder@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