常用實(shí)現(xiàn)輪播圖的方法概述#
1、在scrollView中增加collectionView,利用collectionViewCell的循環(huán)利用機(jī)制和特殊的布局效果實(shí)現(xiàn)
2翅睛、在scrollView中增加三個(gè)ImageView實(shí)現(xiàn)輪播效果
3声搁、在scrollView中增加二個(gè)imageView實(shí)現(xiàn)輪播效果
代碼實(shí)現(xiàn)#
第一種方式：核心代碼
- (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;
}
第二種方式是三個(gè)ImageView實(shí)現(xiàn)
// 更新imageView上面的圖片內(nèi)容
for (NSInteger i = 0; i < LZBAllImageViewCount; i++) { // i是用來獲取imageView的
UIImageView *imageView = self.scrollView.subviews[i];
// 根據(jù)當(dāng)前頁碼求出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;
// 圖片數(shù)據(jù)
[self loadImage:imageIndex withImageView:imageView];
}
滾動(dòng)時(shí)候計(jì)算當(dāng)前索引核心代碼
- (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;
}
}
同時(shí)可以直接從github下載捕发，readme上面有詳細(xì)的方法介紹：三個(gè)imageView實(shí)現(xiàn)scrollView輪播圖
第三種方式：之前看到別人有兩個(gè)ImageView實(shí)現(xiàn)輪播圖疏旨，看了之后感覺做得還不做就是動(dòng)畫效果少了一些，所以我就下載了代碼進(jìn)行了改進(jìn)爬骤，下面是核心代碼：
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat offsetX = scrollView.contentOffset.x;
[self computeCurrentPageWithOffset:offsetX];
//加載ImageView
if(offsetX < scrollView_Width * 2) //左滾動(dòng)
{
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) //右邊滑動(dòng)
{
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];
}
}
同時(shí)可以直接下載github代碼使用原文兩個(gè)imageView實(shí)現(xiàn)輪播圖和我的改動(dòng)加強(qiáng)版 兩個(gè)imageView實(shí)現(xiàn)輪播圖加強(qiáng)版
原理簡(jiǎn)介#
第一種方法：采用UICollectionViewLayout流水布局樣式布局collectionViewCell,利用collectionViewCell的循環(huán)利用機(jī)制利用可重用的cell賦予不同的值（優(yōu)點(diǎn)：操作簡(jiǎn)單充石，缺點(diǎn)：代碼太多）
第二種方法：從當(dāng)前的imageView滾動(dòng)到下一個(gè)imageView，然后把下一個(gè)imageView滾動(dòng)到三個(gè)imageView的中心位置霞玄，在這過程中賦值的時(shí)候是三個(gè)imageView同時(shí)賦值骤铃，滾動(dòng)的時(shí)候找到距離滾動(dòng)最近的一個(gè)imageView currentDelta = ABS(imageView.frame.origin.x - self.scrollView.contentOffset.x); 把這個(gè)imageView的索引設(shè)置為當(dāng)前的索引，滾動(dòng)完成后把這個(gè)imageView設(shè)置為中心滾動(dòng)位置坷剧。
第三種方法：設(shè)置scrollViewContentSize的滾動(dòng)范圍是5 * scrollView_Width并且把currentImageView增加到scrollView中惰爬，并且設(shè)置currentImageView的offset.x = scrollView_Width(相當(dāng)于是把currentImageView放在中間位置)，讓后通過- (void)scrollViewDidScroll:(UIScrollView *)的scrollView.contentOffset.x判斷滾動(dòng)方向 scrollView.contentOffset.x < scrollView_Width * 2 左邊滾動(dòng) otherImageView增加在右邊 scrollView.contentOffset.x > scrollView_Width * 2 右邊滾動(dòng) otherImageView增加在左邊 滾動(dòng)otherImageView之后惫企，賦值并且設(shè)置 self.currentImageView.image = self.otherImageView.image;撕瞧，在把currentView放在中間 self.scrollView.contentOffset = CGPointMake(scrollView_Width * 2, 0);
代碼下載鏈接：
三個(gè)imageView實(shí)現(xiàn)：三個(gè)imageView實(shí)現(xiàn)scrollView輪播圖
兩個(gè)imageView實(shí)現(xiàn)（原文版）：兩個(gè)imageView實(shí)現(xiàn)輪播圖
兩個(gè)imageView實(shí)現(xiàn)各種動(dòng)畫（加強(qiáng)版）：[兩個(gè)imageView實(shí)現(xiàn)輪播圖] 兩個(gè)imageView實(shí)現(xiàn)輪播圖加強(qiáng)版
最后贈(zèng)言###
如果覺得文章對(duì)您有幫助陵叽，不要忘記star哦!??，star 是對(duì)程序猿最大的鼓勵(lì)丛版！
