iPhone开发【十一】多视图技术总结之四：Page Control

转载请注明出处，原文网址：http://blog.youkuaiyun.com/m_changgong/article/details/8209461作者：张燕广

第一次使用某个App时，一般会有欢迎界面，向右滑动屏幕会出现该App的新增功能或功能介绍或使用帮助相关的界面。通过PageControl可以实现该效果。

实现的功能：通过PageControl，实现多视图切换。

关键词：多视图 PageControl UIPageContrller

1、创建一个Empty Application工程，命名为：MultiView-Navigation，如下图

2、选中工程中的Group MultiView-Tab，然后按住CMD（Windows键）+N，新建视图控制器PageControlViewController，如下图

3、依照上步操作，新建视图控制器WelcomeViewController、FeatureListViewController

4、万事俱备，开始编写代码，首先修改AppDelegate，AppDelegate.h如下：

[cpp]  view plain copy

1. //  
2. //  AppDelegate.h  
3. //  MultiView-PageControl  
4. //  
5. //  Created by Zhang Yanguang on 12-11-21.  
6. //  Copyright (c) 2012年 MyCompanyName. All rights reserved.  
7. //  
8.   
9. #import <UIKit/UIKit.h>  
10. #import "PageControlViewController.h"  
11. #import "WelcomeViewController.h"  
12. @interface AppDelegate : UIResponder <UIApplicationDelegate>  
13.   
14. @property (strong, nonatomic) UIWindow *window;  
15. @property (strong, nonatomic) PageControlViewController *pageControlViewController;  
16.   
17. @end  

AppDelegate.m主要修改didFinishLaunchingWithOptions方法，如下：

[cpp]  view plain copy

1. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions  
2. {  
3.     self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];  
4.     // Override point for customization after application launch.  
5.     self.pageControlViewController = [[PageControlViewController alloc]initWithNibName:@"PageControlViewController" bundle:nil];  
6.     //设置rootViewController  
7.     self.window.rootViewController = pageControlViewController;  
8.     self.window.backgroundColor = [UIColor whiteColor];  
9.     [self.window makeKeyAndVisible];  
10.     return YES;  
11. }  

5、视图控制器WelcomeViewController、FeatureListViewController仅仅修改了源代码文件，设置了一下背景色，如下：

[cpp]  view plain copy

1. @implementation WelcomeViewController  
2.   
3. - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil  
4. {  
5.     self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];  
6.     if (self) {  
7.         // Custom initialization  
8.         self.view.backgroundColor = [UIColor redColor];  
9.     }  
10.     return self;  
11. }  

[cpp]  view plain copy

1. @implementation FeatureListViewController  
2.   
3. - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil  
4. {  
5.     self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];  
6.     if (self) {  
7.         // Custom initialization  
8.         self.view.backgroundColor = [UIColor greenColor];  
9.     }  
10.     return self;  
11. }  

6、主要工作在PageControlViewController中，PageControlViewController .h如下：

[cpp]  view plain copy

1. //  
2. //  PageControlViewController.h  
3. //  MultiView-PageControl  
4. //  
5. //  Created by Zhang Yanguang on 12-11-21.  
6. //  Copyright (c) 2012年 MyCompanyName. All rights reserved.  
7. //  
8.   
9. #import <UIKit/UIKit.h>  
10. #import "WelcomeViewController.h"  
11. #import "FeatureListViewController.h"  
12. @interface PageControlViewController : UIViewController<UIScrollViewDelegate>{  
13.     BOOL pageControlUsed;//用于区分是点击PageControll换页还是通过滚动scrollView换页  
14. }  
15.   
16. //添加代码  
17. @property (strong, nonatomic) UIPageControl *pageControl;  
18. @property (strong, nonatomic) UIScrollView *scrollView;  
19. @property (strong, nonatomic) WelcomeViewController *welComeViewController;  
20. @property (strong, nonatomic) FeatureListViewController *featureListViewController;  
21.   
22. -(void)pageControlChanged:(id)sender;  
23. @end  

PageControlViewController.m如下：

[cpp]  view plain copy

