FanListView

实现列表的滚动缩放，本文介绍两种方式布局，一个UIScrollView，一个UICollectionView.（如图GIF）

效果图片（PNG）

功能介绍

1.UIScrollView实现滚动缩放

#import "FanScrollView.h"

@implementation FanScrollView
{
    CGFloat listWidth,listHeight,cellWidth;
    CGFloat allScal,scalWidth;
    NSInteger scalCount;//中间点的左右可见个数，比如一个显示5个，可见个数是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;//因为分页是半页或者自定义宽度，故不启用
    _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 - 时时滚动缩放
-(void)scaleImageArrayIndex:(NSInteger)index scale:(CGFloat)scale leftScrool:(BOOL)leftScrool{
    
    if (leftScrool) {
        //往左滑动时
        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个可见个数（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);
            }
            //缩小的左边两个
            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) {
            //处理最左边时，滑动缩放异常
            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个
            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);
             
            }
            //缩小的右边两个
            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);
            }
        }
    }
    
}
//滚动接收后刷新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
//该方法是拖拽将要停止时，不能放在已经停止里面（控制自定义翻页宽度和页面）
-(void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset{
    
    //MARK: 允许一下翻多页
    //targetContentOffset 滚动偏移量，左右回弹时是0
    CGFloat x = targetContentOffset->x;
    CGFloat pageWidth = scalWidth;//定义每页宽度，翻页时按照此规则来执行
    CGFloat movedX = x - pageWidth * _currentPage;
    //计算偏移量是否在-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;//绝对值取整
        }
    } else if (movedX > pageWidth * 0.5) {
        // Move right
        if (onlyOnePage) {
            _currentPage++;
        }else{
            _currentPage+=(int)ABS((movedX-pageWidth*0.5)/pageWidth)+1;
        }
        
    }
    //滑动的加速度 ABS取绝对值，不取整
    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(@"时时滑动:%f   当前页:%ld",scOffset.x ,page);

    CGFloat scale=((scOffset.x-page*scalWidth)/(scalWidth));
    if (scOffset.x>_currentPage*scalWidth) {//必须用_currentPage
        //往左滚动 缩放从0-1
        [self scaleImageArrayIndex:page scale:scale leftScrool:YES];
    }else{
        //往右滚动 缩放从1-0
        [self scaleImageArrayIndex:page scale:scale leftScrool:NO];
    }
}

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    //停止滑动时，刷新控件位置
    [self refreshScaleImageViewWithNOScaleIndex:_currentPage];
}
-(void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView{
    //停止滚动时，刷新控件位置
    [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实现重叠缩放滚动翻页

/*
    用来布局缩放重叠的库（参考：https://github.com/Tuberose621/-CollectionViewLayout-CollectionViewFlowLayout-）
 *  在这个库的基础上修改部分的
 *
 *
 *
 */


#import <UIKit/UIKit.h>

@interface FanScalCollectionViewFlowLayout : UICollectionViewFlowLayout

@property (nonatomic, assign) NSInteger page;//当前居中的页码
//@property (nonatomic, assign) BOOL isScal;//是否缩放，默认yes
@property (nonatomic, assign) BOOL isOverlap;//是否重叠，默认YES

@end


#import "FanScalCollectionViewFlowLayout.h"

@implementation FanScalCollectionViewFlowLayout
- (instancetype)init
{
    if (self = [super init]) {
//        _isScal=YES;
        _isOverlap=YES;
    }
    return self;
}

/**
 * 当collectionView的显示范围发生改变的时候，是否需要重新刷新布局
 * 一旦重新刷新布局，就会重新调用下面的方法：
 1.prepareLayout
 2.layoutAttributesForElementsInRect:方法
 */
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}
/**
 * 用来做布局的初始化操作（不建议在init方法中进行布局的初始化操作）
 */
- (void)prepareLayout
{
    [super prepareLayout];
    //    self.visibleCount = 7;
    // 水平滚动
    self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    // 设置内边距
    CGFloat inset = (self.collectionView.frame.size.width - self.itemSize.width) * 0.5;
    self.sectionInset = UIEdgeInsetsMake(0, inset, 0, inset);
}

/**
 UICollectionViewLayoutAttributes *attrs;
 1.一个cell对应一个UICollectionViewLayoutAttributes对象
 2.UICollectionViewLayoutAttributes对象决定了cell的frame
 */
/**
 * 这个方法的返回值是一个数组（数组里面存放着rect范围内所有元素的布局属性）
 * 这个方法的返回值决定了rect范围内所有元素的排布（frame）
 */
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    //增加可见区域，处理移动位置，造成循环创建时闪现
    rect.size.width+=self.collectionView.frame.size.width;
    rect.origin.x-=self.collectionView.frame.size.width * 0.5;
    // 获得super已经计算好的布局属性
    NSArray *array = [super layoutAttributesForElementsInRect:rect] ;
    // 计算collectionView最中心点的x值
    CGFloat centerX = self.collectionView.contentOffset.x + self.collectionView.frame.size.width * 0.5;
    
    //获取当前页码
    //    NSInteger currentPage=self.collectionView.contentOffset.x/self.itemSize.width;
    //    NSLog(@"page:%ld   ===   %f",currentPage, centerX);
    
    // 在原有布局属性的基础上，进行微调
    for (int i=0; i<array.count; i++) {
        UICollectionViewLayoutAttributes *attrs=array[i];
        // cell的中心点x 和 collectionView最中心点的x值 的间距
        CGFloat delta = ABS(attrs.center.x - centerX);
        CGFloat zf=1.0f;
        if (attrs.center.x - centerX<0) {
            zf*=-1.0f;
        }
        // 根据间距值 计算 cell的缩放比例(这个是根据cell离中心点距离多少然后处理缩放倍数)
        CGFloat scale = 1 - (delta/self.collectionView.frame.size.width)/2.0;
//        NSLog(@"%f",scale);
        // 设置缩放比例
        attrs.transform = CGAffineTransformMakeScale(scale, scale);
        if (_isOverlap) {
            //必须四舍五入，处理有不到1个像素的误差
            attrs.zIndex=(NSInteger)roundf(-ABS(centerX-attrs.center.x)/self.itemSize.width);
            //这里一个重点就是距离远近是一个曲线函数，我用平方，刚好差不多，实际项目如果展示更多个的话们可以修改这个函数
            attrs.center=CGPointMake(attrs.center.x-zf*(1-scale)*self.itemSize.width*powf(1+(1-scale), 2), attrs.center.y);
          
        }
        
    }
    return array;
}

/**
 * 这个方法需要返回indexPath位置对应cell的布局属性,(好像添加cell时会调用这个方法,不过加入zIndex后，影响动画效果)
 */
//- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
//{
//    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
////    attrs.zIndex=-1;
//    return attrs;
//}


/**
 * 这个方法的返回值，就决定了collectionView停止滚动时的偏移量
 
 */
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
    //计算出最终显示的矩形框
    CGRect rect;
    rect.origin.y = 0;
    //proposedContentOffset滑动偏移量
    rect.origin.x = proposedContentOffset.x;
    rect.size = self.collectionView.frame.size;
    // 获得super已经计算好的布局属性
    NSArray *array = [super layoutAttributesForElementsInRect:rect];
    // 计算collectionView最中心点的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时，会恢复到第二个cell
            minDelta = attrs.center.x - centerX;
            //            NSLog(@"--------：%f",minDelta);
        }
    }
    // 修改原有的偏移量 停止滚动时，滚动的偏移量再减回去，恢复到一个居中的状态
    proposedContentOffset.x += minDelta;
    //四舍五入解决小数点误差问题
    _page=(NSInteger)roundf(proposedContentOffset.x/self.itemSize.width);
