本文将介绍如何创建类似Facebook和Path iOS程序中的滑出式导航面板。

向右滑动

滑出式设计模式可以让开发者在程序中添加常用的导航功能,又不会浪费屏幕上宝贵的空间。用户可以在任意时间滑出导航面板,并且还可以看到当前屏幕上显示的内容。

现在,互联网上有些库已经内置滑出式设计模式,比如John-Lluch开发的SWRevealViewController。如果你在寻找更加快捷和简单的方法,那么使用SWRevealViewController库可能是一个很不错的方法。

不过,如果你是一名DIY类型的程序员(像我),那么你可能希望自己理解这功能是如何实现的。在本文中,你会看到该功能的实现并不复杂。通过少即是多的方法,并忽略掉复杂大且非必须的代码,就可以轻松的在程序中集成滑出式导航面板技术。

开始 那么这里创建的滑出式导航面板的功能具体是什么呢?

iOS设计师和开发者Ken Yarmosh的解释比较恰当:“滑出式导航面板拥有一个面板,这个面板从主画面的左边或者右边滑出来,然后在面板中显示一个垂直的、独立的滚动视图(Scroll view),把该视图当作程序的主导航。”

注意: Ken在这里的文章中详细的解释了滑出式导航面板的设计模式,并介绍了该模式带来的好处:新的iOS设计模式:滑出式导航面板

首先下载本文的启动工程。这是一个ZIP文件,只需要将其保存到本地,并解压一下就可以得到工程。

接着在Xcode中打开这个工程,并看看工程的组织结构:

工程被分为3个主要的文件夹:

•Assets: 包含所有的图片文件和其它非代码资源(例如attribution文件)。 •Views: 包含本文涉及到的所有xib文件。 •Classes: 包含Objective-C代码文件

 
不要担心Assets中有许多文件,你不需要修改这些内容,所有要用到的资源文件都添加进来了。
 

在Views文件夹中有4个主要的view controller。下面是相关简介:

•MainViewController: 这是主要的一个画面!这个文件需要添加到你自己的工程中(需要一些小的改动)。 •CenterViewController: 这是正中间的面板。该view controller可以替换为你自己的view controller(记住按钮的action也实现了) •LeftPanelViewController: 左边的面板。该view controller可以替换为你自己的view controller。 •RightPanelViewController: 右边的面板。该view controller可以替换为你自己的view controller

现在打开AppDelegate.m文件。虽然你不需要对这个文件做任何改变,但你应知道MainViewContorller是左,中和右view controller的容器。这个controller的初始化在19行代码中:

1.self.viewController = [[MainViewController alloc] initWithNibName:@"MainViewController" bundle:nil];

熟悉了工程的结构, 就正在的开始——从正中间的面板开始。

找到中心 本小节中,我将在MainViewConroller中放置一个CenterViewController,将CenterViewController当做MainViewConroller的子view controller。

注意:本小节会用到iOS 5中的新增的一个概念:View Controller Containment。如果还不熟悉,先看看iOS 5 by Tutorials中的第22章“UIViewController Containment”。

打开MainViewController.m文件,并将下面的import语句添加到文件的顶部:

1.#import "CenterViewController.h"

接着,添加一个常量定义:

1.#define CENTER_TAG 1

接着在@interface中添加下面的属性,以方便控制center view。

1.@property (nonatomic, strong) CenterViewController *centerViewController;

找到setupView并在里面添加如下代码块:

1.self.centerViewController = [[CenterViewController alloc] initWithNibName:@"CenterViewController" bundle:nil];

2.self.centerViewController.view.tag = CENTER_TAG;

3.self.centerViewController.delegate = self;

4.

5.[self.view addSubview:self.centerViewController.view];

6.[self addChildViewController:_centerViewController];

7.

8.[_centerViewController didMoveToParentViewController:self];

上面的代码分配了一个新的CenterViewController并将其赋值给centerViewController属性。然后将这个view controller view的tag设置为CENTER_TAG。

