滷煮一時心血來潮想實現個類似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];
}其實藉助三方框架實現側邊欄就是這麼簡單主要是網上逛了一圈都是一樣的沒有實質性的解決問題的都是轉來轉去難懂甚至敷衍的辦法譬如滷煮看到的某一篇個人工具類放進去說是要導入的三方框架氣的滷煮差點沒砸電腦。