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吧。你的支持是我继续的动力。

博主的话

以前看过很多别人的博客,学到不少东西。现在准备自己也开始写写博客,希望能够帮到一些人。 
我的联系方式: 
微博:新浪微博 
博客:http://blog.csdn.net/yixiangboy
github:https://github.com/yixiangboy

时间: 2024-08-09 19:52:28

IOS开发UI篇--一个侧滑菜单SlidingMenu的相关文章

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

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

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

iOS开发UI篇—使用嵌套模型完成的一个简单汽车图标展示程序 一.plist文件和项目结构图 说明:这是一个嵌套模型的示例 二.代码示例: YYcarsgroup.h文件代码: // // YYcarsgroup.h // 07-汽车展示(高级) // // Created by apple on 14-5-28. // Copyright (c) 2014年 itcase. All rights reserved. // #import <Foundation/Foundation.h> @

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

本文转自 :http://www.cnblogs.com/wendingding/p/3761730.html ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局 一.实现效果 二.使用纯代码自定义一个tableview的步骤 1.新建一个继承自UITableViewCell的类 2.重写initWithStyle:reuseIdentifier:方法 添加所有需要显示的子控件(不需要设置子控件的数据和frame,  子控件要添加到contentView中

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

iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局 一.项目文件结构和plist文件 二.实现效果 三.代码示例 1.没有使用配套的类,而是直接使用xib文件控件tag值操作 数据模型部分: YYtg.h文件 // // YYtg.h // 01-团购数据显示(没有配套的类) // // Created by apple on 14-5-29. // Copyright (c) 2014年 itcase. All rights reserved. //

iOS开发UI篇—实现一个私人通讯录小应用(二)

iOS开发UI篇—实现一个私人通讯录小应用(二) 一.实现功能说明 (1)点击注销按钮,弹出一个对话框,点击确定后移除当前栈顶的控制器,返回开始界面,点击取消,不做任何操作. 注意:注销按钮的单击事件已经进行了连线.实现-(void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex需要遵守UIActionSheetDelegate协议. 1 //注销按钮 2 - (IBActi

iOS开发UI篇—实现一个私人通讯录小应用(一)

iOS开发UI篇—实现一个私人通讯录小应用(一) 一.该部分主要完成内容 1.界面搭建                        2.功能说明 (1).只有当账号和密码输入框都有值的时候,登录按钮才能交互 (2).当取消勾选记住密码后,自动登录按钮也随之取消:当勾选了自动登录按钮时,记住密码按钮也一同勾选. (3).点击登陆后,弹出蒙版,界面不可交互,程序能够简单判断账号和密码是否正确,如果不正确则给出相应的提示,如果正确则跳转到联系人列表界面. 二.实现过程和代码 项目文件结构图和界面搭建

iOS开发UI篇—事件处理(完成一个简单的涂鸦板)

iOS开发UI篇-事件处理(实现一个简单的涂鸦板) 一.说明 该程序使用事件处理机制和绘图完成了一个简单的涂鸦板应用,使用鼠标在涂鸦板内拖动即可进行涂鸦,点击保存到相册按钮,可以把完成的涂鸦保存到手机的相册中,点击回退按钮可以向后退回一步,点击清空可以让涂鸦板清空. 文件结构和界面搭建: 二.代码示例 YYViewController.m文件 1 // 2 // YYViewController.m 3 // 02-画板程序 4 // 5 // Created by apple on 14-6-

iOS开发UI篇—实现一个简单的手势解锁应用(基本)

iOS开发UI篇—实现一个简单的手势解锁应用(基本) 一.实现效果 实现效果图: 二.手势解锁应用分析 1.监听手指在view上的移动,首先肯定需要自定义一个view,重写touch began,touch move等方法,当手指移动到圈上时,让其变亮.可以通过button按钮来实现. 2.界面搭建 背景图片(给控制器的view添加一个imageview,设置属性背景图片) 九个按钮(把九个按钮作为一个整体,使用一个大的view来管理这些小的view,这些小的view就是9个button.如果使

iOS开发UI篇—实现一个简单的手势解锁应用(完善)

iOS开发UI篇—实现一个简单的手势解锁应用(完善) 一.需要实现的效果 二.应用完善 1.绘制不处于按钮范围内的连线 2.解决bug(完善) bug1:如果在began方法中通知view绘图,那么会产生bug.因为,当前点没有清空,在手指移开之后要清空当前点.可以在绘制前进行判断,如果当前点是(0,0)那么就不划线.或者在began方法中不进行重绘. bug2:无限菊花.自定义view的背景色为默认的(黑色),只要重写了drawrect方法,view默认的背景颜色就是黑色的,因为上下文默认的颜