自定义UIPageControl 控件(一)

大家都见过iPhone上的那几个小点点了。那就是iPhone用来控制翻页的UIPageControl控件，但是许多人不会用UIPageControl，又不愿意去看Apple的文档和例子。所以首先我们来讲讲这个控件的使用。

1、新建项目UsingPageControl。删除MainWindow.xib文件。 在Resources组中添加几张图片，在这里我随便找了几张动物的图片，你也可以另外找几张。

2、编辑delegate类代码，#import "UsingPageControlViewController.h"，在application:didFinishLaunchingWithOptions:方法中加入以下代码：

UIViewController *vc=[[UsingPageControlViewController alloc]init];

[window addSubview:vc.view];

3、加入框架QuartzCore.framework。然后新建类UsingPageControlViewController,继承UIViewController。在interface中声明必要变量：

#import <Foundation/Foundation.h>

#import <UIKit/UIKit.h>

#import <QuartzCore/QuartzCore.h>

@interfaceUsingPageControlViewController : UIViewController {

UIPageControl* pageCtr;

NSMutableArray* pages;

UIView *pageView;

int previousPage;

}

-(void)transitionPage:(int)from toPage:(int)to;

-(CATransition *) getAnimation:(NSString *) direction;

@end

4、在implementation中，编辑init方法，把我们要用到的3个图片文件名放入到pages数组：

-(id)init{

if (self = [super init]) {

pages=[[NSMutableArray alloc]initWithObjects:@"Dolphin.png",

@"Butterfly.png",

@"Hippopotamus.png",

nil];

}

return self;

}

5、编辑loadView方法，在上方放入一个UIPageControl用于翻页，在下方放入一个UIView用于显示图片，注意上下分开，不要重叠，避免UIPageControl被遮挡住：

-(void)loadView{

[super loadView];

CGRect viewBounds = self.view.frame;

viewBounds.origin.y = 0.0;

viewBounds.size.height = 460.0;

//控件区域

pageCtr=[[UIPageControl alloc]initWithFrame:CGRectMake(viewBounds.origin.x,

viewBounds.origin.y,

viewBounds.size.width,

60)];

pageCtr.backgroundColor=[UIColor blackColor];

pageCtr.numberOfPages = 3;

pageCtr.currentPage = 0;

// 设定翻页事件的处理方法

[pageCtr addTarget:self action:@selector(pageTurn:)

forControlEvents:UIControlEventValueChanged];

[self.view addSubview:pageCtr];

// 页面区域

CGRect contentFrame=CGRectMake(viewBounds.origin.x,

viewBounds.origin.y+60,

viewBounds.size.width,

viewBounds.size.height-60);

pageView=[[UIView alloc]initWithFrame:contentFrame];

[pageView setBackgroundColor:[UIColor brownColor]];

// 添加两个imageview，动画切换时用

for (int i=0; i<2; i++) {

[pageView addSubview:[[UIImageView alloc] initWithFrame:CGRectMake(0,

0,

contentFrame.size.width,

contentFrame.size.height)]];

}

// 设置最上面的subview（显示的图片）

[[[pageView subviews] lastObject] setImage:[UIImage imageNamed:

[pages objectAtIndex:0]]];

[self.view addSubview:pageView];

}

6、翻页控件在感知到翻页动作时，会调用pageTurning方法：

-(void)pageTurn:(UIPageControl*)pageControl{

[self transitionPage:previousPage toPage:pageControl.currentPage];

previousPage=pageControl.currentPage;

}

7、transitionPage方法是这样定义的：

-(void)transitionPage:(int)from toPage:(int)to{

NSLog(@"previouspage:%d",from);

NSLog(@"currentpage:%d",to);

CATransition *transition;

if (from!=to) {

if(from<to){

transition=[self getAnimation:kCATransitionFromLeft];

}else{

transition=[self getAnimation:kCATransitionFromRight];

}

// 取出pageView的下面的图片作为准备显示的图片

UIImageView *newImage=(UIImageView *)[[pageView subviews] objectAtIndex:0];

// 将视图修改为要显示的图片

[newImagesetImage:[UIImage imageNamed:[pages objectAtIndex:to]]];

// 将pageView的上下图片交换

[pageView exchangeSubviewAtIndex:0 withSubviewAtIndex:1];

// 显示上面的图片，隐藏下面的图片

[[pageView.subviews objectAtIndex:0] setHidden:YES];

[[pageView.subviews objectAtIndex:1] setHidden:NO];

// 设置转换动画

[[pageView layer] addAnimation:transition forKey:@"pageTurnAnimation"];

}

}

8、其中getAnimation方法根据用户手指滑动的方向返回CATransition转换动画：

// 返回一个转换动画

-(CATransition *) getAnimation:(NSString *) direction

{

CATransition *animation = [CATransition animation];

[animation setDelegate:self];

[animation setType:kCATransitionPush];

[animation setSubtype:direction];

[animation setDuration:1.0f];

[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];

return animation;

}

这是一个翻页动画，通过其subtype属性设定翻页从哪边开始：上、下、左、右4个方向。duration属性是动画转换的时间；timingFunction属性指定转换过程中要使用的特效，使用常量字符串指定5种不同的效果（但不知什么原因，在这里不管设成什么值，都只有一种效果：淡入淡出）。

程序最终效果如下：

http://img.ph.126.net/OOXkrJ0gGIDLFYbTK-216g==/1347139238554061973.png