//    NSLog(@"结束滑动时：%ld   ==   %f",_page, proposedContentOffset.x);
    return proposedContentOffset;
}

@end

3.scrollView滚动就是一个缩放的计算，不过有个方法，可以自定义翻页宽度,感觉很不错

static BOOL onlyOnePage=NO;//是否允许每次只翻一页
#pragma mark - UIScrollViewDelegate
//该方法是拖拽将要停止时，不能放在已经停止里面（控制自定义翻页宽度和页面）
-(void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset{
    
    //MARK: 允许一下翻多页
    //targetContentOffset 滚动偏移量，左右回弹时是0
    CGFloat x = targetContentOffset->x;
    CGFloat pageWidth = scalWidth;//定义每页宽度，翻页时按照此规则来执行
    CGFloat movedX = x - pageWidth * _currentPage;
    //计算偏移量是否在-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;//绝对值取整
        }
    } else if (movedX > pageWidth * 0.5) {
        // Move right
        if (onlyOnePage) {
            _currentPage++;
        }else{
            _currentPage+=(int)ABS((movedX-pageWidth*0.5)/pageWidth)+1;
        }
        
    }
    //滑动的加速度 ABS取绝对值，不取整
    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);
}

fanxiangyang / fanlistview Goto Github PK

fanlistview's Introduction

FanListView

实现列表的滚动缩放，本文介绍两种方式布局，一个UIScrollView，一个UICollectionView.（如图GIF）

效果图片（PNG）

功能介绍

1.UIScrollView实现滚动缩放

2.UICollectionView实现重叠缩放滚动翻页

3.scrollView滚动就是一个缩放的计算，不过有个方法，可以自定义翻页宽度,感觉很不错

Like(喜欢)

有问题请直接在文章下面留言,喜欢就给个Star(小星星)吧！

Email:[email protected]

Email:[email protected][email protected]

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent