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

[b][b][b]转载请注明出处，原文网址：/article/1354671.html作者：张燕广[/b][/b][/b]

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



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

关键词：多视图 PageControl UIPageContrller

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



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



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

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



[cpp] view
plaincopy

//

// 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] view
plaincopy

- (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] view
plaincopy

@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] view
plaincopy

@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] view
plaincopy

//

// 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] view
plaincopy

//

// 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的宽度为[b][b]WelcomeViewController、FeatureListViewController[/b][/b]中View的宽度之和，并且[b][b]WelcomeViewController、FeatureListViewController[/b][/b]的View都是作为scrollView的子视图。当第一页被选中时显示[b][b]WelcomeViewController[/b][/b]的view，但是第二页被选中时显示[b][b]FeatureListViewController[/b][/b]的view。

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







[b][b]点击下载本文源代码[/b][/b]



[b]=========================================================[/b]

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