无限轮播图片
2016-06-04 本文已影响1955人
西木柚子
现在基本上每个应用的头部，都会是一个无限滚动显示图片的scrollview，然后点击图片可以跳转到不同的页面。今天我们来学习下如何封装一个这样的控件。
需求
- 三个imageview控件实现多张image的无限滚动
- 点击图片，可以拿到图片的信息给调用者使用
无限滚动效果图
image
点击图片事件
图片对应的信息一般由服务器返回，被封装到model，再传递给我们封装的无限滚动控件。当调用者通过代理方法实现回调，点击每张图片，我们会返回被点击图片对应的信息，这样调用者就可以拿到这些信息去做一些事情。
如下所示，返回了被点击图片的name和url
image
无限滚动scrollview封装
我们具体来看看如何封装一个无限滚动的uiscrollview，并实现点击事件。
下面给出了具体的实现代码，并且做了很详细的描述。
但是有两个方法比较难理解，我会单独用例子来讲解。
InfiniteRollScrollView.h文件
==================================
#import <UIKit/UIKit.h>
@class InfiniteRollScrollView;
@protocol infiniteRollScrollViewDelegate <NSObject>
@optional
/**
* 点击图片的回调事件
*
* @param scrollView 一般传self
* @param info 每张图片对应的model，由控制器使用imageModelInfoArray属性传递过来，再由该方法传递回调用者
*/
-(void)infiniteRollScrollView:(InfiniteRollScrollView*)scrollView tapImageViewInfo:(id)info;
@end
@interface InfiniteRollScrollView : UIView
/**
* 图片的信息，每张图片对应一个model，需要控制器传递过来
*/
@property (strong, nonatomic) NSMutableArray *imageModelInfoArray;
/**
* 需要显示的图片，需要控制器传递过来
*/
@property (strong, nonatomic) NSArray *imageArray;
/**
* 是否竖屏显示scrollview，默认是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
{
// 当两张图片同时显示在屏幕中，找出占屏幕比例超过一半的那张图片
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;
}
//用手开始拖拽的时候，就停止定时器，不然用户拖拽的时候，也会出现换页的情况
- (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
{
// 设置图片，三张imageview显示无限张图片
for (int i = 0; i<ImageViewCount; i++) {
UIImageView *imageView = self.scrollView.subviews[i];
NSInteger index = self.pageControl.currentPage;
/**
* 滚到第一张，并且是程序刚启动是第一次加载图片，index才减一。
加上这个判断条件，是为了防止当程序第一次加载图片时，此时第一张图片的i=0，那么此时index--导致index<0，进入下面index<0的判断条件，让第一个imageview显示的是最后一张图片
*/
if (i == 0 && self.isFirstLoadImage) {
index--;
}else if (i == 2) {//滚到最后一张图片，index加1
index++;
}
if (index < 0) {//如果滚到第一张还继续向前滚，那么就显示最后一张
index = self.pageControl.numberOfPages-1 ;
}else if (index >= self.pageControl.numberOfPages) {//滚动到最后一张的时候，由于index加了一，导致index大于总的图片个数，此时把index重置为0，所以此时滚动到最后再继续向后滚动就显示第一张图片了
index = 0;
}
imageView.tag = index;
imageView.image = self.imageArray[index];
}
self.isFirstLoadImage =YES;
// 每次滚动图片，都设置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];
//需要手动设置timer为nil，因为定时器被系统强引用了，必须手动释放
self.timer = nil;
}
#pragma mark - setter方法
- (void)setImageArray:(NSArray *)imageArray
{
_imageArray = imageArray;
// 设置页码
self.pageControl.numberOfPages = imageArray.count;
self.pageControl.currentPage = 0;
// 设置内容
[self displayImage];
// 开始定时器
[self startTimer];
}
@end
难点1、如何找出屏幕占比多的图片
在InfiniteRollScrollView.m类文件中有如下方法。该方法的作用是判断当用户拖拽图片时，两张图片同时显示在屏幕上，如果用户此时松开手，那么应该完全显示哪张图片。此时我们需要判断哪张图片占据的屏幕比例较多，就显示该张图片。
该情况如下所示：
image
实现方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
// 当两张图片同时显示在屏幕中，找出占屏幕比例超过一半的那张图片
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) {//找出最小差值对应的imageview
minDistance = distance;
page = imageView.tag;
}
}
self.pageControl.currentPage = page;
}
我们只研究横向滚动时的情况，如何找出最小distance对应的imageview
假设三个imageview 的frame的x值如下：
image1-x: 0
image2-x: 100
image3-x: 200
PS:
移动scrollview的时候，不会改变image view的frame，只会不断改变scrollview的bounds，造成scrollview上面的子控件image view的位置也跟着不断变化，从而产生了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占多，松开手应该显示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占多，松开手应该显示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占多，松开手应该显示image3
示例图如下：
image
通过上面五种情况的分析，可以看出使用上面的方法可以找出在屏幕上占比更多的imageview。
难点2、如何使用三个imageview实现无限滚动
从刚开始的示例图中可以看到有五张图片，但是只使用了三个imageview来实现循环利用。
实现代码
- (void)displayImage
{
// 设置图片，三张imageview显示无限张图片
for (int i = 0; i<ImageViewCount; i++) {
UIImageView *imageView = self.scrollView.subviews[i];
NSInteger index = self.pageControl.currentPage;
/**
* 滚到第一张，并且是程序刚启动是第一次加载图片，index才减一。
加上这个判断条件，是为了防止当程序第一次加载图片时，此时第一张图片的i=0，那么此时index--导致index<0，进入下面index<0的判断条件，让第一个imageview显示的是最后一张图片
*/
if (i == 0 && self.isFirstLoadImage) {
index--;
}else if (i == 2) {//滚到最后一张图片，index加1
index++;
}
if (index < 0) {//如果滚到第一张还继续向前滚，那么就显示最后一张
index = self.pageControl.numberOfPages-1 ;
}else if (index >= self.pageControl.numberOfPages) {//滚动到最后一张的时候，由于index加了一，导致index大于总的图片个数，此时把index重置为0，所以此时滚动到最后再继续向后滚动就显示第一张图片了
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);
}
}
先看示意图，假设我们有四张图片，要用三个imageview循环显示（更多的图片情况类似）
image
image
image
image
如此循环往复，就可以实现三个imageview显示无限张图片了。
结合上面的代码和示例图应该不难理解。
如何使用
假设我们在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"]
];
//需要显示的所有图片对应的信息，这里我们是手动添加的每张图片的信息，实际环境一般都是由服务器返回，我们再封装到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
总结：
其实上面的封装还不够完美，因为需要调用者传入需要显示的图片和图片对应的model，这需要调用者自己下载好了图片，然后传入。其实我们可以让调用者仅仅传入所有需要显示的image的model，我们帮他下载好了直接显示。
