iOS 5 :一个UIPageViewController程序示例

原文:http://www.techotopia.com/index.php/An_Example_iOS_5_iPhone_UIPageViewController_Application

在Xcode中新建项目时,可以选择“Page-based Application”项目模板。可以利用这个模板创建一种“基于页”的应用程序,在1年的每个月中显示不同的页。奇怪的是,这是Xcode提供的唯一一个基于实例的模板而不是应用程序基本框架。这对于一开始学习时很有用,但除非你真的需要一个用12页来显示1年不同月份的程序,否则你必需从这个模板中移除一些已有的东西,以用于其他目的。

实际上,除了使用Xcode’s的“Page-based Application”模板,我们也可以使用Single View Application 模板,只不过自己需要实现Page-based的行为。这有两方面的好处。首先,不使用Page-base模板能使我们更能理解UIPageViewController的实现细节。其次,这种方式也比去修改Page-based Application模板要更加简捷。

创建项目

启动Xcode,新建iOS single view application项目,确认不要使用Use Storyboard选项。

创建contentViewController

本示例使用单个View Controller实例显示多个页。视图中包含了一个UIWebView,根据当前选择的页显示不同Html内容。ViewController类有一个data对象属性用于持有视图的Html。

选择FileàNewàNewFile…菜单,新建UIViewController subclass,名为contentViewController(勾选“With XIB…”选项)。打开contentViewController.h,为webview对象和data对象添加出口并进行连接。

#import <UIKit/UIKit.h>
@interface contentViewController : UIViewController 
@property (strong, nonatomic) IBOutlet UIWebView *webView; 
@property (strong, nonatomic) id dataObject; 
@end 

然后,打开contentViewController.xib,拖一个UIWebView组件到view上:

右键从File’s Owner 拖一条连接线到web view对象并选择webView出口。

编辑contentViewController.m文件。每当用户翻页时,UIPageViewController的数据源方法会创建一个新的contentViewController实例然后设置其dataObject属性为相应的Html。而在contentViewController的viewWillAppear方法中,我们会将dataObject属性赋给webview对象。为此,我们加入了必要的@synthesize语句,同时修改了viewWillAppear方法:

#import "contentViewController.h"  
@implementation contentViewController 
@synthesize webView, dataObject; 
. 
. 
- (void)viewWillAppear:(BOOL)animated {
     [super viewWillAppear:animated];
     [webView loadHTMLString:dataObject
         baseURL:[NSURL URLWithString:@""]]; 
} 
. 
. 
@end 

接下来,我们来实现数据模型。

创建数据模型

本例中的数据模型是一个字符串数组。每个字符串是内容不同的Html内容。pageAppViewController类就是UIPageViewController对象的数据源。该类含有一个NSArry和一个UIPageViewController对象,同时实现UIPageViewcontrollerDataSource协议。打开pageAppViewController.h,导入contentViewController.h头文件,加入必要的声明:

#import <UIKit/UIKit.h> 
#import “contentViewController.h”  
@interface pageAppViewController : UIViewController <UIPageViewControllerDataSource> {
     UIPageViewController *pageController;
     NSArray *pageContent; 
} 
@property (strong, nonatomic) UIPageViewController *pageController; 
@property (strong, nonatomic) NSArray *pageContent; 
@end 

最后,在pageAppViewController.m中增加一个方法以把Html字符串加到数组中。然后在viewDidLoad方法中调用这个方法。

 
#import "pageAppViewController.h"  
@implementation pageAppViewController 
@synthesize pageController, pageContent;
 .
 . 
- (void) createContentPages {
     NSMutableArray *pageStrings = [[NSMutableArray alloc] init];
     for (int i = 1; i < 11; i++)
     {
         NSString *contentString = [[NSString alloc]
 initWithFormat:@"<html><head></head><body><h1>Chapter %d</h1><p>This is the page %d of content displayed using UIPageViewController in iOS 5.</p></body></html>", i, i];
         [pageStrings addObject:contentString];
     }
     pageContent = [[NSArray alloc] initWithArray:pageStrings]; 
}
 .
 . 
