一、简介

侧滑菜单已经成为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. HDU 4696 Answers 水题

    http://acm.hdu.edu.cn/showproblem.php?pid=4696 由题意可知 1<=Ci<=2 而且图上一定有环 那么我们可以得出: 只要存在奇环(即Ci=1) ...

  2. 前端js中this指向及改变this指向的方法

    js中this指向是一个难点,花了很长时间来整理和学习相关的知识点. 一. this this是JS中的关键字, 它始终指向了一个对象, this是一个指针; 参考博文: JavaScript函数中的 ...

  3. Android NDK调试出错Unknown Application ABI, Unable to detect application ABI&#39;s的解决方式

    今天在调试Android NDK的时候,ADT的控制台报了这个错误: Unknown Application ABI, Unable to detect application ABI's 在网上查了 ...

  4. dump var_dump print print_r的区别

    dump var_dump print print_r的区别 一.总结 用dump()来打印就对了 1.echo和print:不能打印复合型和资源型数据: 2.var_dump()和print_r() ...

  5. 26.多线程join detach

    #include <iostream> #include <thread> #include <array> #include <Windows.h> ...

  6. Mahout是什么?(一)

    不多说,直接上干货! http://mahout.apache.org/ Mahout是Apache Software Foundation(ASF)旗下的一个开源项目. 提供一些可扩展的机器学习领域 ...

  7. go timer

    go timer package main import ( "fmt" "time" ) func debounce(interval time.Durati ...

  8. Java 批量修改文件后缀

    import java.io.*; public class test { public void reName(String path, String from, String to) { File ...

  9. select into from 与 insert into select 区别

    1.INSERT INTO SELECT语句 语句形式为:Insert into Table2(field1,field2,...) select value1,value2,... from Tab ...

  10. LayUI-Table表格渲染

    记项目中又一表格使用方法,项目首选是使用BootstrapTable的,但是经过多番查证与调试,始终没有把固定列的功能调试成功,找到的成功的例子原样照搬都不行,文件引入也都没有问题,实在搞不懂了,如果 ...