iPhone开发之UIPageControl

今天我们介绍iPhone的UIPageControl。UIPageControl就是一串连续的小圆点，代表不同的视图，点击小圆点，会转到相应的视图，并且该小圆点会高亮显示。如下图鼠标所指处：

下面开始：

1.

新建一个 View-based Application，名称为PageControl：

2.

修改 PageControlViewController.h 如下：

 //
 //  PageControlViewController.h
 //  PageControl
 //
 //  Created by HuTao on 8/20/12.
 //  Copyright __MyCompanyName__ 2012. All rights reserved.
 //

 #import <UIKit/UIKit.h>


 @interface PageControlViewController : UIViewController
 {
     UIImageView * imageView;
     UIPageControl * pageControl;

     NSArray * imageNameList;
 }


 @property (retain, nonatomic) UIImageView * imageView;
 @property (retain, nonatomic) UIPageControl * pageControl;
 @property (retain, nonatomic) NSArray * imageNameList;


 @end

修改 PageControlViewController.m 如下：

 //
 //  PageControlViewController.m
 //  PageControl
 //
 //  Created by HuTao on 8/20/12.
 //  Copyright __MyCompanyName__ 2012. All rights reserved.
 //

 #import "PageControlViewController.h"


 @implementation PageControlViewController


 @synthesize pageControl;
 @synthesize imageView;
 @synthesize imageNameList;


 // Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
 - (void)viewDidLoad
 {
     [super viewDidLoad];

     int width = self.view.frame.size.width;
     int height = self.view.frame.size.height;
     int pageControlHeight = 20;

     imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, width, height - pageControlHeight)];
     pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, height - pageControlHeight, width, pageControlHeight)];

     imageNameList = [[NSArray alloc] initWithObjects: @"1.jpg", @"2.jpg", @"3.jpg", @"4.jpg", @"5.jpg", nil];

     pageControl.numberOfPages = [imageNameList count];
     pageControl.currentPage = 0;
     pageControl.hidesForSinglePage = YES;
     pageControl.backgroundColor = [UIColor blackColor];
     [pageControl addTarget:self action:@selector(pageControlChanged:) forControlEvents:UIControlEventValueChanged];

     [imageView setImage:[UIImage imageNamed:[imageNameList objectAtIndex:pageControl.currentPage]]];

     [self.view addSubview:imageView];
     [self.view addSubview:pageControl];
 }


 - (IBAction)pageControlChanged:(id)sender
 {
     //按如下方法获取 UIPageControl:
     //UIPageControl * control = (UIPageControl *)sender;

     int page = pageControl.currentPage;
     NSLog(@"currentPage: %d", page);

     [imageView setImage:[UIImage imageNamed:[imageNameList objectAtIndex:page]]];
 }


 - (void)viewDidUnload
 {
     imageView = nil;
     pageControl = nil;
 }


 - (void)dealloc
 {
     [super dealloc];

     [imageView release];
     [pageControl release];
 }



 @end

说明：

 UIPageControl 有几个属性和方法：

numberOfPages：有几个可以切换的视图，即几个小圆点

currentPage：当前视图的小圆点序号

addTarget：设置当点击小圆点时应该调用的回调函数

hidesForSinglePage：当只有一个视图时是否隐藏小圆点

4.

将要显示的图片加入 Project，运行结果如下：

第一张图：

第四张图：

最后我把完整代码也上传上来了：

http://download.csdn.net/detail/htttw/4514206

最后还要说的是，本程序在点击 UIPageControl 时会立即切换到新的视图，更好的办法是使用 UIScrollView 滚动视图。另外 UIPageControl 往往作为 UIScrollView 的附加物（划动 UIScrollView 转到下一个视图的同时 UIPageControl 小圆点也会跟着改变），这些功能以后再实现。