卤煮一时心血来潮想实现个类似QQ那种侧边栏的效果基于卤煮一向懒惰的天性想急于实现效果又不想动脑筋使用系统的框架去实现于是开始各种百度结果却大失所望不得已卤煮开始去找优秀的demo来研究了这里卤煮推荐一下MMDrawerController这个框架卤煮有时间会去研究一下框架但是现在我们来切入正题简易速成的实现我们想要的效果
1.首先我们先导入下系统的框架
2.第二步再导入一下MMDrawerController这个框架可以去github搜索搜索不到的可以联系卤煮发给你
3.第三步咋们来到AppDelegate.m文件中 #import这几个类
#import "RootTabbarController.h" #import "MMDrawerController.h" #import "MMDrawerVisualState.h" #import <QuartzCore/QuartzCore.h>#import "LeftSettingVC.h" //左侧弹出的控制器
接着便来实现根视图的切换由于此框架已经帮我们实现了根试图的设置所以我们只需要简单地写下如下几行代码便可
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
LeftSettingVC *leftSideVC = [[LeftSettingVC alloc] init];
UINavigationController *leftNav = [[UINavigationController alloc] initWithRootViewController:leftSideVC];
self.drawerController = [[MMDrawerController alloc] initWithCenterViewController:[RootTabbarController new] leftDrawerViewController:leftNav];
[self.drawerController setShowsShadow:NO];
[self.drawerController setOpenDrawerGestureModeMask:MMOpenDrawerGestureModeAll];
[self.drawerController setCloseDrawerGestureModeMask:MMCloseDrawerGestureModeAll];
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
self.window.backgroundColor = [UIColor whiteColor];
self.window.rootViewController = self.drawerController;
[self.window makeKeyAndVisible];
return YES;
}4.根试图的切换码好了你会发现当你左滑时已经可以实现侧边栏的效果了然后我们想要的效果还是没有实现当点击RootTabbarController的子视图控制器的barItem时实现侧边栏的切换效果好我们来到RootTabbarController的子视图控制器中导入如下几个类
#import "LeftSettingVC.h" #import "MMDrawerBarButtonItem.h" #import "UIViewController+MMDrawerController.h"
接着在navigationBarItem的点击事件中只需要写下如下一行代码
[self.mm_drawerController toggleDrawerSide:MMDrawerSideLeft animated:YES completion:nil];
此时哦凑你会发现你想要的效果已经实现一大半了可以点击弹出侧边栏了也可以滑动出现侧边栏了但是还没完还有一步。
5.你可以看看QQ的实现效果但你点击左侧边栏中得cell时它会跳到一个新的视图控制器而这个控制器也是可以滑动返回点击返回的而且在返回的瞬间你会发现侧边栏效果的中间的根视图瞬间被切换了那这个我们要怎么实现呢其实很简单我们来到LeftSettingVC中导入如下的类
#import "RightVC.h"//点击cell时出现的其他页面可以任由我们自定义的 #import "UIViewController+MMDrawerController.h"
然后在tableView的didSelectRow方法中写下如下的代码
RightVC *right = [[RightVC alloc] init]; UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:right]; [self.mm_drawerController setCenterViewController:nav withCloseAnimation:YES completion:nil];
这时候点击左侧边栏的cell所出现的页面已经可以出现了然而咋们的RightVC的返回还没有写好继续码
来到RightVC中导入如下几个类
#import "MMDrawerBarButtonItem.h" #import "RootTabbarController.h" #import "UIViewController+MMDrawerController.h"
在这里我要插一句这个框架呢是有一个已经设置好的icon图标的也就是Navigation的BarItem但我们最好还是使用自定义的因为我发现它的icon并不能完全适配我们自己的项目这里我就将代码一块儿码下
- (void)setUpNavigation{
MMDrawerBarButtonItem *leftBarItem = [[MMDrawerBarButtonItem alloc] initWithTarget:self action:@selector(back)]; //也就是这句如果是我的话 我会使用自定义的UIBarButtonItem *leftBarItem = [[UIBarButtonItem alloc] initWithImage:[UIImage p_w_picpathNamed:@"399-list1"] style:UIBarButtonItemStyleDone target:self action:@selector(back)];
leftBarItem.tintColor = [UIColor whiteColor];
[self addNavigationWithTitle:@"设置" leftItem:leftBarItem rightItem:nil titleView:nil]; //这是我自定义的方法层煮们按自己的方法设置navigation即可}
//主要就是这个点击事件中的视图的切换
- (void)back{
RootTabbarController *rootTab = [RootTabbarController new];//记住以下两段代码的顺序不能颠倒否则将会瞬间切换视图无法回弹到左侧边栏的控制器
[self.mm_drawerController toggleDrawerSide:MMDrawerSideLeft animated:YES completion:nil];
[self.mm_drawerController setCenterViewController:rootTab withCloseAnimation:YES completion:nil];
}其实借助三方框架实现侧边栏就是这么简单主要是网上逛了一圈都是一样的没有实质性的解决问题的都是转来转去难懂甚至敷衍的办法譬如卤煮看到的某一篇个人工具类放进去说是要导入的三方框架气的卤煮差点没砸电脑。