首页 > 代码库 > UIScrollVIew和UIPageControl学习使用

UIScrollVIew和UIPageControl学习使用

概要

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

结果展示

技术分享

流程概要

  1. UIScrollVIew是存放需要显示的界面的,UIPageControl指示的是UIScrollVIew的子视图信息,包括当前页、总页数
  2. 要使得UIScrollVIew支持页模式需要将属性pagingEnabled设为YES,这样滚动都是按页滚动的
  3. UIScrollVIew添加页(子视图)的时候需要知道,因为该控件的分页和翻页是根据content区域构建的,所以每个页都有自己的页区域,而且这些也一般设为连续的,所以记得设置子页的framecontent的某区域,而且UIScrollVIewcontent要刚好容纳子页。如果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. 为了更新控件UIScrollVIewUIPageControl,需要给他们分别设置代理和方法。给控件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

项目工程

UIScrollVIew和UIPageControl学习使用