接着将delegate设置为MainViewController。也就意味着你需要对MainViewController进行修改,以遵循CenterViewControllerDelegate协议——只需要将文件顶部@interface代码行替换为如下即可:

1.@interface MainViewController ()

最后,在setupView方法的代码中,使用addSubview:方法将centerViewController的view添加到MainViewController的view中,另外还调用了addChildViewContoller:将_centerViewController添加为MainViewController的子view controller。最后调用了didMoveToParentViewController:方法。

编译并运行程序,看到类似如下的画面:

在画面顶部的按钮可以让你切换到小猫(kitties)和小狗(puppies)。有什么更好的理由需要在这里创建一个滑出式的导航面板呢?在这里要想看到不同的小动物,那就开始滑动吧。首先从左边开始!

靠向左边 现在已经添加好了center panel,不过要添加left view controller需要一些不同的操作。回到MainViewController.m文件中,并将下面的import语句添加到文件顶部:

1.#import "LeftPanelViewController.h"

然后再定义一个常量:

1.#define LEFT_PANEL_TAG 2

接着在@interface中添加一些属性,这跟center view类似:

1.@property (nonatomic, strong) LeftPanelViewController *leftPanelViewController;

2.@property (nonatomic, assign) BOOL showingLeftPanel;

现在找到getLeftView方法,删除掉已有的代码并添加如下代码:

1.// init view if it doesn't already exist

2.if (_leftPanelViewController == nil)

3.{

4. // this is where you define the view for the left panel

5. self.leftPanelViewController = [[LeftPanelViewController alloc] initWithNibName:@"LeftPanelViewController" bundle:nil];

6. self.leftPanelViewController.view.tag = LEFT_PANEL_TAG;

7. self.leftPanelViewController.delegate = _centerViewController;

8.

9. [self.view addSubview:self.leftPanelViewController.view];

10.

11. [self addChildViewController:_leftPanelViewController];

12. [_leftPanelViewController didMoveToParentViewController:self];

13.

14. _leftPanelViewController.view.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);

15.}

16.

17.self.showingLeftPanel = YES;

18.

19.// set up view shadows

20.[self showCenterViewWithShadow:YES withOffset:-2];

21.

22.UIView *view = self.leftPanelViewController.view;23.return view;

上面的代码首先检查一下看看leftPanelViewController属性是否为nil,如果是nil的话,就分配并初始化一个LeftPanelViewController给leftPanelViewController属性。

接着是赋值一个tag和delegate——用于图片的选择,以及将新创建的view添加到main view中。

然后将showingLeftPanel属性设置为YES,并添加了一些视觉上的处理,在下一节中将介绍相关内容。

最后将view返回给调用者。为什么要这样操作——在后面小节中你将看到为什么。

下面处理一下阴影。

不要忘记阴影效果 在上面刚刚添加的代码中,你已经看到调用了showCenterViewWithShow:withOffset:方法。该方法使用QuartzCore框架创建并添加一个阴影效果。

为了访问该框架的提供的许多精彩功能,将下面的import语句添加到MainViewController.m文件顶部:

1.#import <QuartzCore/QuartzCore.h>

同样,在文件顶部定义一个常量,代表圆角。这样,如果你想要修改圆角的话,只需要在一个地方修改即可。

1.#define CORNER_RADIUS 4

现在找到showCenterViewWithShadow:withOffset: 方法,并将下面的代码块添加进去:

1.if (value)

2.{

3. [_centerViewController.view.layer setCornerRadius:CORNER_RADIUS];

4. [_centerViewController.view.layer setShadowColor:[UIColor blackColor].CGColor];

5. [_centerViewController.view.layer setShadowOpacity:0.8];

6. [_centerViewController.view.layer setShadowOffset:CGSizeMake(offset, offset)];

7.

8.}

9.else

