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

文章来源于网络,若有侵权,请联系小编删除。

相关文章
相关标签/搜索