一, 简介
侧滑菜单已经成为 App 一个极常用的设计, 不管是事务类, 效率类还是生活类 App. 侧滑菜单因 Path 2.0 和 Facebook 为开发者熟知, 国内目前也有很多流行 App 用到了侧滑菜单, 比如 QQ, 网易邮箱, 知乎等等.
iOS 官方并没有提供类似于侧滑栏之类的组件, 所以我们需要自己写一个侧滑栏控件, 为了不要重复造轮子, 我在 GitHub 上找到了一个使用简单方便, 新手容易入手的侧滑菜单控件, Demo 下载地址: 这是一个我的 iOS 交流群: 624212887, 群文件自行下载, 不管你是小白还是大牛热烈欢迎进群 , 分享面试经验, 讨论技术, 大家一起交流学习成长! 希望帮助开发者少走弯路.
下面我们就是使用上面的控件, 来做一个侧滑栏的小 Demo, 来教大家快速入门侧滑栏控件.
Demo 界面演示如下:
1.gif
二, 使用说明
第一步: 导入 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.Windows = [[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.Windows.rootViewController = revealViewController;
- self.Windows.backgroundColor = [UIColor whiteColor];
- [self.Windows makeKeyAndVisible];
- return YES;
- }
三, 总结
接下来准备使用这个界面作为主框架, 写一系列关于 iOS 动画的总结 和 Facebook 开源动画项目 pop 动画的使用的博客. 敬请期待.
来源: http://www.jianshu.com/p/7c6a0f62dc9d