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吧。你的支持是我继续的动力。
博主的话
以前看过很多别人的博客,学到不少东西。现在准备自己也开始写写博客,希望能够帮到一些人。
iOS开发UI篇--一个侧滑菜单SlidingMenu的更多相关文章
- IOS开发UI篇--一个支持图文混排的ActionSheet
一.简单介绍 UIActionSheet是IOS提供给我们开发人员的底部弹出菜单控件.一般用于菜单选择.操作确认.删除确认等功能.IOS官方提供的下面方式对UIActionView进行实例化: - ( ...
- ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局
本文转自 :http://www.cnblogs.com/wendingding/p/3761730.html ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布 ...
- iOS开发UI篇—使用嵌套模型完成的一个简单汽车图标展示程序
iOS开发UI篇—使用嵌套模型完成的一个简单汽车图标展示程序 一.plist文件和项目结构图 说明:这是一个嵌套模型的示例 二.代码示例: YYcarsgroup.h文件代码: // // YYcar ...
- iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局
iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局 一.项目文件结构和plist文件 二.实现效果 三.代码示例 1.没有使用配套的类,而是直接使用xib文 ...
- iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)
iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一) 一.项目结构和plist文件 二.实现代码 1.说明: 主控制器直接继承UITableViewController // ...
- iOS开发UI篇—使用picker View控件完成一个简单的选餐应用
iOS开发UI篇—使用picker View控件完成一个简单的选餐应用 一.实现效果 说明:点击随机按钮,能够自动选取,下方数据自动刷新. 二.实现思路 1.picker view的有默认高度为162 ...
- iOS开发UI篇—CAlayer(自定义layer)
iOS开发UI篇—CAlayer(自定义layer) 一.第一种方式 1.简单说明 以前想要在view中画东西,需要自定义view,创建一个类与之关联,让这个类继承自UIView,然后重写它的Draw ...
- iOS开发UI篇—UITabBarController简单介绍
iOS开发UI篇—UITabBarController简单介绍 一.简单介绍 UITabBarController和UINavigationController类似,UITabBarControlle ...
- iOS开发UI篇—CAlayer层的属性
iOS开发UI篇—CAlayer层的属性 一.position和anchorPoint 1.简单介绍 CALayer有2个非常重要的属性:position和anchorPoint @property ...
随机推荐
- 判断浏览器是否支持某些新属性---placeholder兼容问题解决
function is_true(){ return 'placeholder' in document.createElement('input'); } 实例:placeholder在低版本IE浏 ...
- Datatable foeach 遍历
//1.创建 datatable DataTable dt = new DataTable("dtDemo");//可以给表创建一个名字,datatable //2.给表加个列名: ...
- ATcoderARC100D Equal Cut
ARC100 D - Equal Cut Description: 给出长度为n的序列A,把这个序列分成连续的四段,最小化极差. \(4≤n≤2×10^5,4≤n≤2×10^5\) Solution: ...
- 【DRF序列化】
目录 基本的序列化操作 外键/多对多关系的序列化 反序列化的操作 单条数据查询及更新 数据的校验 单个字段的校验 多个字段的校验 自定义校验器 终极用法 ModelSerializer 前后端分离后, ...
- 【Henu ACM Round #12 B】 Alice, Bob, Two Teams
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 写个前缀和 和 一个后缀和. (即前i个字符A所代表的数字的和以及前i个字符B所代表的数字的和.. 然后枚举前i个字符翻转. 求B对 ...
- 兔子--ps中的基本工具总结(ps cs5)
矩形选框工具 椭圆选框工具 单行选框工具 单列选框工具 移动工具 套索工具柜 多边形套索工具 磁性套索工具 魔棒工具 高速选择工具 裁剪工具 切片工具 切片选择工具 吸管工具 颜色取样器工具 标尺工具 ...
- EasyUI——DataGrid中嵌入Radio
前一篇博客写到项目中的广告位管理,当时没有写到今天的问题,这个问题当时也是困扰我好久. 经过自己的努力和同志们的帮助,最后最终解决. 实现要求把全部的广告位后面的单选button设成一组,目的是一个广 ...
- 一些VPS
https://www.perfectip.net 5美元/1C/4G/20G/10Thttps://www.hetzne ...
- error while loading shared libraries: libpcre.so.0的解决办法
error while loading shared libraries: libpcre.so.0的解决办法 http://blog.csdn.net/xjkwq1qq/article/detail ...
- GridView-属性大全
这是个网格控件 他的实现也是通过adapter来实现的,感觉跟listview在使用上并没有多大的区别 常见属性如下 1.android:numColumns=”auto_fit” //GridVie ...