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

1、簡介

側滑菜單已經成爲app一個極經常使用的設計,無論是事務類,效率類仍是生活類app。側滑菜單因Path 2.0和Facebook爲開發者熟知,國內目前也有不少流行app用到了側滑菜單,好比QQ、網易郵箱、知乎等等。
IOS官方並無提供相似於側滑欄之類的組件,因此咱們須要本身寫一個側滑欄控件,爲了避免要重複造輪子,我在github上找到了一個使用簡單方便,新手容易入手的側滑菜單控件,Demo下載地址:這是一個個人iOS交流羣:624212887,羣文件自行下載,無論你是小白仍是大牛熱烈歡迎進羣 ,分享面試經驗,討論技術, 你們一塊兒交流學習成長!但願幫助開發者少走彎路。git

下面咱們就是使用上面的控件,來作一個側滑欄的小Demo,來教你們快速入門側滑欄控件。
Demo界面演示以下:github

1.gif

2、使用說明

第一步:導入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代替。app

第五步、在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;
}

3、總結

接下來準備使用這個界面做爲主框架,寫一系列關於iOS動畫的總結 和 facebook開源動畫項目pop動畫的使用的博客。敬請期待。ide

4、下載地址

Demo下載地址:這是一個個人iOS交流羣:624212887,羣文件自行下載,無論你是小白仍是大牛熱烈歡迎進羣 ,分享面試經驗,討論技術, 你們一塊兒交流學習成長!但願幫助開發者少走彎路。——點擊:加入學習

若是以爲對你還有些用,就關注小編+喜歡這一篇文章。你的支持是我繼續的動力。動畫

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

文章來源於網絡,若有侵權,請聯繫小編刪除。

相關文章
相關標籤/搜索