iPhone开发【十一】多视图技术总结之四：Page Control-白红宇的个人博客

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

发布日期：2021-09-28 18:46:27 浏览次数：11 分类：技术文章

本文共 7244 字，大约阅读时间需要 24 分钟。

转载请注明出处，原文网址：作者：张燕广

第一次使用某个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]
 //  
 //  AppDelegate.h  
 //  MultiView-PageControl  
 //  
 //  Created by Zhang Yanguang on 12-11-21.  
 //  Copyright (c) 2012年 MyCompanyName. All rights reserved.  
 //  
   
 #import <UIKit/UIKit.h>  
 #import "PageControlViewController.h"  
 #import "WelcomeViewController.h"  
 @interface AppDelegate : UIResponder <UIApplicationDelegate>  
   
 @property (strong, nonatomic) UIWindow *window;  
 @property (strong, nonatomic) PageControlViewController *pageControlViewController;  
   
 @end  

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

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

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

[cpp]
 @implementation WelcomeViewController  
   
 - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil  
 {  
     self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];  
     if (self) {  
         // Custom initialization  
         self.view.backgroundColor = [UIColor redColor];  
     }  
     return self;  
 }  

[cpp]
 @implementation FeatureListViewController  
   
 - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil  
 {  
     self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];  
     if (self) {  
         // Custom initialization  
         self.view.backgroundColor = [UIColor greenColor];  
     }  
     return self;  
 }  

6、主要工作在PageControlViewController中，PageControlViewController

.h如下：

[cpp]
 //  
 //  PageControlViewController.h  
 //  MultiView-PageControl  
 //  
 //  Created by Zhang Yanguang on 12-11-21.  
 //  Copyright (c) 2012年 MyCompanyName. All rights reserved.  
 //  
   
 #import <UIKit/UIKit.h>  
 #import "WelcomeViewController.h"  
 #import "FeatureListViewController.h"  
 @interface PageControlViewController : UIViewController<UIScrollViewDelegate>{  
     BOOL pageControlUsed;//用于区分是点击PageControll换页还是通过滚动scrollView换页  
 }  
   
 //添加代码  
 @property (strong, nonatomic) UIPageControl *pageControl;  
 @property (strong, nonatomic) UIScrollView *scrollView;  
 @property (strong, nonatomic) WelcomeViewController *welComeViewController;  
 @property (strong, nonatomic) FeatureListViewController *featureListViewController;  
   
 -(void)pageControlChanged:(id)sender;  
 @end  

PageControlViewController.m如下：

[cpp]
 //  
 //  PageControlViewController.m  
 //  MultiView-PageControl  
 //  
 //  Created by Zhang Yanguang on 12-11-21.  
 //  Copyright (c) 2012年 MyCompanyName. All rights reserved.  
 //  
   
 #import "PageControlViewController.h"  
   
 @interface PageControlViewController ()  
   
 @end  
   
 @implementation PageControlViewController  
 @synthesize pageControl;  
 @synthesize scrollView;  
 @synthesize welComeViewController;  
 @synthesize featureListViewController;  
   
 - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil  
 {  
     self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];  
     if (self) {  
     }  
     return self;  
 }  
   
 - (void)viewDidLoad  
 {  
     [super viewDidLoad];  
     CGRect frame = [UIScreen mainScreen].applicationFrame;  
     int width = frame.size.width;  
     int height = frame.size.height;  
     
     frame = CGRectMake(0, 0, width, height);  
     //初始化scrollView  
     scrollView = [[UIScrollView alloc]initWithFrame:frame];  
     scrollView.showsVerticalScrollIndicator = NO;  
     scrollView.showsHorizontalScrollIndicator = YES;  
     scrollView.pagingEnabled = YES;  
     scrollView.contentSize = CGSizeMake(width*2, height);//scrollView内存大小  
     scrollView.scrollsToTop = NO;  
     //设置代理  
     scrollView.delegate = self;  
       
       
     int pageControlHeight = 50;  
     NSLog(@"width=%d,height=%d",width,height);  
     //初始化pageControl  
     pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(0, height-pageControlHeight, width, pageControlHeight)];  
       
     //pageControl设定  
     pageControl.numberOfPages = 2; //2页  
     pageControl.currentPage = 0;  
     pageControl.hidesForSinglePage = NO;  
     pageControl.backgroundColor = [UIColor blackColor];  
     [pageControl addTarget:self action:@selector(pageControlChanged:) forControlEvents:UIControlEventValueChanged];  
       
     //初始化welComeViewController、featureListViewController  
     welComeViewController = [[WelcomeViewController alloc]initWithNibName:@"WelcomeViewController" bundle:nil];  
     featureListViewController = [[FeatureListViewController alloc]initWithNibName:@"FeatureListViewController" bundle:nil];  
       
     //设定welComeViewController的位置  
     frame = scrollView.frame;  
     frame.origin.y = 0;  
     welComeViewController.view.frame = frame;  
       
     //设定featureListViewController的位置  
     frame.origin.x = frame.size.width;  
     featureListViewController.view.frame = frame;  
       
     //将welComeViewController、featureListViewController加入到scrollView中  
     [scrollView addSubview:welComeViewController.view];  
     [scrollView addSubview:featureListViewController.view];  
     //scrollView设置为黑色背景  
     scrollView.backgroundColor = [UIColor blackColor];  
       
     [self.view insertSubview:scrollView atIndex:0];  
     //将pageControl的atIndex设置为1，pageControl的view在scrollView的view的上层  
     [self.view insertSubview:pageControl atIndex:1];  
 }  
   
 - (void)viewDidUnload  
 {  
     [super viewDidUnload];  
     // Release any retained subviews of the main view.  
     pageControl = nil;  
     scrollView = nil;  
     welComeViewController = nil;  
     featureListViewController = nil;  
 }  
   
 - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation  
 {  
     return (interfaceOrientation == UIInterfaceOrientationPortrait);  
 }  
   
 //点击pageControl上的白色点触发的事件  
 -(void)pageControlChanged:(id)sender{  
     int page = pageControl.currentPage;  
     NSLog(@"page=%d",page);  
     CGRect frame = scrollView.frame;  
     frame.origin.x = frame.size.width*page;  
     frame.origin.y = 0;  
     [scrollView scrollRectToVisible:frame animated:YES];  
     pageControlUsed = YES; //用户通过点击Page Control换页时将其设置为YES  
 }  
   
   
 #pragma pageControl methods  
 - (void)scrollViewDidScroll:(UIScrollView *)sender{  
     NSLog(@"scrollViewDidScroll...");  
     if(pageControlUsed){ 
//如果用户通过点击Page Control换页，则不做处理  
         return;  
     }  
     CGFloat pageWidth = scrollView.frame.size.width;  
     NSLog(@"pageWidth=%.2f,scrollView.contentOffset.x=%.2f",pageWidth,scrollView.contentOffset.x);  
     NSLog(@"@ %.2f,%2.f",floor(-0.5),floor(-0.6));  
     //计算滚到哪页  
     int page = floor((scrollView.contentOffset.x-pageWidth/2)/pageWidth)+1;  
     pageControl.currentPage = page;  
 }  
   
 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{  
     pageControlUsed = NO;//滚动结束后将pageControlUsed重置为NO  
 }  
   
   
 @end  

UIPageControl

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

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