概要
對于同一個頁面需要展示很多圖片信息掖鱼、子視圖等的這樣的需求，我們可以采用控件UIScrollVIew，與之常常一起使用的控件是UIPageControl,UIScrollVIew里面可以存放多個子視圖，通過設(shè)置頁模式，以及子頁面在UIScrollVIew的content位置简卧，可以在滑動控件UIScrollVIew的時候切換子視圖。為了交互友好烤芦，常常和控件UIPageControl一起使用举娩，該控件是一組指示器，一般指示器個數(shù)對應(yīng)于上述的子頁面?zhèn)€數(shù)构罗，通過改組指示器可以看到當(dāng)前子頁面的位置以及整個UIScrollVIew的子視圖情況铜涉。
結(jié)果展示
主要技術(shù)點
UIScrollVIew是存放需要顯示的界面的，UIPageControl指示的是UIScrollVIew的子視圖信息遂唧，包括當(dāng)前頁骄噪、總頁數(shù)要使得
UIScrollVIew支持頁模式需要將屬性pagingEnabled設(shè)為YES,這樣滾動都是按頁滾動的往
UIScrollVIew添加頁（子視圖）的時候需要知道，因為該控件的分頁和翻頁是根據(jù)content區(qū)域構(gòu)建的蠢箩，所以每個頁都有自己的頁區(qū)域链蕊，而且這些也一般設(shè)為連續(xù)的，所以記得設(shè)置子頁的frame為content的某區(qū)域谬泌，而且UIScrollVIew的content要剛好容納子頁滔韵。如果content過大，導(dǎo)致子頁翻完了掌实，還能翻到空白區(qū)陪蜻；小了，則部分視圖不會顯示了贱鼻。一開始我通過重寫方法
- (void) addSubview:(UIView *)view添加子頁的宴卖，不過發(fā)現(xiàn)UIScrollVIew子頁數(shù)不對，后來才發(fā)現(xiàn)有程序自動調(diào)用了該方法邻悬，導(dǎo)致子頁數(shù)不對（好像多了兩個子頁）症昏。所以后來修改方法為- (void) addSubview:(UIView *)view forCurrent:(BOOL)current。-
為了能夠手動設(shè)置控件
UIScrollVIew顯示的子頁父丰，需要使用方法scrollRectToVisible:animated:,其中rect是指子頁的位置肝谭，如CGRect rect = CGRectMake(page*_pageSize.width, 0, _pageSize.width, _pageSize.height); /** 移到可視區(qū) */ [self scrollRectToVisible:rect animated:animated]; -
為了更新控件
UIScrollVIew和UIPageControl，需要給他們分別設(shè)置代理和方法蛾扇。給控件UIScrollVIew設(shè)置代理攘烛，同時實現(xiàn)方法- (void)scrollViewDidScroll:(UIScrollView *)scrollView；給控件UIPageControl添加方法- (void) onChangePage镀首，如：#pragma 實現(xiàn)協(xié)議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;
}
/* 默認(rèn)的addSubview:方法會被調(diào)用坟漱， 所以為了區(qū)分所需的添加照片，重載或者定義其他方法 */
- (void) addSubview:(UIView *)view forCurrent:(BOOL)current
{
NSInteger nPage = [self.subviews count];
/** 新添加的子頁都對應(yīng)content的某個區(qū)域 */
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];
}
}
/** 設(shè)置頁面page可見更哄，需要把視圖的content的對應(yīng)部分移到可視區(qū) */
- (void) setCurrentPage:(NSInteger)page animated:(BOOL)animated
{
if(page >= [self.subviews count])
{
return;
}
CGRect rect = CGRectMake(page*_pageSize.width, 0, _pageSize.width, _pageSize.height);
/** 移到可視區(qū) */
[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;
/** 設(shè)置代理芋齿，使得視圖滾動時更新其他控件 */
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;
/** 非當(dāng)前頁的指示器顏色 */
pageCtrl.pageIndicatorTintColor = [UIColor blueColor];
/** 當(dāng)前頁的指示器顏色 */
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];
}
/** 設(shè)置頁指示器總個數(shù) */
self.pageController.numberOfPages = [self.pageView.subviews count];
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
#pragma 實現(xiàn)協(xié)議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
