IOS開發UI篇--一個側滑菜單SlidingMenu

標籤：

一、簡介

側滑菜單已經成為app一個極常用的設計，不管是事務類，效率類還是生活類app。側滑菜單因Path 2.0和Facebook為開發人員熟知，國內目前也有很多流行app用到了側滑菜單，比如QQ、網易郵箱、知乎等等。
iOS官方並沒有提供類似於側滑欄之類的組件，所以我們需要自己寫一個側滑欄控制項，為了不要重複造輪子，我在github上找到了一個使用簡單方便，新手容易入手的側滑菜單控制項，地址：https://github.com/John-Lluch/SWRevealViewController/tree/master/

下面我們就是使用上面的控制項，來做一個側滑欄的小Demo，來教大家快速入門側滑欄控制項。
Demo介面示範如下：

 

二、使用說明第一步：匯入SWRevealViewController.h和SWRevealViewController.m檔案第二步：編寫中間顯示介面CenterViewController

在viewDidLoad方法中設定SWRevealViewController中的panGestureRecognizer方法，即可實現在主介面上滑動就可以出現左側或者右側菜單。設定revealToggle:方法就可以實現點擊進行左邊菜單和中間介面的切換。設定rightRevealToggle:方法就可以實現右邊菜單和中間介面的切換。下面就是中間介面的相關代碼：

   //註冊該頁面可以執行滑動切換    SWRevealViewController *revealController = self.revealViewController;    [self.view addGestureRecognizer:revealController.panGestureRecognizer];    // 註冊該頁面可以執行點擊切換    [leftBtn addTarget:revealController action:@selector(revealToggle:) forControlEvents:UIControlEventTouchUpInside];    [rightBtn addTarget:revealController action:@selector(rightRevealToggle:) forControlEvents:UIControlEventTouchUpInside];

 

第三步、編寫左側功能表列LeftViewController

左側功能表列是由一個UITableView組成的，我們在每個cell的點擊方法中執行 [revealViewController pushFrontViewController:viewController animated:YES];切換中間介面的操作。代碼如下：

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{    SWRevealViewController *revealViewController = self.revealViewController;    UIViewController *viewController;    switch (indexPath.row) {        case 0:            viewController = [[CenterView1Controller alloc] init];            break;        case 1:            viewController = [[CenterView2Controller alloc] init];            break;        default:            break;    }    [revealViewController pushFrontViewController:viewController animated:YES];}

 

第四步、編寫右側功能表列RightViewController

這裡主要示範左側功能表列，這裡就不做過多描述。就以一個簡單的ViewController代替。

第五步、在AppDelegate.m檔案中的- (BOOL)application:(UIApplication  )application didFinishLaunchingWithOptions:(NSDictionary )launchOptions方法中配置以上介面，可以分別設定左側功能表列、右側功能表列和中間首頁。

詳見代碼注釋：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];    //左側功能表列    LeftViewController *leftViewController = [[LeftViewController alloc] init];    //首頁    CenterView1Controller *centerView1Controller = [[CenterView1Controller alloc] init];    //右側功能表列    RightViewController *rightViewController = [[RightViewController alloc] init];    SWRevealViewController *revealViewController = [[SWRevealViewController alloc] initWithRearViewController:leftViewController frontViewController:centerView1Controller];    revealViewController.rightViewController = rightViewController;    //浮動層離左邊距的寬度    revealViewController.rearViewRevealWidth = 230;    //    revealViewController.rightViewRevealWidth = 230;    //是否讓浮動層彈回原位    //mainRevealController.bounceBackOnOverdraw = NO;    [revealViewController setFrontViewPosition:FrontViewPositionLeft animated:YES];    self.window.rootViewController = revealViewController;    self.window.backgroundColor = [UIColor whiteColor];    [self.window makeKeyAndVisible];    return YES;}

 

三、總結

接下來準備使用這個介面作為主架構，寫一系列關於IOS動畫的總結 和 facebook開源動畫項目pop動畫的使用的部落格。敬請期待。

四、

github：https://github.com/yixiangboy/IOSAnimationDemo

如果覺得對你還有些用，給一顆star吧。你的支援是我繼續的動力。

博主的話

以前看過很多別人的部落格，學到不少東西。現在準備自己也開始寫寫部落格，希望能夠幫到一些人。 
我的連絡方式： 
微博：新浪微博 
部落格：http://blog.csdn.net/yixiangboy 
github：https://github.com/yixiangboy

IOS開發UI篇--一個側滑菜單SlidingMenu