現(xiàn)在基本上每個應(yīng)用的頭部，都會是一個無限滾動顯示圖片的scrollview，然后點擊圖片可以跳轉(zhuǎn)到不同的頁面。今天我們來學(xué)習(xí)下如何封裝一個這樣的控件。
需求
- 三個imageview控件實現(xiàn)多張image的無限滾動
- 點擊圖片，可以拿到圖片的信息給調(diào)用者使用
無限滾動效果圖
image
點擊圖片事件
圖片對應(yīng)的信息一般由服務(wù)器返回，被封裝到model，再傳遞給我們封裝的無限滾動控件。當(dāng)調(diào)用者通過代理方法實現(xiàn)回調(diào)，點擊每張圖片，我們會返回被點擊圖片對應(yīng)的信息，這樣調(diào)用者就可以拿到這些信息去做一些事情。
如下所示，返回了被點擊圖片的name和url
image
無限滾動scrollview封裝
我們具體來看看如何封裝一個無限滾動的uiscrollview，并實現(xiàn)點擊事件。
下面給出了具體的實現(xiàn)代碼，并且做了很詳細的描述。
但是有兩個方法比較難理解，我會單獨用例子來講解。
InfiniteRollScrollView.h文件
==================================
#import <UIKit/UIKit.h>
@class InfiniteRollScrollView;
@protocol infiniteRollScrollViewDelegate <NSObject>
@optional
/**
* 點擊圖片的回調(diào)事件
*
* @param scrollView 一般傳self
* @param info 每張圖片對應(yīng)的model，由控制器使用imageModelInfoArray屬性傳遞過來，再由該方法傳遞回調(diào)用者
*/
-(void)infiniteRollScrollView:(InfiniteRollScrollView*)scrollView tapImageViewInfo:(id)info;
@end
@interface InfiniteRollScrollView : UIView
/**
* 圖片的信息，每張圖片對應(yīng)一個model，需要控制器傳遞過來
*/
@property (strong, nonatomic) NSMutableArray *imageModelInfoArray;
/**
* 需要顯示的圖片，需要控制器傳遞過來
*/
@property (strong, nonatomic) NSArray *imageArray;
/**
* 是否豎屏顯示scrollview，默認(rèn)是no
*/
@property (assign, nonatomic, getter=isScrollDirectionPortrait) BOOL scrollDirectionPortrait;
@property (weak, nonatomic, readonly) UIPageControl *pageControl;
@property(assign,nonatomic)NSInteger ImageViewCount;
@property(weak,nonatomic)id<infiniteRollScrollViewDelegate>delegate;
@end
InfiniteRollScrollView.m文件
==================================
#import "InfiniteRollScrollView.h"
static int const ImageViewCount = 3;
@interface InfiniteRollScrollView() <UIScrollViewDelegate>
@property (weak, nonatomic) UIScrollView *scrollView;
@property (weak, nonatomic) NSTimer *timer;
@property(assign,nonatomic)BOOL isFirstLoadImage;
@end
@implementation InfiniteRollScrollView
#pragma mark - 初始化
- (instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
// 滾動視圖
UIScrollView *scrollView = [[UIScrollView alloc] init];
scrollView.showsHorizontalScrollIndicator = NO;
scrollView.showsVerticalScrollIndicator = NO;
scrollView.pagingEnabled = YES;
scrollView.bounces = NO;
scrollView.delegate = self;
[self addSubview:scrollView];
self.scrollView = scrollView;
// 圖片控件
for (int i = 0; i<ImageViewCount; i++) {
UIImageView *imageView = [[UIImageView alloc] init];
[scrollView addSubview:imageView];
}
// 頁碼視圖
UIPageControl *pageControl = [[UIPageControl alloc] init];
[self addSubview:pageControl];
_pageControl = pageControl;
}
return self;
}
- (void)layoutSubviews
{
[super layoutSubviews];
[self addTap];
self.scrollView.frame = self.bounds;
if (self.isScrollDirectionPortrait) {//豎向滾動
self.scrollView.contentSize = CGSizeMake(0, ImageViewCount * self.bounds.size.height);
} else {
self.scrollView.contentSize = CGSizeMake(ImageViewCount * self.bounds.size.width, 0);
}
for (int i = 0; i<ImageViewCount; i++) {
UIImageView *imageView = self.scrollView.subviews[i];
if (self.isScrollDirectionPortrait) {//豎向滾動時imageview的frame
imageView.frame = CGRectMake(0, i * self.scrollView.frame.size.height, self.scrollView.frame.size.width, self.scrollView.frame.size.height);
} else {//橫向滾動時imageview的frame
imageView.frame = CGRectMake(i * self.scrollView.frame.size.width, 0, self.scrollView.frame.size.width, self.scrollView.frame.size.height);
}
}
CGFloat pageW = 80;
CGFloat pageH = 20;
CGFloat pageX = self.scrollView.frame.size.width - pageW;
CGFloat pageY = self.scrollView.frame.size.height - pageH;
self.pageControl.frame = CGRectMake(pageX, pageY, pageW, pageH);
}
#pragma mark - 添加點擊手勢
-(void)addTap
{
UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapCallback)];
tap.cancelsTouchesInView = NO;
[self addGestureRecognizer:tap];
}
-(void)tapCallback
{
if (self.delegate && [self.delegate respondsToSelector:@selector(infiniteRollScrollView:tapImageViewInfo:)])
{
[self.delegate infiniteRollScrollView:self tapImageViewInfo:self.imageModelInfoArray[self.pageControl.currentPage]];
}
}
#pragma mark - <UIScrollViewDelegate>
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
// 當(dāng)兩張圖片同時顯示在屏幕中，找出占屏幕比例超過一半的那張圖片
NSInteger page = 0;
CGFloat minDistance = MAXFLOAT;
for (int i = 0; i<self.scrollView.subviews.count; i++) {
UIImageView *imageView = self.scrollView.subviews[i];
CGFloat distance = 0;
if (self.isScrollDirectionPortrait) {
distance = ABS(imageView.frame.origin.y - scrollView.contentOffset.y);
} else {
distance = ABS(imageView.frame.origin.x - scrollView.contentOffset.x);
}
if (distance < minDistance) {
minDistance = distance;
page = imageView.tag;
}
}
self.pageControl.currentPage = page;
}
//用手開始拖拽的時候，就停止定時器，不然用戶拖拽的時候，也會出現(xiàn)換頁的情況
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
[self stopTimer];
}
//用戶停止拖拽的時候，就啟動定時器
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
[self startTimer];
}
//手指拖動scroll停止的時候，顯示下一張圖片
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
[self displayImage];
}
//定時器滾動scrollview停止的時候，顯示下一張圖片
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView
{
[self displayImage];
}
#pragma mark - 顯示圖片處理
- (void)displayImage
{
// 設(shè)置圖片，三張imageview顯示無限張圖片
for (int i = 0; i<ImageViewCount; i++) {
UIImageView *imageView = self.scrollView.subviews[i];
NSInteger index = self.pageControl.currentPage;
/**
* 滾到第一張，并且是程序剛啟動是第一次加載圖片，index才減一。
加上這個判斷條件，是為了防止當(dāng)程序第一次加載圖片時，此時第一張圖片的i=0，那么此時index--導(dǎo)致index<0，進入下面index<0的判斷條件，讓第一個imageview顯示的是最后一張圖片
*/
if (i == 0 && self.isFirstLoadImage) {
index--;
}else if (i == 2) {//滾到最后一張圖片，index加1
index++;
}
if (index < 0) {//如果滾到第一張還繼續(xù)向前滾，那么就顯示最后一張
index = self.pageControl.numberOfPages-1 ;
}else if (index >= self.pageControl.numberOfPages) {//滾動到最后一張的時候，由于index加了一，導(dǎo)致index大于總的圖片個數(shù)，此時把index重置為0，所以此時滾動到最后再繼續(xù)向后滾動就顯示第一張圖片了
index = 0;
}
imageView.tag = index;
imageView.image = self.imageArray[index];
}
self.isFirstLoadImage =YES;
// 每次滾動圖片，都設(shè)置scrollview的contentoffset為整個scrollview的高度或者寬度，這樣一次就可以滾完一張圖片的距離。
if (self.isScrollDirectionPortrait) {
self.scrollView.contentOffset = CGPointMake(0, self.scrollView.frame.size.height);
} else {
self.scrollView.contentOffset = CGPointMake(self.scrollView.frame.size.width, 0);
}
}
- (void)displayNextImage
{
if (self.isScrollDirectionPortrait) {
[self.scrollView setContentOffset:CGPointMake(0, 2 * self.scrollView.frame.size.height) animated:YES];
} else {
[self.scrollView setContentOffset:CGPointMake(2 * self.scrollView.frame.size.width, 0) animated:YES];
}
}
#pragma mark - 定時器處理
- (void)startTimer
{
NSTimer *timer = [NSTimer timerWithTimeInterval:2 target:self selector:@selector(displayNextImage) userInfo:nil repeats:YES];
[[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];
self.timer = timer;
}
- (void)stopTimer
{
[self.timer invalidate];
//需要手動設(shè)置timer為nil，因為定時器被系統(tǒng)強引用了，必須手動釋放
self.timer = nil;
}
#pragma mark - setter方法
- (void)setImageArray:(NSArray *)imageArray
{
_imageArray = imageArray;
// 設(shè)置頁碼
self.pageControl.numberOfPages = imageArray.count;
self.pageControl.currentPage = 0;
// 設(shè)置內(nèi)容
[self displayImage];
// 開始定時器
[self startTimer];
}
@end
難點1、如何找出屏幕占比多的圖片
在InfiniteRollScrollView.m類文件中有如下方法。該方法的作用是判斷當(dāng)用戶拖拽圖片時，兩張圖片同時顯示在屏幕上，如果用戶此時松開手，那么應(yīng)該完全顯示哪張圖片。此時我們需要判斷哪張圖片占據(jù)的屏幕比例較多，就顯示該張圖片。
該情況如下所示：
image
實現(xiàn)方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
// 當(dāng)兩張圖片同時顯示在屏幕中，找出占屏幕比例超過一半的那張圖片
NSInteger page = 0;
CGFloat minDistance = MAXFLOAT;
for (int i = 0; i<self.scrollView.subviews.count; i++) {
UIImageView *imageView = self.scrollView.subviews[i];
CGFloat distance = 0;
if (self.isScrollDirectionPortrait) {
distance = ABS(imageView.frame.origin.y - scrollView.contentOffset.y);
} else {//橫向滾動
distance = ABS(imageView.frame.origin.x - scrollView.contentOffset.x);
}
if (distance < minDistance) {//找出最小差值對應(yīng)的imageview
minDistance = distance;
page = imageView.tag;
}
}
self.pageControl.currentPage = page;
}
我們只研究橫向滾動時的情況，如何找出最小distance對應(yīng)的imageview
假設(shè)三個imageview 的frame的x值如下：
image1-x: 0
image2-x: 100
image3-x: 200
PS:
移動scrollview的時候，不會改變image view的frame，只會不斷改變scrollview的bounds，造成scrollview上面的子控件image view的位置也跟著不斷變化，從而產(chǎn)生了image view在不斷移動的感覺。
scrollview的contentoffset和imageview的x值的差值的絕對值有如下幾種情況
情況1：
offset : 20
ABS(offset-image1-x): ABS(20-0) = 20
ABS(offset-image2-x): ABS(20-100) = 80
ABS(offset-image3-x): ABS(20-200)= 180
image3的差值大于100，故超出屏幕。最小差值為image1的20，此時image1占屏幕80，image2占屏幕20，image1占多，松開手應(yīng)該顯示image1。
示例圖如下：
image
情況2:
offset : 50
ABS(offset-image1-x): 50
ABS(offset-image2-x): 50
ABS(offset-image3-x): 150
此時為臨界點，image1和image2各占屏幕一半，image3超出屏幕
示例圖如下：
image
情況3:
offset : 60
ABS(offset-image1-x): 60
ABS(offset-image2-x): 40
ABS(offset-image3-x): 140
Image3超出屏幕，最小差值為為image2的40，此時image1占屏幕40，image2占屏幕60，image2占多，松開手應(yīng)該顯示image2
示例圖如下：
image
情況4:
offset : 150
ABS(offset-image1-x): 150
ABS(offset-image2-x): 50
ABS(offset-image3-x): 50
image1超出屏幕。此時為臨界點，image2和image3各占屏幕一半
示例圖如下：
image
情況5:
offset : 160
ABS(offset-image1-x): 160
ABS(offset-image2-x): 60
ABS(offset-image3-x): 40
image1超出屏幕。最小差值為40，此時image3占屏幕40，image1占屏幕60，image3占多，松開手應(yīng)該顯示image3
示例圖如下：
image
通過上面五種情況的分析，可以看出使用上面的方法可以找出在屏幕上占比更多的imageview。
難點2、如何使用三個imageview實現(xiàn)無限滾動
從剛開始的示例圖中可以看到有五張圖片，但是只使用了三個imageview來實現(xiàn)循環(huán)利用。
實現(xiàn)代碼
- (void)displayImage
{
// 設(shè)置圖片，三張imageview顯示無限張圖片
for (int i = 0; i<ImageViewCount; i++) {
UIImageView *imageView = self.scrollView.subviews[i];
NSInteger index = self.pageControl.currentPage;
/**
* 滾到第一張，并且是程序剛啟動是第一次加載圖片，index才減一。
加上這個判斷條件，是為了防止當(dāng)程序第一次加載圖片時，此時第一張圖片的i=0，那么此時index--導(dǎo)致index<0，進入下面index<0的判斷條件，讓第一個imageview顯示的是最后一張圖片
*/
if (i == 0 && self.isFirstLoadImage) {
index--;
}else if (i == 2) {//滾到最后一張圖片，index加1
index++;
}
if (index < 0) {//如果滾到第一張還繼續(xù)向前滾，那么就顯示最后一張
index = self.pageControl.numberOfPages-1 ;
}else if (index >= self.pageControl.numberOfPages) {//滾動到最后一張的時候，由于index加了一，導(dǎo)致index大于總的圖片個數(shù)，此時把index重置為0，所以此時滾動到最后再繼續(xù)向后滾動就顯示第一張圖片了
index = 0;
}
imageView.tag = index;
imageView.image = self.imageArray[index];
}
self.isFirstLoadImage =YES;
// 讓scrollview顯示中間的imageview
if (self.isScrollDirectionPortrait) {
self.scrollView.contentOffset = CGPointMake(0, self.scrollView.frame.size.height);
} else {
self.scrollView.contentOffset = CGPointMake(self.scrollView.frame.size.width, 0);
}
}
先看示意圖，假設(shè)我們有四張圖片，要用三個imageview循環(huán)顯示（更多的圖片情況類似）
image
image
image
image
如此循環(huán)往復(fù)，就可以實現(xiàn)三個imageview顯示無限張圖片了。
結(jié)合上面的代碼和示例圖應(yīng)該不難理解。
如何使用
假設(shè)我們在viewcontroller類中使用InfiniteRollScrollView類。示例代碼如下：
#import "ViewController.h"
#import "ImageModel.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
InfiniteRollScrollView *scrollView = [[InfiniteRollScrollView alloc] init];
scrollView.frame = CGRectMake(30, 50, 300, 130);
scrollView.delegate = self;
scrollView.pageControl.currentPageIndicatorTintColor = [UIColor orangeColor];
scrollView.pageControl.pageIndicatorTintColor = [UIColor grayColor];
//需要顯示的所有圖片
scrollView.imageArray = @[
[UIImage imageNamed:@"0"],
[UIImage imageNamed:@"1"],
[UIImage imageNamed:@"2"],
[UIImage imageNamed:@"3"],
[UIImage imageNamed:@"4"]
];
//需要顯示的所有圖片對應(yīng)的信息，這里我們是手動添加的每張圖片的信息，實際環(huán)境一般都是由服務(wù)器返回，我們再封裝到model里面。
scrollView.imageModelInfoArray = [NSMutableArray array];
for (int i = 0; i<5; i++) {
ImageModel *mode = [[ImageModel alloc]init];
mode.name = [NSString stringWithFormat:@"picture-%zd",i];
mode.url = [NSString stringWithFormat:@"http://www.baidu.com-%zd",i];
[scrollView.imageModelInfoArray addObject:mode];
}
[self.view addSubview:scrollView];
}
//代理方法
-(void)infiniteRollScrollView:(InfiniteRollScrollView *)scrollView tapImageViewInfo:(id)info{
ImageModel *model = (ImageModel *)info;
NSLog(@"name:%@---url:%@", model.name, model.url);
}
@end
總結(jié)：
其實上面的封裝還不夠完美，因為需要調(diào)用者傳入需要顯示的圖片和圖片對應(yīng)的model，這需要調(diào)用者自己下載好了圖片，然后傳入。其實我們可以讓調(diào)用者僅僅傳入所有需要顯示的image的model，我們幫他下載好了直接顯示。
