常用实现轮播图的方法概述#
1、在scrollView中增加collectionView,利用collectionViewCell的循环利用机制和特殊的布局效果实现
2、在scrollView中增加三个ImageView实现轮播效果
3、在scrollView中增加二个imageView实现轮播效果
代码实现#
第一种方式：核心代码
- (NSInteger)collectionView:(UICollectionView*)collectionView numberOfItemsInSection: (NSInteger)section
{
return self.foucsArray.count *LZBFoucsTimes;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
LZBCollectionFoucsCell *cell = [LZBCollectionFoucsCell CollectionFoucsCell:collectionView WithReuseIdentifier:LZBFoucsCollectionCellID forIndexPath:indexPath];
NSInteger length = self.foucsArray.count;
cell.cellImageName =self.foucsArray[indexPath.row%length];
return cell;
}
第二种方式是三个ImageView实现
// 更新imageView上面的图片内容
for (NSInteger i = 0; i < LZBAllImageViewCount; i++) { // i是用来获取imageView的
UIImageView *imageView = self.scrollView.subviews[i];
// 根据当前页码求出imageIndex
NSInteger imageIndex = 0;
if (i == 0) { // 左边
imageIndex = self.pageControl.currentPage - 1;
if (imageIndex == -1) { // 显示最后面一张
imageIndex = self.images.count - 1;
}
} else if (i == 1) { // 中间
imageIndex = self.pageControl.currentPage;
} else if (i == 2) { // 右边
imageIndex = self.pageControl.currentPage + 1;
if (imageIndex == self.images.count) { // 显示最前面一张
imageIndex = 0;
}
}
imageView.tag = imageIndex;
// 图片数据
[self loadImage:imageIndex withImageView:imageView];
}
滚动时候计算当前索引核心代码
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
// 找出显示在最中间的imageView
UIImageView *middleImageView = nil;
// x值和偏移量x的最小差值
CGFloat minDelta = MAXFLOAT;
for (NSInteger i = 0; i < LZBAllImageViewCount; i++) {
UIImageView *imageView = self.scrollView.subviews[i];
// x值和偏移量x差值最小的imageView，就是显示在最中间的imageView
CGFloat currentDelta = 0;
currentDelta = ABS(imageView.frame.origin.x - self.scrollView.contentOffset.x);
if (currentDelta < minDelta)
{
minDelta = currentDelta;
middleImageView = imageView;
}
self.pageControl.currentPage = middleImageView.tag;
}
}
同时可以直接从github下载，readme上面有详细的方法介绍：三个imageView实现scrollView轮播图
第三种方式：之前看到别人有两个ImageView实现轮播图，看了之后感觉做得还不做就是动画效果少了一些，所以我就下载了代码进行了改进，下面是核心代码：
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat offsetX = scrollView.contentOffset.x;
[self computeCurrentPageWithOffset:offsetX];
//加载ImageView
if(offsetX < scrollView_Width * 2) //左滚动
{
switch (self.style) {
case LZBFocusScrollViewScrollStyle_Fade:
{
self.currentImageView.alpha = offsetX/scrollView_Width -1;
self.otherImageView.alpha = 2 - offsetX/scrollView_Width;
}
break;
default:
{
self.otherImageView.frame = CGRectMake(scrollView_Width, 0, scrollView_Width, scrollView_Height);
}
break;
}
self.nextIndex = self.currentIndex -1;
if(self.nextIndex < 0)
self.nextIndex = self.images.count -1;
if(offsetX <= scrollView_Width)
[self changeToNextImage];
}
else if (offsetX >scrollView_Width * 2) //右边滑动
{
switch (self.style) {
case LZBFocusScrollViewScrollStyle_Fade:
{
self.currentImageView.alpha = offsetX/scrollView_Width -2;
self.otherImageView.alpha = 3 - offsetX/scrollView_Width;
}
break;
default:
{
}
break;
}
self.otherImageView.frame = CGRectMake(CGRectGetMaxX(self.currentImageView.frame), 0, scrollView_Width, scrollView_Height);
self.nextIndex = (self.currentIndex + 1)%self.images.count;
if (offsetX >=scrollView_Width * 3 ) {
[self changeToNextImage];
}
}
if(self.imageUrls.count > 0)
{
[self.otherImageView sd_setImageWithURL:[NSURL URLWithString:self.imageUrls[self.nextIndex] ]placeholderImage:self.placeHoderImage];
}
else
{
self.otherImageView.image = self.images[self.nextIndex];
}
}
同时可以直接下载github代码使用原文两个imageView实现轮播图和我的改动加强版 两个imageView实现轮播图加强版
原理简介#
第一种方法：采用UICollectionViewLayout流水布局样式布局collectionViewCell,利用collectionViewCell的循环利用机制利用可重用的cell赋予不同的值（优点：操作简单，缺点：代码太多）
第二种方法：从当前的imageView滚动到下一个imageView，然后把下一个imageView滚动到三个imageView的中心位置，在这过程中赋值的时候是三个imageView同时赋值，滚动的时候找到距离滚动最近的一个imageView currentDelta = ABS(imageView.frame.origin.x - self.scrollView.contentOffset.x); 把这个imageView的索引设置为当前的索引，滚动完成后把这个imageView设置为中心滚动位置。
第三种方法：设置scrollViewContentSize的滚动范围是5 * scrollView_Width并且把currentImageView增加到scrollView中，并且设置currentImageView的offset.x = scrollView_Width(相当于是把currentImageView放在中间位置)，让后通过- (void)scrollViewDidScroll:(UIScrollView *)的scrollView.contentOffset.x判断滚动方向 scrollView.contentOffset.x < scrollView_Width * 2 左边滚动 otherImageView增加在右边 scrollView.contentOffset.x > scrollView_Width * 2 右边滚动 otherImageView增加在左边 滚动otherImageView之后，赋值并且设置 self.currentImageView.image = self.otherImageView.image;，在把currentView放在中间 self.scrollView.contentOffset = CGPointMake(scrollView_Width * 2, 0);
代码下载链接：
三个imageView实现：三个imageView实现scrollView轮播图
两个imageView实现（原文版）：两个imageView实现轮播图
两个imageView实现各种动画（加强版）：[两个imageView实现轮播图] 两个imageView实现轮播图加强版
最后赠言###
如果觉得文章对您有帮助，不要忘记star哦!😝，star 是对程序猿最大的鼓励！
