iOS 中的抽屉菜单

前言

在移动应用的软件设计当中,由于扣扣的侧滑抽屉,通过右划展示大半屏的个人UI,在用户交互上,新颖方便,因此在大部分应用也借鉴了扣扣的效果,我们项目中便在此基础上,修改了一下,实际上,扣扣的抽屉效果,在Android和iOS两个不同的平台,还有些稍微不一样:

iOS 抽屉,二级页面会直接返回到中间的页面;
Android 抽屉,二级页面会返回到左边页面;

而我们需求是跟Android的抽屉效果接近;

先看一下最终效果

初期探索

一开始接到这个需求,表示懵了,因为项目已经上线一段时间,不是一开始从头开始,项目的页面结构在一开始就确定好了,要更改项目的结构,容易产生一些意料之外的坑,而且让人摸不着头脑;

下图是app更改前后的结构对比图:

开始尝试一:(不更改原来项目的结构)

实现思路:
- 用一个父控制器同时管理两个子控制器,也即就是在父控制器的scrollView上添加两个子控制器的view
缺点:
- 一开始就会加载左边的页面,性能不好
- 由于tabbar优先级比较高,往右边滑动拉出左边的时候,或者往左滑动显示中间页面时候,底部的tabbar会突然显示或者消失,体验不好
优化:
- 朋友提示可以截图优化底部tabbar的突然显示或者隐藏,具体就是:用户刚拉出左边的页面,就截取当前显示的页面,然后当左边页面完全消失后,移除中间页面显示最上层的截图,但是这样做,有一个bug,就是用户快速点击左上角两次,会截取正在滑动的页面的图,然后在回到中间页面的时候,会出现视觉上界面元素混乱
开始尝试二:(不更改项目结构)

实现思路:
app一启动,直接在当前window添加左边的控制器,通过添加手势,改变左边VC-View的frame;
缺点:
- 左边页面push时,需要切换app的根控制器,然后再切换中间页面时,又需要改变当前窗口的根控制器,来回频繁切换并且都是一开始加载不显示的页面,性能体验不好;

最终做法

最后,通过查找摸索,采用第三方MMDrawerController,通过在基类VC中增加一个开关,来控制哪些页面,可以打开抽屉,哪些不能打开;

传送门:MMDrawerController
star✨:7000+经得起考验;
效果图:

MMDrawerController使用简介

优点:

左边VC和右边VC,显示时加载,消失时,销毁,性能较好;
左边VC出现的菜单边距可控,还有各种效果,如3D旋转,平移,位移差平移;

使用方法

导入头文件

#import "MMDrawerController.h"#import "MMDrawerVisualState.h"#import "UIViewController+MMDrawerController.h"

设置根控制器

- (MMDrawerController *)drawerController{    if (!_drawerController) {        leftViewController *leftVc = [[leftViewController alloc] init];        LX_NavgationViewController *leftNavVc = [[LX_NavgationViewController alloc] initWithRootViewController:leftVc];                LX_NavgationViewController *centerNavVc = [[LX_NavgationViewController alloc] initWithRootViewController:self.mainTabBarController];        centerNavVc.navigationBar.hidden = YES;        _drawerController = [[MMDrawerController alloc] initWithCenterViewController:centerNavVc leftDrawerViewController:leftNavVc rightDrawerViewController:nil];        _drawerController.openDrawerGestureModeMask = MMOpenDrawerGestureModeAll;                //初始化手势控制        _drawerController.closeDrawerGestureModeMask =MMCloseDrawerGestureModeAll;        _drawerController.maximumLeftDrawerWidth = leftSideBarWidth;                //阴影效果        _drawerController.showsShadow = NO;                //菜单效果        [_drawerController         setDrawerVisualStateBlock:^(MMDrawerController *drawerController, MMDrawerSide drawerSide, CGFloat percentVisible) {             MMDrawerControllerDrawerVisualStateBlock block;             block = [[MMExampleDrawerVisualStateManager sharedManager]                      drawerVisualStateBlockForDrawerSide:drawerSide];             if(block){                 block(drawerController, drawerSide, percentVisible);             }         }];    }    return _drawerController;}

设置抽屉菜单的效果;

typedef NS_ENUM(NSInteger, MMDrawerAnimationType){    MMDrawerAnimationTypeNone,  //无效果    MMDrawerAnimationTypeSlide, //滑动    MMDrawerAnimationTypeSlideAndScale, //井深效果    MMDrawerAnimationTypeSwingingDoor, //开门效果    MMDrawerAnimationTypeParallax,//位移差,视觉差效果};       [[MMExampleDrawerVisualStateManager sharedManager] setLeftDrawerAnimationType:MMDrawerAnimationTypeParallax];

基类设置开关

- (void)enableOpenCenterDrawer:(BOOL)enable{    if (enable == YES) {        // 能够打开        [AppDelegate appDelegate].drawerController.closeDrawerGestureModeMask =MMCloseDrawerGestureModeAll;    } else {        // 不能打开抽屉        [AppDelegate appDelegate].drawerController.closeDrawerGestureModeMask = MMCloseDrawerGestureModeNone;    }    }- (void)enableOpenLeftDrawer:(BOOL)enable{    if (enable == YES) {        // 能够打开        LX_NavigationController *leftNav = [[LX_NavigationController alloc] initWithRootViewController:[LX_MeViewController meViewController]];        [[AppDelegate appDelegate].drawerController setLeftDrawerViewController:leftNav];        [AppDelegate appDelegate].drawerController.closeDrawerGestureModeMask =MMCloseDrawerGestureModeAll;    } else {        // 不能打开抽屉        [AppDelegate appDelegate].drawerController.closeDrawerGestureModeMask = MMCloseDrawerGestureModeNone;        [[AppDelegate appDelegate].drawerController closeDrawerAnimated:YES completion:^(BOOL finished) {            [[AppDelegate appDelegate].drawerController setLeftDrawerViewController:nil];        }];    }}- (void)enableOpenRightDrawer:(BOOL)enable{    if (enable == YES) {        // 能够打开        //                UINavigationController *RightNav = [[UINavigationController alloc] initWithRootViewController:[[RightViewController alloc] init]];        //        RightViewController *rightVC = [[RightViewController alloc] init];        //        [ShareApp.drawerController setRightDrawerViewController:rightVC];    } else {        // 不能打开抽屉        [[AppDelegate appDelegate].drawerController closeDrawerAnimated:YES completion:^(BOOL finished) {            [[AppDelegate appDelegate].drawerController setRightDrawerViewController:nil];        }];    }}

末尾

demo地址:LXMMDrawerController

关于控制显示隐藏抽屉的开关参考:

抽屉效果的一个第三方库的使用MMDrawerController

如果在使用中,有任何问题,欢迎留言,谢谢

iOS中的抽屉菜单