10.{

11. [_centerViewController.view.layer setCornerRadius:0.0f];

12. [_centerViewController.view.layer setShadowOffset:CGSizeMake(offset, offset)];

13.}

上面的代码中,如果传递过进来的value是非零,就会给center view设置一个圆角和一个阴影。否则就将圆角设置为非圆形。

如果现在运行程序的话,还看不到效果,因为上面的代码还没有用到。

 

回到左边 现在已经获得了滑动导航面板所需的一些材料了,接着继续完成left view controller。一旦完成之后,右边如何移动你也会清楚了。

本文中,为了将注意力几种在重要的地方,我已经把IB文件中涉及到的IBAction和IBOutlet连接好了。不过,为了实现你自己的DIY滑出式导航面板,你需要知道这些IB中的按钮是如何配置的。

看看下面这个张关于截图CenterViewController.xib文件的截图,注意其中的连接:

如上图中的kitties按钮,已经连接到一个名为leftButton的IBOutlet上了,并且这个按钮的Touch Up Inside事件连接到了一个名为btnMovePanelRight:的IBAction上。这个按钮控制着center panel的滑动,以显示出左边的panel。

btnMovePanelRight:现在还是空的,下面我们就来看看如何实现:

打开CenterViewController.m文件,并将下面的代码块添加到btnMovePanelRight:方法中:

1.UIButton *button = sender;

2.switch (button.tag) {

3. case 0: {

4.  [_delegate movePanelToOriginalPosition];

5.  break;

6. }

7.

8. case 1: {

9.  [_delegate movePanelRight];

10.  break;

11. }

12.

13. default:

14.  break;

15.}

上面的代码使用了一个switch语句,通过判断leftButton的tag属性来确定center panel是需要移动到右边,还是需要将其移动到原来的正中间位置。这里的leftButton是通过sender参数传递过来的。button的tag设置为0表示center panel已经移动到右边了,如果设置为1的话,表示center panel已经在原来的正中间位置。

如果你看一下CenterViewController.xib文件,会看到我已经将leftButton的tag默认值设置为1。

看到上面的代码中调用了delegate方法吗?如果你还记得的话,之前在配置CenterViewController示例时,已经将它的delegate设置为MainViewController。因此这里的调用就涉及到了MainViewController中的相关方法。

在实现这些delegate方法之前,首先看看CenterViewController.h文件中协议CenterViewControllerDelegate的定义:

如下图所示,协议中定义了两个optional协议方法,以及一个required协议方法,分别是:movePanelLeft, movePanelRight 和 movePanelToOriginalPosition。

因为CenterViewController的delegate是MainViewController,所以我们在MainViewController中添加这些delegate方法。

打开MainViewController.m文件,并添加如下两个常量定义:

1.#define SLIDE_TIMING .25

2.#define PANEL_WIDTH 60

接着找到movePanelRight方法,并将如下代码块添加到里面:

1.UIView *childView = [self getLeftView];

2.[self.view sendSubviewToBack:childView];

3.

4.[UIView animateWithDuration:SLIDE_TIMING delay:0 options:UIViewAnimationOptionBeginFromCurrentState

5.    animations:^{

6.     _centerViewController.view.frame = CGRectMake(self.view.frame.size.width - PANEL_WIDTH, 0, self.view.frame.size.width, self.view.frame.size.height);

7.    }

8.    completion:^(BOOL finished) {

9.     if (finished) {

10.

11.      _centerViewController.leftButton.tag = 0;

12.     }

13.    }];

注意:这个方法是由CenterViewController中的btnMovePanelRight:调用的。更多如何实现delegate相关的信息,请参考:苹果开发者文档

上面的代码就是奇迹发生的地方!

首先调用getLeftView方法,该方法返回一个view,然后将view推到背后,接着是进入动画处理过程:使用一个animateWithDuration:animations:completion: 块。在动画中使用到的SLIDE_TIMING和PANEL_WIDTH值可以随意调整。其中SLIDE_TIMING是控制动画的速度,而PANEL_WIDTH是控制动画过后,center view留在屏幕中的宽度。

