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

項目工程