- (void)viewDidLoad {
     [super viewDidLoad];
     [self createContentPages]; 
} 
 

现在,我们已经有一个content view controller和一个data model了,data model将通过数据源方法来提取每一页的内容。下一步,就是实现这些数据源方法。如“Implementinga Page based iOS 5 iPhone Application using UIPageViewController”中所述, UIPageViewController 实例需要一个数据源,数据源方法有两个,一个是返回当前显示的view controller之后的view controller,而另一个是返回当前显示的view controller之前的viewcontroller。由于pageAppViewController扮演了page view controller的数据源,因此需要在pageAppViewController.m中加入这两个方法(以及另外两个便利方法)。首先我们来看这2个便利方法:

#import "pageAppViewController.h"  
@implementation pageAppViewController 
@synthesize pageController, pageContent;  
- (contentViewController *)viewControllerAtIndex:(NSUInteger)index {
     // Return the data view controller for the given index.
     if (([self.pageContent count] == 0) || 
             (index >= [self.pageContent count])) {
         return nil;
     }
      // Create a new view controller and pass suitable data.
     contentViewController *dataViewController = 
         [[contentViewController alloc]
         initWithNibName:@"contentViewController" 
         bundle:nil];
     dataViewController.dataObject =
        [self.pageContent objectAtIndex:index];
     return dataViewController; 
- (NSUInteger)indexOfViewController:(contentViewController *)viewController {
      return [self.pageContent 
indexOfObject:viewController.dataObject]; 
}
 .
 . 
@end 

viewControllerAtIndex: 方法首先检查有效页数是否<0(用户不可能回到第1页以前)或者要检索的页数已经超出了pageContent数组的实际数目。如果index参数有效,就创建一个新的contentViewController实例并将dataObject属性设置为相应的pageContent条目(Html字串)。

indexOfViewController 方法指定一个viewController作为参数,并返回这个viewController的索引。它使用viewcontroller的dataObject属性去在pageContent数组元素中检索其索引

现在来看两个数据源方法。它们使用这两个便利方法返回当前view  controller“之前”和“之后”的view  controller:

 
- (UIViewController *)pageViewController: (UIPageViewController *)pageViewController viewControllerBeforeViewController: (UIViewController *)viewController {
     NSUInteger index = [self indexOfViewController:
        (contentViewController *)viewController];
     if ((index == 0) || (index == NSNotFound)) {
         return nil;
     }
      index--;
     return [self viewControllerAtIndex:index]; 
- (UIViewController *)pageViewController: (UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController {
     NSUInteger index = [self indexOfViewController:
         (contentViewController *)viewController];
     if (index == NSNotFound) {
         return nil;
     }
      index++;
     if (index == [self.pageContent count]) {
         return nil;
     }
     return [self viewControllerAtIndex:index]; 
}
 

下一步,就是创建和实例化UIPageViewController类。

实例化UIPageViewController

接下来就是创建UIPageViewController实例并初始化。用于这个过程只需要进行一次,因此把代码写在pageAppViewController的viewDidLoad方法中就可以了。打开pageAppViewController.m 文件修改 viewDidLoad:

- (void)viewDidLoad {
     [super viewDidLoad];
     [self createContentPages];
     NSDictionary *options =
       [NSDictionary dictionaryWithObject:
      [NSNumber
 numberWithInteger:UIPageViewControllerSpineLocationMin]
      forKey: UIPageViewControllerOptionSpineLocationKey];
      self.pageController = [[UIPageViewController alloc]         initWithTransitionStyle:UIPageViewControllerTransitionStylePageCurl   navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal
        options: options];
      pageController.dataSource = self;
     [[pageController view] setFrame:[[self view] bounds]];
      contentViewController *initialViewController =
         [self viewControllerAtIndex:0];
     NSArray *viewControllers =
          [NSArray arrayWithObject:initialViewController];     
     [pageController setViewControllers:viewControllers
         direction:UIPageViewControllerNavigationDirectionForward
        animated:NO
        completion:nil];
      [self addChildViewController:pageController];
     [[self view] addSubview:[pageController view]];
     [pageController didMoveToParentViewController:self]; 
} 

全部代码到此结束。在编译和运行程序之前,我们先分析一下viewDidLoad方法中的代码。

构建数据模型之后,我们创建了一个NSDictionary对象。这个NSDictionary中包含了一个options,用于page controrller对象的初始化选项。在这里,该选项指定了spine位于屏幕左侧(spine即书脊,书页装订的位置,书从另一侧翻阅):

NSDictionary *options =     [NSDictionary dictionaryWithObject:     [NSNumber numberWithInteger:UIPageViewControllerSpineLocationMin]     forKey: UIPageViewControllerOptionSpineLocationKey]; 
 

下一句,用前面的options实例化UIPageViewController:

 
self.pageController = [[UIPageViewController alloc]    initWithTransitionStyle:UIPageViewControllerTransitionStylePageCurl   navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal   options: options]; 
 
要让类成为page controller的数据源,还要做一些配置。比如我们要让页面全屏,需要设置它的frame:
 
pageController.dataSource = self; 
[[pageController view] setFrame:[[self view] bounds]]; 
 
 

在第1页能显示之前,我们首先需要创建一个view controller。这可以调用 viewControllerAtIndex: 便利方法。 在获得一个contentview controller后,把它放到一个数组对象中:

 
contentViewController *initialViewController =
     [self viewControllerAtIndex:0]; 
NSArray *viewControllers =
      [NSArray arrayWithObject:initialViewController]; 

注意,只需要一个content view controller。因为page controller被设定为一次只显示1页(单面)。如果将pagecontroller配置为2页(spine位于中央)或者双面,则需要创建2个content view controller并放入数组。

然后,将数组对象赋给view controller并将导航方向设置为向前模式:

 
[pageController setViewControllers:viewControllers
      direction:UIPageViewControllerNavigationDirectionForward
     animated:NO
     completion:nil]; 
 

最后,将page vview controller加到当前视图:

 
[self addChildViewController:pageController];
 [[self view] addSubview:[pageController view]];
 [pageController didMoveToParentViewController:self]; 

运行 UIPageVIewController 应用

点击Run,运行程序。第1页将显示出来。从右到左滑动屏幕,将翻到下一页,做相反方向滑动则翻到上一页。

时间: 2024-11-04 18:24:20

iOS 5 :一个UIPageViewController程序示例的相关文章

一个java程序员自学IOS开发之路(十四)

上个月实在是太忙了,在系统上线的前几天,业务人员还在不停的提新需求,真是醉了.上线那天晚上一直在出问题,熬到2点才搞定 2015/12/12 Day 47 今天开始学习网络编程 在移动互联网时代,移动应用,只有通过网络进行数据交互,才能保持活力!缺少了数据变化,无论多么华丽的应用,终将变成一潭死水 移动网络应用(良好的UI+良好的用户体验): 即时通讯:QQ 新闻:网易.凤凰新闻 视频:优酷.百度视频 音乐:虾米.QQ音乐 照片:Facebook.Flickr LBS(基于位置服务):高德.大众

Arduino 入门程序示例之一个 LED(2015-06-11)

前言 答应了群主写一些示例程序,一直拖延拖延拖延唉.主要还是害怕在各大高手面前班门弄斧……(这也算是给拖延症找一个美好的理由吧),这几天终于下决心要写出来了,各位高手拍砖敬请轻拍啊. 示例程序 首先是闪灯程序 示例自带的闪灯就略过了,这里写个不大一样的,使用 millis() 来进行时间间隔的判断,与示例使用 delay() 的方式比较,这种方式不会阻塞主进程,以后很多地方会用得上的: // ----------------------------------------------------

一个java程序员自学IOS开发之路(十三)

2015/12/09 Day 46 今天学习多线程 多线程的优缺点 优点 充分发挥多核处理器优势,将不同线程任务分配给不同的处理器,真正进入“并行运算”状态 将耗时的任务分配到其他线程执行,由主线程负责统一更新界面会使应用程序更加流畅,用户体验更好 当硬件处理器的数量增加,程序会运行更快,而程序无需做任何调整 缺点 新建线程会消耗内存空间和CPU时间,线程太多会降低系统的运行性能 iOS的三种多线程技术 NSThread  使用NSThread对象建立一个线程非常方便 但是!要使用NSThrea

一个java程序员自学IOS开发之路(四)

根据上图,由于我是一个Java程序员,前面两个阶段还是学的比较快的,但是由于电脑配置不行,光是开启虚拟机登陆OS系统就卡的不要不要的了,在那里面写代码简直是煎熬= =,后面的UI学习又要启动ios模拟器,根本无法进行. 于是下定决心,入手一台Macbook pro,告别我用了四年的联想~今天本本到货啦,哈哈^_^,可以愉快的继续了 2015/10/14 Day 15 为了便于开发者打造各式各样的优秀app,UIKit框架提供了非常多功能强大又易用的UI控件 2015/10/16 Day 16 第

iOS 实现一个类似电商购物车界面示例

iOS 实现一个类似电商购物车界面示例 先看界面效果图: 主要实现了商品的展示,并且可以对商品进行多选操作,以及改变商品的购买数量.与此同时,计算出,选中的总价格. 做此类型项目:要注意的:视图与数据要分离开来.视图的展现来源是数据模型层.所以我做的操作就是改变数据层的内容,在根据数据内容,去更新视图界面. 已下是具体实现思路与代码: 1. 实现步骤 在AppDelegate.m中包含ViewController.h头文件,创建ViewController对象(vc),接着创建一个UINavig

一个java程序员自学IOS开发之路(六)

2015/10/28 Day 27 今天学习了即时通讯应用的UI布局,只是简单的利用UITableView展示数据 第一步 先利用storyboard把页面的框架搭起来 显示的数据是存在plist文件里的,所以要把他们转成模型 typedef enum { YUMessageTypeMe = 0, // 自己 YUMessageTypeOther // 其他人 }   YUMessageType; @interface YUMessage : NSObject @property (nonato

开发一个微笑小程序示例

一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可.2.注册成功后进入首页,在 小程序发布流程->小程序开发与管理->配置服务器中,点击“开发者设置”.3.会获得一个AppID,记录AppID,后面创建项目时会用到. 注意:如果要以非管理员微信号在手机上体验该小程序,那么我们还需要操作“绑定开发者”.即在“用户身份”-“开发者”模块,绑定上需要体验该小程序的微信号.本教程默认注册帐号.体验都是使用管理员微信

iOS开发UI篇—程序启动原理和UIApplication

iOS开发UI篇-程序启动原理和UIApplication 一.UIApplication 1.简单介绍 (1)UIApplication对象是应用程序的象征,一个UIApplication对象就代表一个应用程序. (2)每一个应用都有自己的UIApplication对象,而且是单例的,如果试图在程序中新建一个UIApplication对象,那么将报错提示. (3)通过[UIApplicationsharedApplication]可以获得这个单例对象 (4) 一个iOS程序启动后创建的第一个对

[转载自 文顶顶]iOS开发UI篇—程序启动原理和UIApplication

一.UIApplication 1.简单介绍 (1)UIApplication对象是应用程序的象征,一个UIApplication对象就代表一个应用程序. (2)每一个应用都有自己的UIApplication对象,而且是单例的,如果试图在程序中新建一个UIApplication对象,那么将报错提示. (3)通过[UIApplicationsharedApplication]可以获得这个单例对象 (4) 一个iOS程序启动后创建的第一个对象就是UIApplication对象,且只有一个(通过代码获