另外,记住海的把leftButton的tag属性设置为0。如果你还记得的话,这个tag属性用来跟踪记录center view的当前位置。

现在编译并运行一下程序,看看效果如何。

当程序启动后,点击kitties按钮,center panel应该会滑动到右边,并显示出left panel。此时,屏幕上显示的效果如下图所示:

注意观察center view左边缘的圆角和阴影——这两个效果是执行showCenterViewWithShadow:withOffset:(之前添加的方法)方法得到的结果。

再点击一下kitties按钮——什么事情都没有发生。这是因为还没有实现movePanelToOriginalPosition方法。

回到MainViewController.m文件,并将下面的代码块添加到movePanelToOriginalPosition方法中:

1.[UIView animateWithDuration:SLIDE_TIMING delay:0 options:UIViewAnimationOptionBeginFromCurrentState

2.    animations:^{

3.     _centerViewController.view.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);

4.    }

5.    completion:^(BOOL finished) {

6.     if (finished) {

7.

8.      [self resetMainView];

9.     }

10.    }];

同样,在上面的代码中使用了一个animateWithDuration:animations:completion: 块来处理动画。不过这次是将center view的位置以动画的方式设置为最初的位置。

当动画完成的时候,调用了resetMainView方法。目前该方法还没有具体的实现。在该方法中需要重置一下view,下面我们来实现一下吧!

找到resetMainView方法,并将下面的代码添加到方法中:

1.// remove left view and reset variables, if needed

2.if (_leftPanelViewController != nil)

3.{

4. [self.leftPanelViewController.view removeFromSuperview];

5. self.leftPanelViewController = nil;

6.

7. _centerViewController.leftButton.tag = 1;

8. self.showingLeftPanel = NO;

9.}

10.

11.// remove view shadows

12.[self showCenterViewWithShadow:NO withOffset:0];

上边的代码将left panel从view中移除,并将kitties按钮重置为1(表示center view目前是在最初的位置),另外还移除了center view的圆角和阴影效果。

编译并运行程序,当点击kitties按钮后,再次点击kitties按钮,center view会回到最初的位置,如下图所示:

 
未完......
 
 

CocoaChina是全球最大的苹果开发中文社区,官方微信每日定时推送各种精彩的研发教程资源和工具,介绍app推广营销经验,最新企业招聘和外包信息,以及Cocos2d引擎、Cocos Studio开发工具包的最新动态及培训信息。关注微信可以第一时间了解最新产品和服务动态,微信在手,天下我有!

请搜索微信号“CocoaChina”关注我们!

