UIScrollView和UIPageControl

概要

对于同一个页面需要展示很多图片信息、子视图等的这样的需求，我们可以采用控件UIScrollVIew，与之常常一起使用的控件是UIPageControl,UIScrollVIew里面可以存放多个子视图，通过设置页模式，以及子页面在UIScrollVIew的content位置，可以在滑动控件UIScrollVIew的时候切换子视图。为了交互友好，常常和控件UIPageControl一起使用，该控件是一组指示器，一般指示器个数对应于上述的子页面个数，通过改组指示器可以看到当前子页面的位置以及整个UIScrollVIew的子视图情况。

结果展示

UIScrollView和UIPageControl学习使用

主要技术点

UIScrollVIew是存放需要显示的界面的，UIPageControl指示的是UIScrollVIew的子视图信息，包括当前页、总页数
要使得UIScrollVIew支持页模式需要将属性pagingEnabled设为YES,这样滚动都是按页滚动的
往UIScrollVIew添加页（子视图）的时候需要知道，因为该控件的分页和翻页是根据content区域构建的，所以每个页都有自己的页区域，而且这些也一般设为连续的，所以记得设置子页的frame为content的某区域，而且UIScrollVIew的content要刚好容纳子页。如果content过大，导致子页翻完了，还能翻到空白区；小了，则部分视图不会显示了。
一开始我通过重写方法- (void) addSubview:(UIView *)view添加子页的，不过发现UIScrollVIew子页数不对，后来才发现有程序自动调用了该方法，导致子页数不对（好像多了两个子页）。所以后来修改方法为- (void) addSubview:(UIView *)view forCurrent:(BOOL)current。

为了能够手动设置控件UIScrollVIew显示的子页，需要使用方法scrollRectToVisible:animated:,其中rect是指子页的位置，如

 CGRect rect = CGRectMake(page*_pageSize.width, 0, _pageSize.width, _pageSize.height);

 /** 移到可视区 */

 [self scrollRectToVisible:rect animated:animated];

为了更新控件UIScrollVIew和UIPageControl，需要给他们分别设置代理和方法。给控件UIScrollVIew设置代理，同时实现方法- (void)scrollViewDidScroll:(UIScrollView *)scrollView；给控件UIPageControl添加方法- (void) onChangePage，如：

 #pragma 实现协议UIScrollViewDelegate

 - (void)scrollViewDidScroll:(UIScrollView *)scrollView

 {

     NSInteger page = scrollView.contentOffset.x / _pageView.pageSize.width;

     if(page != _pageController.currentPage)

     {

         _pageController.currentPage = page;

     };

 }

 - (void) onChangePage

 {

     [_pageView setCurrentPage:_pageController.currentPage animated:YES];

 }

主要代码

自定义的UIScrollView

//

//  PageView.m

//  PageView 继承自 UIScrollView

//

//  Created by arbboter on 14/12/24.

//  Copyright (c) 2014年 arbboter. All rights reserved.

//

#import "PageView.h"

@interface PageView ()

@end

@implementation PageView

- (id) initWithFrame:(CGRect)frame

{

    if(self=[super initWithFrame:frame])

    {

        /** 页模式 */

        self.pagingEnabled = YES;

        self.pageSize = frame.size;

    }

    return self;

}

/* 默认的addSubview:方法会被调用， 所以为了区分所需的添加照片，重载或者定义其他方法 */

- (void) addSubview:(UIView *)view forCurrent:(BOOL)current

{

    NSInteger nPage = [self.subviews count];

    /** 新添加的子页都对应content的某个区域 */

    view.frame = CGRectMake(nPage*_pageSize.width, 0, _pageSize.width, _pageSize.height);

    nPage++;

    self.contentSize = CGSizeMake(nPage*_pageSize.width, _pageSize.height);

    [super addSubview:view];

    if(current)

    {

        [self setCurrentPage:nPage-1 animated:NO];

    }

}

/** 设置页面page可见，需要把视图的content的对应部分移到可视区 */

- (void) setCurrentPage:(NSInteger)page animated:(BOOL)animated

{

    if(page >= [self.subviews count])

    {

        return;

    }

    CGRect rect = CGRectMake(page*_pageSize.width, 0, _pageSize.width, _pageSize.height);

    /** 移到可视区 */

    [self scrollRectToVisible:rect animated:animated];

}

@end

程序控制类

//

//  ViewController.m

//  PageView

//

//  Created by arbboter on 14/12/24.

//  Copyright (c) 2014年 arbboter. All rights reserved.

//

#import "ViewController.h"

#import "PageView.h"

@interface ViewController ()  <UIScrollViewDelegate>

@property (nonatomic, retain) PageView* pageView;

@property (nonatomic, retain) UIPageControl* pageController;

@end

@implementation ViewController

- (void)viewDidLoad

{

    [super viewDidLoad];

    // Do any additional setup after loading the view, typically from a nib.

    CGRect frame = self.view.frame;

    PageView* scrollView = [[PageView alloc] initWithFrame:frame];

    self.pageView = scrollView;

    /** 设置代理，使得视图滚动时更新其他控件 */

    scrollView.delegate = self;

    [self.view addSubview:scrollView];

    [scrollView release];

    frame.origin.y += frame.size.height*7/8;

    frame.size.height = frame.size.height/8;

    UIPageControl* pageCtrl = [[UIPageControl alloc] initWithFrame:frame];

    self.pageController = pageCtrl;

    /** 非当前页的指示器颜色 */

    pageCtrl.pageIndicatorTintColor = [UIColor blueColor];

    /** 当前页的指示器颜色 */

    pageCtrl.currentPageIndicatorTintColor = [UIColor greenColor];

    [self.view insertSubview:pageCtrl aboveSubview:self.pageView];

    /** 页面指示器变化时，scroll更新 */

    [pageCtrl addTarget:self action:@selector(onChangePage) forControlEvents:UIControlEventValueChanged];

    [pageCtrl release];

    /** 加载图片 */

    int nImage = 8;

    NSString* imageName = nil;

    for (int i=0; i<nImage; i++)

    {

        imageName = [[NSString alloc] initWithFormat:@"%d.jpg", i+1];

        UIImageView* imageView = [[UIImageView alloc] initWithFrame:self.pageView.frame];

        imageView.contentMode = UIViewContentModeScaleAspectFit;

        imageView.image = [UIImage imageNamed:imageName];

        imageView.backgroundColor = [UIColor colorWithRed:(arc4random()%30)/100 green:(arc4random()%30)/100 blue:(arc4random()%30)/100 alpha:1.0];

        [self.pageView addSubview:imageView forCurrent:NO];

        [imageView release];

        [imageName release];

    }

    /** 设置页指示器总个数 */

    self.pageController.numberOfPages = [self.pageView.subviews count];

}

- (void)didReceiveMemoryWarning

{

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

#pragma 实现协议UIScrollViewDelegate

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

{

    NSInteger page = scrollView.contentOffset.x / _pageView.pageSize.width;

    if(page != _pageController.currentPage)

    {

        _pageController.currentPage = page;

    };

}

- (void) onChangePage

{

    [_pageView setCurrentPage:_pageController.currentPage animated:YES];

}

@end

秒客网