UIScrollView和UIPageControl学习使用

UIScrollView和UIPageControl

---

概要

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

结果展示

主要技术点

1. UIScrollVIew是存放需要显示的界面的，UIPageControl指示的是UIScrollVIew的子视图信息，包括当前页、总页数

2. 要使得UIScrollVIew支持页模式需要将属性pagingEnabled设为YES,这样滚动都是按页滚动的

3. 往UIScrollVIew添加页（子视图）的时候需要知道，因为该控件的分页和翻页是根据content区域构建的，所以每个页都有自己的页区域，而且这些也一般设为连续的，所以记得设置子页的frame为content的某区域，而且UIScrollVIew的content要刚好容纳子页。如果content过大，导致子页翻完了，还能翻到空白区；小了，则部分视图不会显示了。

4. 一开始我通过重写方法- (void) addSubview:(UIView *)view添加子页的，不过发现UIScrollVIew子页数不对，后来才发现有程序自动调用了该方法，导致子页数不对（好像多了两个子页）。所以后来修改方法为- (void) addSubview:(UIView *)view forCurrent:(BOOL)current。

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

    CGRect rect = CGRectMake(page*_pageSize.width, 0, _pageSize.width, _pageSize.height);
    
    /** 移到可视区 */
    [self scrollRectToVisible:rect animated:animated];
   

6. 为了更新控件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

项目工程