iOS中如何创建一个滑出式导航面板(1)


本文将介绍如何创建类& # 20284;Facebook和路径iOS程序中的滑出式导航面板。

 iOS中如何创建一个滑出式导航面板(1)

向右滑动

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

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

不过,如果你是一名DIY类型的程序员(像我),那么你可能希望自己理解这功能是如何实现的。

在本文中,你会看到该功能的实现并不复杂。通过少即是多的方法,并忽略掉复杂大的且不是必须的代码,就可以轻松的在程序中集成滑出式导航面板技术。

下面,就开始学习如何做滑出式导航面板——附带手势滑出的功能!

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

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

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

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

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

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

    <李>:包含所有的图片文件和其它非代码资源(例如归因文件)。 <李>:包含本文涉及到的所有xib文件。 <李>:包含objective - c代码文件

 iOS中如何创建一个滑出式导航面板(1)”> </p> <p>不要担心资产中有许多文件,其实你并不需要修改这些内容,所有需要用到的资源文件都添加进来了。</p> <p>在视图文件夹中有4个主要的视图控制器。下面是相关简介:</p> <ul> <李>:这是主要的一个画面!这个文件需要添加到你自己的工程中(需要一些小的改动)。</李> <李>:这是正中间的面板。该视图控制器可以替换为你自己的视图控制器(记住按钮的行动也实现了)</李> <李>:左边的面板。该视图控制器可以替换为你自己的视图控制器。</李> <李>:右边的面板。该视图控制器可以替换为你自己的视图控制器李</> </ul> <p>现在打开文件。虽然你不需要对这个文件做任何改变,但是你应该知道MainViewContorller是左,中和右视图控制器的容器。这个控制器的初始化在19行代码中:</p> <pre类=皐p-code-highlight prettyprint linenum: 1 prettyprinted“> <ol类= <李value=" https://www.yisu.com/zixun/1 " class=" 10 ">

现在,你已经对工程的结构熟悉了,下面我们就正在的开始啦——从正中间的面板开始。

本小节中,我将在MainViewConroller中放置一个CenterViewController,将CenterViewController当做MainViewConroller的子视图控制器。

:本小节会用到iOS 5中的新增的一个概念:视图控制器控制。如果你还不熟悉这个概念,可以看看中的第22章“遏制”ui。

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

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

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

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

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

iOS中如何创建一个滑出式导航面板(1)