1. //  
2. //  PageControlViewController.m  
3. //  MultiView-PageControl  
4. //  
5. //  Created by Zhang Yanguang on 12-11-21.  
6. //  Copyright (c) 2012年 MyCompanyName. All rights reserved.  
7. //  
8.   
9. #import "PageControlViewController.h"  
10.   
11. @interface PageControlViewController ()  
12.   
13. @end  
14.   
15. @implementation PageControlViewController  
16. @synthesize pageControl;  
17. @synthesize scrollView;  
18. @synthesize welComeViewController;  
19. @synthesize featureListViewController;  
20.   
21. - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil  
22. {  
23.     self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];  
24.     if (self) {  
25.     }  
26.     return self;  
27. }  
28.   
29. - (void)viewDidLoad  
30. {  
31.     [super viewDidLoad];  
32.     CGRect frame = [UIScreen mainScreen].applicationFrame;  
33.     int width = frame.size.width;  
34.     int height = frame.size.height;  
35.     
36.     frame = CGRectMake(0, 0, width, height);  
37.     //初始化scrollView  
38.     scrollView = [[UIScrollView alloc]initWithFrame:frame];  
39.     scrollView.showsVerticalScrollIndicator = NO;  
40.     scrollView.showsHorizontalScrollIndicator = YES;  
41.     scrollView.pagingEnabled = YES;  
42.     scrollView.contentSize = CGSizeMake(width*2, height);//scrollView内存大小  
43.     scrollView.scrollsToTop = NO;  
44.     //设置代理  
45.     scrollView.delegate = self;  
46.       
47.       
48.     int pageControlHeight = 50;  
49.     NSLog(@"width=%d,height=%d",width,height);  
50.     //初始化pageControl  
51.     pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(0, height-pageControlHeight, width, pageControlHeight)];  
52.       
53.     //pageControl设定  
54.     pageControl.numberOfPages = 2; //2页  
55.     pageControl.currentPage = 0;  
56.     pageControl.hidesForSinglePage = NO;  
57.     pageControl.backgroundColor = [UIColor blackColor];  
58.     [pageControl addTarget:self action:@selector(pageControlChanged:) forControlEvents:UIControlEventValueChanged];  
59.       
60.     //初始化welComeViewController、featureListViewController  
61.     welComeViewController = [[WelcomeViewController alloc]initWithNibName:@"WelcomeViewController" bundle:nil];  
62.     featureListViewController = [[FeatureListViewController alloc]initWithNibName:@"FeatureListViewController" bundle:nil];  
63.       
64.     //设定welComeViewController的位置  
65.     frame = scrollView.frame;  
66.     frame.origin.y = 0;  
67.     welComeViewController.view.frame = frame;  
68.       
69.     //设定featureListViewController的位置  
70.     frame.origin.x = frame.size.width;  
71.     featureListViewController.view.frame = frame;  
72.       
73.     //将welComeViewController、featureListViewController加入到scrollView中  
74.     [scrollView addSubview:welComeViewController.view];  
75.     [scrollView addSubview:featureListViewController.view];  
76.     //scrollView设置为黑色背景  
77.     scrollView.backgroundColor = [UIColor blackColor];  
78.       
79.     [self.view insertSubview:scrollView atIndex:0];  
80.     //将pageControl的atIndex设置为1，pageControl的view在scrollView的view的上层  
81.     [self.view insertSubview:pageControl atIndex:1];  
82. }  
83.   
84. - (void)viewDidUnload  
85. {  
86.     [super viewDidUnload];  
87.     // Release any retained subviews of the main view.  
88.     pageControl = nil;  
89.     scrollView = nil;  
90.     welComeViewController = nil;  
91.     featureListViewController = nil;  
92. }  
93.   
94. - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation  
95. {  
96.     return (interfaceOrientation == UIInterfaceOrientationPortrait);  
97. }  
98.   
99. //点击pageControl上的白色点触发的事件  
100. -(void)pageControlChanged:(id)sender{  
101.     int page = pageControl.currentPage;  
102.     NSLog(@"page=%d",page);  
103.     CGRect frame = scrollView.frame;  
104.     frame.origin.x = frame.size.width*page;  
105.     frame.origin.y = 0;  
106.     [scrollView scrollRectToVisible:frame animated:YES];  
107.     pageControlUsed = YES; //用户通过点击Page Control换页时将其设置为YES  
108. }  
109.   
110.   
111. #pragma pageControl methods  
112. - (void)scrollViewDidScroll:(UIScrollView *)sender{  
113.     NSLog(@"scrollViewDidScroll...");  
114.     if(pageControlUsed){//如果用户通过点击Page Control换页，则不做处理  
115.         return;  
116.     }  
117.     CGFloat pageWidth = scrollView.frame.size.width;  
118.     NSLog(@"pageWidth=%.2f,scrollView.contentOffset.x=%.2f",pageWidth,scrollView.contentOffset.x);  
119.     NSLog(@"@ %.2f,%2.f",floor(-0.5),floor(-0.6));  
120.     //计算滚到哪页  
121.     int page = floor((scrollView.contentOffset.x-pageWidth/2)/pageWidth)+1;  
122.     pageControl.currentPage = page;  
123. }  
124.   
125. - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{  
126.     pageControlUsed = NO;//滚动结束后将pageControlUsed重置为NO  
127. }  
128.   
129.   
130. @end  

UIPageControl 由一系列小圆点组成，每个点代表一页，白色的点代表当前选中的页。

其实现多视图的原理是scrollView的宽度为WelcomeViewController、FeatureListViewController中View的宽度之和，并且WelcomeViewController、FeatureListViewController的View都是作为scrollView的子视图。当第一页被选中时显示WelcomeViewController的view，但是第二页被选中时显示FeatureListViewController的view。

7、编译、运行，效果如下：

点击下载本文源代码

=========================================================

这是个废材功能阿，实际开发意义不大，谁需要用这个小点点代表页数阿，而且用pageControl限制太多，已经不适合当下的App开发风格了