iOS中如何创建一个滑出式导航面板(1)的更多相关文章

  1. 【Unity Shaders】游戏性和画面特效——创建一个老电影式的画面特效

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...

  2. Slideout.js – 触摸滑出式 Web App 导航菜单

    Slideout.js 是为您的移动 Web 应用开发的触摸滑出式的导航菜单.它没有依赖,自由搭配简单的标记,支持原生的滚动,您可以轻松地定制它.它支持不同的 CSS3 转换和过渡.最重要的是,它只是 ...

  3. 创建一个弹出DIV窗口

    创建一个弹出DIV窗口 摘自:   http://www.cnblogs.com/TivonStone/archive/2012/03/20/2407919.html 创建一个弹出DIV窗口可能是现在 ...

  4. 在iOS中怎样创建可展开的Table View?(下)

    接上篇:在iOS中怎样创建可展开的Table View?(上) 展开和合拢 我猜这部分可能是你最期望的了,因为本次教程的目标将会在在部分实现.第一次我们设法让顶层的cell,在它们点击的时候展开或者合 ...

  5. Ionic 2 中的创建一个闪视卡片组件

    闪视卡片是记忆信息的重要工具,它的使用可以追溯到19世纪.我们将要创建一个很酷的短暂动画来实现它.看起来像是这个样子的: 闪视卡片示例 Ionic 2 实例开发 新增章节将为你介绍如何在Ionic 2 ...

  6. unity编辑器扩展_03(在组件中右击创建一个选项,并通过该选项修改该组件下面的字段的值)

    在组件中右击创建一个选项代码: [MenuItem("CONTEXT/PlayerHealth/InitHealth")]    static void Test5()    {  ...

  7. 【转载】 C#中手动创建一个DataTable对象并写入数据

    在C#操作集合数据的过程中,有时候需要手动创建一个DataTable对象,并手动设置DataTable对象的Columns列名等信息,最后再往手动创建的DataTable对象中写入相应的数据信息,此时 ...

  8. 在iOS中怎样创建可展开的Table View?(上)

    原文地址 本文作者:gabriel theodoropoulos 原文:How To Create an Expandable Table View in iOS 原文链接 几乎所有的app都有一个共 ...

  9. Java中如何创建一个新的对象的/Creating Objects/

    The Java Tutorials have been written for JDK 8. Examples and practices described in this page don't ...

随机推荐

  1. POJ 3903 Stock Exchange 【最长上升子序列】模板题

    <题目链接> 题目大意: 裸的DP最长上升子序列,给你一段序列,求其最长上升子序列的长度,n^2的dp朴素算法过不了,这里用的是nlogn的算法,用了二分查找. O(nlogn)算法 #i ...

  2. 洛谷.2292.[HNOI2004]L语言(Trie DP)

    题目链接 /* 简单的DP,查找是否有字典中的单词时在Trie树上做 要注意在最初Match(0)一遍后,i还是要从0开始匹配,因为如果有长度为1的单词,Match(i+1)不会从1更新 1M=102 ...

  3. BZOJ.1901.Dynamic Rankings(线段树套平衡树 Splay)

    题目链接or Here 题意:n个数,有两个操作:1.修改某个数为v:2.询问一段区间第k小的数 如果没有修改,则可以用线段树,每个节点P[a,b]存储大小为b-a+1的数组,代表其中的数 同时,这个 ...

  4. 潭州课堂25班:Ph201805201 第十课 类的定义,属性和方法 (课堂笔记)

    类的定义 共同属性,特征,方法者,可分为一类,并以名命之 class Abc: # class 定义类, 后面接类名 ( 规则 首字母大写 ) cls_name = '这个类的名字是Abc' # 在类 ...

  5. Codeforces 994F Compute Power 二分+DP

    题意:给n个任务 每个任务有两个值$a,b$ 现有许多机器 每台最多可以执行两次任务 若存在第二次任务则满足$a_{second}<a_{first}$ 定义代价$val = \frac { \ ...

  6. C memset

    //#include "stdafx.h" #include <iostream> #include <memory.h> using namespace ...

  7. Kaggle Titanic solution 纯规则学习

    其实就是把train.csv拿出来看了看,找了找规律,调了调参数而已. 找到如下规律: 1.男的容易死,女的容易活 2.一等舱活,三等舱死 3.老人死,小孩活 4.兄弟姐妹多者死 5.票价高的活 6. ...

  8. fatal error C1083: 无法打开编译器生成的文件:“../../build/vs71/release/lib_json\json_value.asm”: No such file or directory

    修改生成静态库文件的工程的属性:路径为:菜单---项目--属性---配置属性---c/c++---输出文件---汇编程序输出:无列表

  9. oracle索引原理(b-tree,bitmap,聚集,非聚集索引)

    B-TREE索引 一个B树索引只有一个根节点,它实际就是位于树的最顶端的分支节点. 可以用下图一来描述B树索引的结构.其中,B表示分支节点,而L表示叶子节点. 对于分支节点块(包括根节点块)来说,其所 ...

  10. Linux的cron与%

    这个cron不能执行: * * * * * /bin/echo `/bin/date +"%Y-%m-%d-%T"` >> /home/adminuser/test.t ...