iOS開發UI篇--一個側滑選單SlidingMenu

邏輯教育-楚陽發表於2018-11-15
iOSUI

一、簡介

側滑選單已經成為app一個極常用的設計，不管是事務類，效率類還是生活類app。側滑選單因Path 2.0和Facebook為開發者熟知，國內目前也有很多流行app用到了側滑選單，比如QQ、網易郵箱、知乎等等。
IOS官方並沒有提供類似於側滑欄之類的元件，所以我們需要自己寫一個側滑欄控制元件，為了不要重複造輪子，我在github上找到了一個使用簡單方便，新手容易入手的側滑選單控制元件，Demo下載地址：這是一個我的iOS交流群：624212887，群檔案自行下載，不管你是小白還是大牛熱烈歡迎進群 ，分享面試經驗，討論技術， 大家一起交流學習成長！希望幫助開發者少走彎路。

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

iOS開發UI篇--一個側滑選單SlidingMenu

二、使用說明

第一步：匯入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動畫的使用的部落格。敬請期待。

四、下載地址

Demo下載地址：這是一個我的iOS交流群：624212887，群檔案自行下載，不管你是小白還是大牛熱烈歡迎進群 ，分享面試經驗，討論技術， 大家一起交流學習成長！希望幫助開發者少走彎路。

如果覺得對你還有些用，就關注小編+喜歡這一篇文章。你的支援是我繼續的動力。

下篇文章預告：iOS動畫的總結

文章來源於網路，如有侵權，請聯絡小編刪除。


相關文章