Question

如何使用Storyboard创建UIPageViewController

Answer 1

之前我们已经讲过UIPageViewController，那篇文章演示了如何使用Interface Builder创建UIPageViewController。为了适配iOS7和Xcode5，我们重新写了这篇新教程——使用Storyboard创建UIPageViewController。

你第一次打开一个app的时候，一定会发现一系列的引导页（或者是操作指南）来给你介绍一些这个app的特性，这是给用户介绍app功能的通常做法。这篇文章中，我们就来看看如何用UIPageViewController创建一个类似的引导页面。

UIPageViewController在iOS 5 SDK中首次引入，它使得开发者可以使用这个ViewController创建分页视图。在iOS 6中，这个类有了更新，支持滚动过渡效果。使用Page View，用户可以方便的通过手势在多个页面之间导航。UIPageViewController并不仅仅用于引导页，很多游戏，例如：愤怒的小鸟，就是用Page View来展示关卡选择的页面，还有有关书籍的应用，用这个类来显示书的页面。

example
example

UIPageViewController是个高度可配置的类，你可以进行如下配置：
•分页的方向——水平或垂直
•翻页的样式——书卷翻页或者滑动翻页
•书脊位置——只有书卷翻页样式有效
•页面间距——只有滑动翻页样式有效，用来定义页面间距（inter-page spacing）

为了演示，我们会一起创建一个简单的app。当然，我们不会演示所有的UIPageViewController的配置细节，我们会演示到使用滑动翻页样式来创建一个引导页。不过别担心，有了对UIPageViewController的基本理解，我相信你能够去探索其他的特性。

开始吧！

Demo一览

我们要创建的Demo很简单，它会显示4个页面来介绍app的UI。用户可以在页面之间滑动切换。在任何时候用户点击“Start again”按钮会回到第一页。你能在Snapguide或Airbnb等app中找到很多类似的引导页，所以这个效果你应该不陌生。

Demo Glance

创建项目

打开Xcode并创建一个Simple View Application项目。选择Single View Application看起来有点奇怪，因为Xcode已经提供了基于UIPageViewController的具有完整功能的Page-Based Application模板。但是，这个模板还是有一些复杂，把这个模板解释清楚比重新开始一个项目要复杂的多。况且，从零开始一定会让我们对UIPageViewController的使用有更好的掌握。

好了，开始吧。下个页面中输入PageViewDemo作为项目名称，在company iden www.hnnedu.com tifier栏中填入com.appcoda，设备类型选择iPhone。点击下一步并创建项目。

在Storyboard中创建Page View Controller

下一步，选择Main.storyboard。通常，你会看到一个默认的由Xcode生成的View Controller，先别管它，从Object Library拖出一个Page View Controller到Storyboard中。然后再拖出另一个View Controller。

在这个项目中，第一个View Controller会作为根View Controller，承载Page View Controller。最后添加的View Controller会作为页面的内容。后文中，用“根VC”代表“第一个View Controller”，“内容VC”代表“最后添加的View Controller”。

你可能会疑惑为什么只添加1个View Controller作为4页的内容，难道不应该使用4个View Controller吗？通过后面的演示你会发现，引导页都非常相似，通过复用这个View Controller显然是更好的选择。

下一步，给内容VC和Page View Controller分别设置一个ID。你能在Identity Inspector面板方便地设置。将Page View Controller的ID设置为“PageViewController”，将内容VC的ID设置为“PageContentController”。后面我们会在代码中使用到这些ID。

Page View Controller的默认变换样式是翻页效果（Page Curl），这个效果比较适合书籍类应用。引导页中，使用滑动效果更合适，所以将transition style更改为Scroll。