一、简介

侧滑菜单已经成为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的更多相关文章

  1. IOS开发UI篇--一个支持图文混排的ActionSheet

    一.简单介绍 UIActionSheet是IOS提供给我们开发人员的底部弹出菜单控件.一般用于菜单选择.操作确认.删除确认等功能.IOS官方提供的下面方式对UIActionView进行实例化: - ( ...

  2. ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

    本文转自 :http://www.cnblogs.com/wendingding/p/3761730.html ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布 ...

  3. iOS开发UI篇—使用嵌套模型完成的一个简单汽车图标展示程序

    iOS开发UI篇—使用嵌套模型完成的一个简单汽车图标展示程序 一.plist文件和项目结构图 说明:这是一个嵌套模型的示例 二.代码示例: YYcarsgroup.h文件代码: // // YYcar ...

  4. iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局

    iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局 一.项目文件结构和plist文件 二.实现效果 三.代码示例 1.没有使用配套的类,而是直接使用xib文 ...

  5. iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一)

    iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一) 一.项目结构和plist文件 二.实现代码 1.说明: 主控制器直接继承UITableViewController // ...

  6. iOS开发UI篇—使用picker View控件完成一个简单的选餐应用

    iOS开发UI篇—使用picker View控件完成一个简单的选餐应用 一.实现效果 说明:点击随机按钮,能够自动选取,下方数据自动刷新. 二.实现思路 1.picker view的有默认高度为162 ...

  7. iOS开发UI篇—CAlayer(自定义layer)

    iOS开发UI篇—CAlayer(自定义layer) 一.第一种方式 1.简单说明 以前想要在view中画东西,需要自定义view,创建一个类与之关联,让这个类继承自UIView,然后重写它的Draw ...

  8. iOS开发UI篇—UITabBarController简单介绍

    iOS开发UI篇—UITabBarController简单介绍 一.简单介绍 UITabBarController和UINavigationController类似,UITabBarControlle ...

  9. iOS开发UI篇—CAlayer层的属性

    iOS开发UI篇—CAlayer层的属性 一.position和anchorPoint 1.简单介绍 CALayer有2个非常重要的属性:position和anchorPoint @property ...

随机推荐

  1. XHTML是什么?XHTML与HTML的区别

    经常看到web前端开发人员口中提到XHTML,相信很多web前端开发的新手们感到很疑惑,甚至有些时候认为XHTML就是HTML,这个观点是错误的,今天零度就给大家好好说道说道XHTML和HTML的区别 ...

  2. POJ 2111 DP+记录路径

    题意: 思路: 类似滑雪 //By SiriusRen #include <cstdio> #include <cstring> #include <algorithm& ...

  3. Kinect 开发 —— Hello,Kinect

    控制台输出深度数据: using System; using System.Collections.Generic; using System.Linq; using System.Text; usi ...

  4. 多行文本溢出显示...的方法(-webkit-line-clamp)

    限制在一个块元素显示的文本的行数. -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中. 为了实现该 ...

  5. 结构体类型重声明导致的bug一个

    bug前提条件 当模块比較多.头文件较多,某个结构体类型会在当前模块中又一次声明进而引用其成员,而不直接包括其它模块的头文件. 这种优点是不引入不须要的类型声明到此模块.头文件包括的交叉:坏处是,添加 ...

  6. cocos2d-x 3.0 Loading界面实现

    这个世界每一天都在验证我们的渺小,但我们却在努力创造,不断的在这生活的画卷中留下自己的脚印.或许等到我们老去的那一天,老得不能动仅仅能靠回顾的那一天.你躺在轮椅上,不断的回顾过去.相思的痛苦忘不了,相 ...

  7. PHP 版本简单记录

    PHP 版本简单记录 PHP 博物馆         http://museum.php.net/php5/ PHP 版本发布       https://secure.php.net/release ...

  8. layoutParams-动态更改某个控件的margin

    其实它的方法也非常的简单,如下 LinearLayout.LayoutParams layoutParams = (LayoutParams) bt1.getLayoutParams(); int a ...

  9. Button- 自定义控件添加自定义属性

    今天自定义了一个button按钮,需要添加一个属性,具体步骤如下 1.新属性的信息设定:在values目录下添加attrs.xml文件,在里面添加属性信息 <?xml version=" ...

  10. matlab (.m)文件生成 windows 可执行(.exe)文件

    mex -setup:设置 C 语言编译器:(如果本地安装有 visual studio 20xx 集成开发环境,则会自动选择其下的 C/C++ 编译器 ) 将运行时环境(runtime enviro ...