FanListView - github地址
實(shí)現(xiàn)列表的滾動(dòng)縮放揉稚，本文介紹兩種方式布局秒啦，一個(gè)UIScrollView，一個(gè)UICollectionView.（如圖GIF）
listDemo.gif
效果圖片（PNG）
p1
p2.png
功能介紹
1.UIScrollView實(shí)現(xiàn)滾動(dòng)縮放
#import "FanScrollView.h"
@implementation FanScrollView
{
CGFloat listWidth,listHeight,cellWidth;
CGFloat allScal,scalWidth;
NSInteger scalCount;//中間點(diǎn)的左右可見個(gè)數(shù)余境，比如一個(gè)顯示5個(gè)，可見個(gè)數(shù)是3芳来，越大越好，不能太大
}
-(instancetype)initWithFrame:(CGRect)frame imageArray:(NSArray *)imageArray{
self=[super initWithFrame:frame];
if (self) {
self.imageArray=[imageArray mutableCopy];
listWidth=frame.size.width;
listHeight=frame.size.height;
cellWidth=(listHeight*165.0f)/220.0f;
allScal=0.8f;
scalWidth=cellWidth*1.0f;
scalCount=3;
[self configUI];
}
return self;
}
-(void)configUI{
_currentPage=0;
_backgroundScrollView=[[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, listWidth, listHeight)];
// _backgroundScrollView.bounces = NO;
// _backgroundScrollView.pagingEnabled = YES;//因?yàn)榉猪撌前腠摶蛘咦远x寬度猜拾，故不啟用
_backgroundScrollView.delegate = self;
_backgroundScrollView.userInteractionEnabled = YES;
_backgroundScrollView.showsHorizontalScrollIndicator = NO;
_backgroundScrollView.showsVerticalScrollIndicator = NO;
[_backgroundScrollView setContentSize:CGSizeMake(scalWidth*self.imageArray.count+listWidth-scalWidth, _backgroundScrollView.frame.size.height)];
[_backgroundScrollView setBackgroundColor:[UIColor colorWithRed:0.902 green:0.902 blue:0.902 alpha:1.000]];//加上顏色，讓你們看的更清楚
[self addSubview:_backgroundScrollView];
for (int i=0; i<self.imageArray.count; i++) {
UIImageView *imageView=[[UIImageView alloc]initWithFrame:CGRectMake((listWidth-cellWidth)/2+i*scalWidth, 0, cellWidth, listHeight)];
imageView.backgroundColor=[UIColor whiteColor];
imageView.image=[UIImage imageNamed:self.imageArray[i]];
imageView.layer.borderWidth=2;
imageView.layer.borderColor=[UIColor purpleColor].CGColor;
imageView.layer.cornerRadius=10;
imageView.clipsToBounds=YES;
imageView.contentMode=UIViewContentModeScaleAspectFill;
[self.backgroundScrollView addSubview:imageView];
[self.imageViewArray addObject:imageView];
if (i<=scalCount) {
imageView.transform= CGAffineTransformScale(CGAffineTransformIdentity, powf(allScal, i) ,powf(allScal, i));
}else{
imageView.transform= CGAffineTransformScale(CGAffineTransformIdentity, powf(allScal, scalCount) ,powf(allScal, scalCount));
}
}
}
#pragma mark - 時(shí)時(shí)滾動(dòng)縮放
-(void)scaleImageArrayIndex:(NSInteger)index scale:(CGFloat)scale leftScrool:(BOOL)leftScrool{
if (leftScrool) {
//往左滑動(dòng)時(shí)
if (index>=self.imageViewArray.count||index<0) {
return;
}
UIImageView *imageView=(UIImageView *)self.imageViewArray[index];
CGFloat scalXY=1-(scale*(1-allScal));
imageView.transform =CGAffineTransformScale(CGAffineTransformIdentity, scalXY, scalXY);
for (int i=0; i<scalCount; i++) {
//放大的右邊2個(gè)可見個(gè)數(shù)（scalCount）
NSInteger currentIndex=index+i+1;
if (currentIndex>=self.imageViewArray.count||currentIndex<0) {
// return;
}else{
UIImageView *imageView1=(UIImageView *)self.imageViewArray[currentIndex];
CGFloat scalXY=(allScal+(scale*0.2))*powf(allScal, i);
imageView1.transform= CGAffineTransformScale(CGAffineTransformIdentity,scalXY ,scalXY);
}
//縮小的左邊兩個(gè)
NSInteger currentIndex2=index-i-1;
if (currentIndex2>=self.imageViewArray.count||currentIndex2<0) {
// return;
}else{
UIImageView *imageView2=(UIImageView *)self.imageViewArray[currentIndex2];
CGFloat scalXY2=allScal*((1-scale*(1-allScal)))*powf(allScal, i);
imageView2.transform= CGAffineTransformScale(CGAffineTransformIdentity,scalXY2 ,scalXY2);
}
}
}else{
if (scale<0) {
//處理最左邊時(shí)顽聂，滑動(dòng)縮放異常
return;
}
if (index+1>=self.imageViewArray.count||index+1<0) {
return;
}
UIImageView *imageView=(UIImageView *)self.imageViewArray[index+1];
CGFloat scalXY=allScal+scale*(1-allScal);
imageView.transform =CGAffineTransformScale(CGAffineTransformIdentity, scalXY, scalXY);
for (int i=0; i<scalCount; i++) {
//放大的左邊2個(gè)
NSInteger currentIndex=index-i;
if (currentIndex>=self.imageViewArray.count||currentIndex<0) {
// return;
}else{
UIImageView *imageView1=(UIImageView *)self.imageViewArray[currentIndex];
CGFloat scalXY=(1-scale*(1-allScal))*powf(allScal, i);
imageView1.transform= CGAffineTransformScale(CGAffineTransformIdentity,scalXY ,scalXY);
}
//縮小的右邊兩個(gè)
NSInteger currentIndex2=index+i+2;
if (currentIndex2>=self.imageViewArray.count||currentIndex2<0) {
// return;
}else{
UIImageView *imageView2=(UIImageView *)self.imageViewArray[currentIndex2];
CGFloat scalXY2=allScal*((allScal+scale*(1-allScal)))*powf(allScal, i);
imageView2.transform= CGAffineTransformScale(CGAffineTransformIdentity,scalXY2 ,scalXY2);
}
}
}
}
//滾動(dòng)接收后刷新Frame
-(void)refreshScaleImageViewWithNOScaleIndex:(NSInteger)noScaleIndex{
UIImageView *imageView=(UIImageView *)self.imageViewArray[noScaleIndex];
imageView.transform= CGAffineTransformScale(CGAffineTransformIdentity, 1.0,1.0);
for (int i=0; i<scalCount; i++) {
NSInteger currentIndex=noScaleIndex+i+1;
if (currentIndex>=self.imageViewArray.count||currentIndex<0) {
//return;
}else{
//右邊+的View
UIImageView *imageView1=(UIImageView *)self.imageViewArray[currentIndex];
imageView1.transform= CGAffineTransformScale(CGAffineTransformIdentity, powf(allScal, i+1) ,powf(allScal, i+1));
}
NSInteger currentIndex2=noScaleIndex-i-1;
if (currentIndex2>=self.imageViewArray.count||currentIndex2<0) {
//return;
}else{
//左邊的
UIImageView *imageView2=(UIImageView *)self.imageViewArray[currentIndex2];
imageView2.transform= CGAffineTransformScale(CGAffineTransformIdentity, powf(allScal, i+1) ,powf(allScal, i+1));
}
}
}
static BOOL onlyOnePage=NO;//是否允許每次只翻一頁
#pragma mark - UIScrollViewDelegate
//該方法是拖拽將要停止時(shí)盯仪，不能放在已經(jīng)停止里面（控制自定義翻頁寬度和頁面）
-(void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset{
//MARK: 允許一下翻多頁
//targetContentOffset 滾動(dòng)偏移量紊搪，左右回彈時(shí)是0
CGFloat x = targetContentOffset->x;
CGFloat pageWidth = scalWidth;//定義每頁寬度，翻頁時(shí)按照此規(guī)則來執(zhí)行
CGFloat movedX = x - pageWidth * _currentPage;
//計(jì)算偏移量是否在-0.5<x<0.5之間全景，超過了才翻頁,超過0.5-1.5 1.5-2.5
if (movedX < -pageWidth * 0.5) {
// Move left
if (onlyOnePage) {
_currentPage--;
}else{
_currentPage-=(int)ABS((movedX+pageWidth*0.5)/pageWidth)+1;//絕對(duì)值取整
}
} else if (movedX > pageWidth * 0.5) {
// Move right
if (onlyOnePage) {
_currentPage++;
}else{
_currentPage+=(int)ABS((movedX-pageWidth*0.5)/pageWidth)+1;
}
}
//滑動(dòng)的加速度 ABS取絕對(duì)值，不取整
if (ABS(velocity.x) >= 2.0f){
targetContentOffset->x = pageWidth * _currentPage;
} else {
targetContentOffset->x = scrollView.contentOffset.x;
[scrollView setContentOffset:CGPointMake(pageWidth * _currentPage, scrollView.contentOffset.y) animated:YES];
}
// NSLog(@"將要停止頁面：%ld 頁面寬度：%f",_currentPage,pageWidth);
}
#pragma mark - scrollView delegate
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
CGPoint scOffset=scrollView.contentOffset;
NSInteger page=scOffset.x/(scalWidth);
// NSLog(@"時(shí)時(shí)滑動(dòng):%f 當(dāng)前頁:%ld",scOffset.x ,page);
CGFloat scale=((scOffset.x-page*scalWidth)/(scalWidth));
if (scOffset.x>_currentPage*scalWidth) {//必須用_currentPage
//往左滾動(dòng) 縮放從0-1
[self scaleImageArrayIndex:page scale:scale leftScrool:YES];
}else{
//往右滾動(dòng) 縮放從1-0
[self scaleImageArrayIndex:page scale:scale leftScrool:NO];
}
}
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
//停止滑動(dòng)時(shí)爸黄，刷新控件位置
[self refreshScaleImageViewWithNOScaleIndex:_currentPage];
}
-(void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView{
//停止?jié)L動(dòng)時(shí)揭鳞，刷新控件位置
[self refreshScaleImageViewWithNOScaleIndex:_currentPage];
}
#pragma mark - get set
-(void)setImageArray:(NSArray *)imageArray{
if (self.imageArray!=imageArray) {
_imageArray=nil;
}
_imageArray=[imageArray mutableCopy];
}
-(NSMutableArray *)imageViewArray{
if (_imageViewArray==nil) {
_imageViewArray=[[NSMutableArray alloc]init];
}
return _imageViewArray;
}
@end
2.UICollectionView實(shí)現(xiàn)重疊縮放滾動(dòng)翻頁
/*
用來布局縮放重疊的庫（參考：https://github.com/Tuberose621/-CollectionViewLayout-CollectionViewFlowLayout-）
* 在這個(gè)庫的基礎(chǔ)上修改部分的
*
*
*
*/
#import <UIKit/UIKit.h>
@interface FanScalCollectionViewFlowLayout : UICollectionViewFlowLayout
@property (nonatomic, assign) NSInteger page;//當(dāng)前居中的頁碼
//@property (nonatomic, assign) BOOL isScal;//是否縮放，默認(rèn)yes
@property (nonatomic, assign) BOOL isOverlap;//是否重疊梆奈，默認(rèn)YES
@end
#import "FanScalCollectionViewFlowLayout.h"
@implementation FanScalCollectionViewFlowLayout
- (instancetype)init
{
if (self = [super init]) {
// _isScal=YES;
_isOverlap=YES;
}
return self;
}
/**
* 當(dāng)collectionView的顯示范圍發(fā)生改變的時(shí)候，是否需要重新刷新布局
* 一旦重新刷新布局鉴裹，就會(huì)重新調(diào)用下面的方法：
1.prepareLayout
2.layoutAttributesForElementsInRect:方法
*/
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
return YES;
}
/**
* 用來做布局的初始化操作（不建議在init方法中進(jìn)行布局的初始化操作）
*/
- (void)prepareLayout
{
[super prepareLayout];
// self.visibleCount = 7;
// 水平滾動(dòng)
self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
// 設(shè)置內(nèi)邊距
CGFloat inset = (self.collectionView.frame.size.width - self.itemSize.width) * 0.5;
self.sectionInset = UIEdgeInsetsMake(0, inset, 0, inset);
}
/**
UICollectionViewLayoutAttributes *attrs;
1.一個(gè)cell對(duì)應(yīng)一個(gè)UICollectionViewLayoutAttributes對(duì)象
2.UICollectionViewLayoutAttributes對(duì)象決定了cell的frame
*/
/**
* 這個(gè)方法的返回值是一個(gè)數(shù)組（數(shù)組里面存放著rect范圍內(nèi)所有元素的布局屬性）
* 這個(gè)方法的返回值決定了rect范圍內(nèi)所有元素的排布（frame）
*/
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
//增加可見區(qū)域，處理移動(dòng)位置径荔，造成循環(huán)創(chuàng)建時(shí)閃現(xiàn)
rect.size.width+=self.collectionView.frame.size.width;
rect.origin.x-=self.collectionView.frame.size.width * 0.5;
// 獲得super已經(jīng)計(jì)算好的布局屬性
NSArray *array = [super layoutAttributesForElementsInRect:rect] ;
// 計(jì)算collectionView最中心點(diǎn)的x值
CGFloat centerX = self.collectionView.contentOffset.x + self.collectionView.frame.size.width * 0.5;
//獲取當(dāng)前頁碼
// NSInteger currentPage=self.collectionView.contentOffset.x/self.itemSize.width;
// NSLog(@"page:%ld === %f",currentPage, centerX);
// 在原有布局屬性的基礎(chǔ)上督禽，進(jìn)行微調(diào)
for (int i=0; i<array.count; i++) {
UICollectionViewLayoutAttributes *attrs=array[i];
// cell的中心點(diǎn)x 和 collectionView最中心點(diǎn)的x值 的間距
CGFloat delta = ABS(attrs.center.x - centerX);
CGFloat zf=1.0f;
if (attrs.center.x - centerX<0) {
zf*=-1.0f;
}
// 根據(jù)間距值 計(jì)算 cell的縮放比例(這個(gè)是根據(jù)cell離中心點(diǎn)距離多少然后處理縮放倍數(shù))
CGFloat scale = 1 - (delta/self.collectionView.frame.size.width)/2.0;
// NSLog(@"%f",scale);
// 設(shè)置縮放比例
attrs.transform = CGAffineTransformMakeScale(scale, scale);
if (_isOverlap) {
//必須四舍五入总处，處理有不到1個(gè)像素的誤差
attrs.zIndex=(NSInteger)roundf(-ABS(centerX-attrs.center.x)/self.itemSize.width);
//這里一個(gè)重點(diǎn)就是距離遠(yuǎn)近是一個(gè)曲線函數(shù)狈惫，我用平方，剛好差不多胧谈，實(shí)際項(xiàng)目如果展示更多個(gè)的話們可以修改這個(gè)函數(shù)
attrs.center=CGPointMake(attrs.center.x-zf*(1-scale)*self.itemSize.width*powf(1+(1-scale), 2), attrs.center.y);
}
}
return array;
}
/**
* 這個(gè)方法需要返回indexPath位置對(duì)應(yīng)cell的布局屬性,(好像添加cell時(shí)會(huì)調(diào)用這個(gè)方法,不過加入zIndex后，影響動(dòng)畫效果)
*/
//- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
//{
// UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
//// attrs.zIndex=-1;
// return attrs;
//}
/**
* 這個(gè)方法的返回值荸频，就決定了collectionView停止?jié)L動(dòng)時(shí)的偏移量
*/
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
//計(jì)算出最終顯示的矩形框
CGRect rect;
rect.origin.y = 0;
//proposedContentOffset滑動(dòng)偏移量
rect.origin.x = proposedContentOffset.x;
rect.size = self.collectionView.frame.size;
// 獲得super已經(jīng)計(jì)算好的布局屬性
NSArray *array = [super layoutAttributesForElementsInRect:rect];
// 計(jì)算collectionView最中心點(diǎn)的x值
CGFloat centerX = proposedContentOffset.x + self.collectionView.frame.size.width * 0.5;
// UICollectionViewLayoutAttributes *attrs=array[0];
// NSLog(@"%f=======%f======%f",proposedContentOffset.x,attrs.center.x,self.collectionView.frame.size.width * 0.5);
// 存放最小的間距值
CGFloat minDelta = MAXFLOAT;
for (UICollectionViewLayoutAttributes *attrs in array) {
// NSLog(@"1111111：%f",attrs.center.x);
if (ABS(minDelta) > ABS(attrs.center.x - centerX)) {
// NSLog(@"=%f========：%f",attrs.center.x,ABS(attrs.center.x - centerX));
//如果寬度150，大于75時(shí)旭从，會(huì)恢復(fù)到第二個(gè)cell
minDelta = attrs.center.x - centerX;
// NSLog(@"--------：%f",minDelta);
}
}
// 修改原有的偏移量 停止?jié)L動(dòng)時(shí)，滾動(dòng)的偏移量再減回去和悦，恢復(fù)到一個(gè)居中的狀態(tài)
proposedContentOffset.x += minDelta;
//四舍五入解決小數(shù)點(diǎn)誤差問題
_page=(NSInteger)roundf(proposedContentOffset.x/self.itemSize.width);
// NSLog(@"結(jié)束滑動(dòng)時(shí)：%ld == %f",_page, proposedContentOffset.x);
return proposedContentOffset;
}
@end
3.scrollView滾動(dòng)就是一個(gè)縮放的計(jì)算退疫，不過有個(gè)方法，可以自定義翻頁寬度,感覺很不錯(cuò)
static BOOL onlyOnePage=NO;//是否允許每次只翻一頁
#pragma mark - UIScrollViewDelegate
//該方法是拖拽將要停止時(shí)褒繁，不能放在已經(jīng)停止里面（控制自定義翻頁寬度和頁面）
-(void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset{
//MARK: 允許一下翻多頁
//targetContentOffset 滾動(dòng)偏移量，左右回彈時(shí)是0
CGFloat x = targetContentOffset->x;
CGFloat pageWidth = scalWidth;//定義每頁寬度馍忽，翻頁時(shí)按照此規(guī)則來執(zhí)行
CGFloat movedX = x - pageWidth * _currentPage;
//計(jì)算偏移量是否在-0.5<x<0.5之間，超過了才翻頁,超過0.5-1.5 1.5-2.5
if (movedX < -pageWidth * 0.5) {
// Move left
if (onlyOnePage) {
_currentPage--;
}else{
_currentPage-=(int)ABS((movedX+pageWidth*0.5)/pageWidth)+1;//絕對(duì)值取整
}
} else if (movedX > pageWidth * 0.5) {
// Move right
if (onlyOnePage) {
_currentPage++;
}else{
_currentPage+=(int)ABS((movedX-pageWidth*0.5)/pageWidth)+1;
}
}
//滑動(dòng)的加速度 ABS取絕對(duì)值舵匾，不取整
if (ABS(velocity.x) >= 2.0f){
targetContentOffset->x = pageWidth * _currentPage;
} else {
targetContentOffset->x = scrollView.contentOffset.x;
[scrollView setContentOffset:CGPointMake(pageWidth * _currentPage, scrollView.contentOffset.y) animated:YES];
}
// NSLog(@"將要停止頁面：%ld 頁面寬度：%f",_currentPage,pageWidth);
}
