ios例子12 pageControl和UIScrollView

http://www.tuicool.com/articles/YJNZFf

下面介绍pageControl结合ScrollVie w 实现连续滑动翻页的效果， ScrollVie w我们在应用开发中经常用到，以g 这种翻页效果还是很好看的，如下图所示：



通过这个例子，我们重点学习UIScrollView 。 UIScrollView 滚动的效果主要的原理是修改他的坐标，准确的讲是修改原点坐标，这一点我们在下面代码中自行体会。在动手创建工程之前，先了解以下几点：

UIScrollView学习要点

1. 注意只有UIScrollView，没有UIScrollViewController。

UiScrollView同许多控件一样有自己的delegate，但它不像UIView或TabelViewController有自带的ViewController。

一般实现方式是把包含scrollView的UIView对应的UIViewController实现UIScrollViewDelegate。如下图所示。
UIScrollViewDelegate包含了UIScrollView的生命周期方法，如 scrollViewDidScroll（滑动后），scrollViewWillBeginDragging（滑动开始），scrollViewDidEndDecelerating（滑动结束）等方法，用于监听页面拖拽。

2. 一次滑动，scrollView的 scrollViewDidScroll会执行多次。

因此一般需要一个标识符来判断是否要执行scrollViewDidScroll中的自定义代码。

3. UIScrollView属性： 参考/article/6129769.html

创建工程

1.同上一个例子中布局storyBoard，不同的是， 使用UIScrollView而不是UIView。



2.设置TestViewController.h

如下图所示：

在接口声明中，参考 UIScrollView学习要点 1，继承UIScrollViewDelegate，后面在TestViewController.m中实现 scrollViewDidScroll等方法。

参考要点2， 声明私有属性：pageControlUsed标识符。

关联stroyboard中ScrollView和PageControl至代码中，如图所示。pageControl还要关联Action

声明一个Array的viewControllers属性，做为要显示的多个页面的载体。



3.实现要显示的页面

下面实现所显示的彩色页面。 每次翻页时，会提前加载下一个页面， 颜色和中间的label内容与page数相关，这是 调用自定义的 initWithPageNumber方法生成。

这个不是理解重点。不做解说。

3.1创建一个file继承自UIViewController，同时勾选伴随生成xib选项。



3.2将这个xib按下以设置，size:Freeform(这样才可以改变大小)，status Bar：none(隐藏状态条)，设置尺寸width:320,height:400.



3.3设置MyPageViewController.h

添加私有属性pageNumber,关联PageLabel,声明initWithPageNumber方法。



3.4MyPageViewController.m文件内容如下：

//
//  MyPageViewController.m
//  Test_PageControl
//
//  Created by shimi on 13-4-9.
//  Copyright (c) 2013年 com.shimi. All rights reserved.
//

#import "MyPageViewController.h"
static NSArray *__pageControlColorList = nil;

@interface MyPageViewController ()

@end

@implementation MyPageViewController
@synthesize pageLabel;

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {

// Mod the index by the list length to ensure access remains in bounds.
return [__pageControlColorList objectAtIndex:index % [__pageControlColorList count]];
}

// Load the view nib and initialize the pageNumber ivar.
- (id)initWithPageNumber:(int)page {
if (self = [super initWithNibName:@"MyPageViewController" bundle:nil]) {
pageNumber = page;
}
return self;
}
- (void)viewDidLoad
{
[super viewDidLoad];

// Custom initialization
}
return self;
}
+ (UIColor *)pageControlColorWithIndex:(NSUInteger)index {
if (__pageControlColorList == nil) {
__pageControlColorList = [[NSArray alloc] initWithObjects:[UIColor redColor], [UIColor greenColor], [UIColor magentaColor],
[UIColor blueColor], [UIColor orangeColor], [UIColor brownColor], [UIColor grayColor], nil];
}
// Do any additional setup after loading the view from its nib.
pageLabel.text = [NSString stringWithFormat:@"Page %d", pageNumber + 1];
self.view.backgroundColor = [MyPageViewController pageControlColorWithIndex:pageNumber];
}

- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

@end

4.翻页实现

4.1设置一个静态变量KNumberOfPages，这是总页数 引入MyPageViewController.h声明@synthesize

4.2在TestViewController.m的viewDidLoad方法做UIScrollView和PageControl的初始化。

scrollView的初始化中， scrollView.contentSize是它的拖动范围。 因为要翻7页，所以最后UIScrollView的宽度将变为7个屏幕宽。另外高度与要显示的页面一样高(MyPageViewController.xib的高度设置为400)，如果 scrollView的高度 >400，最后出来的效果是上下可以拖动。

pageControl的初始化中， pageControl . numberOfPages = KNumberOfPages/ /出现7个点 pageControl . currentPage = 0 ;//默认高亮在第0个点



loadScrollViewWithPage方法实现如下，如果页面已经被加载过，不会重复生成。



4.3UIScrollViewDelegate的生命周期及 scrollViewDidScroll的多次加载

在ScrollView的初始化中，设置了 scrollView.delegate=self。且TestViewController.h中继承了UIScrollerViewDelegate。在 TestViewController.m实现了 scrollViewDidScroll（滑动后），scrollViewWillBeginDragging（滑动开始），scrollViewDidEndDecelerating（滑动结束）方法，用于监听页面拖拽。

scrollViewDidScroll在两种动作下会被触发， 点击pageControl的点、或左右滑动scrollView区域。

1. 左右滑动scrollView区域：只 触发scrollViewDidScroll方法

2. 点击pageControl的点： 触发changePage方法，同时 触发scrollViewDidScroll方法。 changePage和 scrollViewDidScroll中完成的是同样的事情。区别是 scrollViewDidScroll中的page需要通过计算得出。

因此在changePage中会把pageControlUsed=YES，这样在 scrollViewDidScroll中就会直接返回。而在 滑动开始和结束时将pageControlUsed重置为NO.

另外scrollViewDidScroll会执行多次（可能是滑动操作是持续的，这个过程中一直触发scroll方法）。是在这个 过程 中完成第二个page的加载的，我们通过计算通过pageControl.currentPage是否等于计算出的page， 来确定pageControlUsed=YES的时间点 。