iOS:UICollectionView流式布局及其在该布局上的扩展的线式布局

UICollectionViewFlowLayout是苹果公司做好的一种单元格布局方式,它约束item的排列规则是：从左到右依次排列,如果右边不够放下，就换一行重复上面的方式排放,,,,,

 

常用的流式布局UICollectionViewFlowLayout的属性

@property (nonatomic) CGFloat minimumLineSpacing;       //每一个item之间最小的行间距

@property (nonatomic) CGFloat minimumInteritemSpacing;//每一个item之间最小的列间距

@property (nonatomic) CGSize itemSize;              //每一个item的大小

@property (nonatomic) CGSize estimatedItemSize; //每一个item的预测大小

@property (nonatomic) UICollectionViewScrollDirection scrollDirection; // 集合视图的滚动方向,默认垂直

@property (nonatomic) CGSize headerReferenceSize; //表头视图大小

@property (nonatomic) CGSize footerReferenceSize; //表尾视图大小

@property (nonatomic) UIEdgeInsets sectionInset;    //和集合视图上下左右四边的间距

使用流式布局很简单,不需要我们做任何的操作,只需要创建它的实例,然后把它放入创建的集合视图中即可。然而，流式布局看起来比较的单一，没有很炫酷的效果。基于此，我们可以在流式布局的基础上进行一些布局的扩展，比如线式布局等。。。

下面就做一个流式布局和线式布局的切换，点击时，可以自由切换,使集合视图的item排列呈现出不同的效果，举例如下：

1、首先创建一个自定义的单元格类,并附带创建一个.xib文件，在.xib文件中设置一个UIImageView,将它IBOutLet到对应的类中

  

 

2、准备一些图片素材

3、在ImagesCell类中

.h

#import <UIKit/UIKit.h>

@interface ImagesCell : UICollectionViewCell
@property (strong,nonatomic)UIImage *image;
@end

.m

#import "ImagesCell.h"

@interface ImagesCell()
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
@end

@implementation ImagesCell

- (void)awakeFromNib {

    //设置图像视图图层的属性
    self.imageView.layer.borderWidth = 3;
    self.imageView.layer.borderColor = [[UIColor redColor]CGColor];
    self.imageView.layer.cornerRadius = 5;
    self.imageView.clipsToBounds = YES; //切割边角

}

-(void)setImage:(UIImage *)image
{
    _image = image;

    //显示图片
    [_imageView setImage:_image];
}
@end

3.在控制器类ViewController类中

#import "ViewController.h"
#import "ImagesCell.h"
#import "CustomLineLayout.h"

@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>
@property (strong,nonatomic)UICollectionView *collectionView;
@property (strong,nonatomic)NSMutableArray *images;
@end

@implementation ViewController

static NSString *const reuseIndentifier = @"image";

//懒加载
-(NSMutableArray *)images
{
    if (!_images)
    {
        _images = [NSMutableArray array];
        for (int i=1; i<=25; i++)
        {
            [_images addObject:[NSString stringWithFormat:@"clothes%d",i]];
        }
    }
    return _images;
}

- (void)viewDidLoad {
    [super viewDidLoad];

    //创建集合视图
    CGFloat width = self.view.frame.size.width;
    CGRect rect = CGRectMake(0, 100, width, 200);
    self.collectionView = [[UICollectionView alloc]initWithFrame:rect collectionViewLayout:[[CustomLineLayout alloc]init]];

    //设置数据源和代理
    self.collectionView.dataSource  = self;
    self.collectionView.delegate  = self;

    //注册单元格
    [self.collectionView registerNib:[UINib nibWithNibName:@"ImagesCell" bundle:nil] forCellWithReuseIdentifier:reuseIndentifier];

    //添加视图
   [self.view addSubview:self.collectionView];

    //UICollectionViewLayout：最根本的布局,自定义布局时，完全需要自己重新去写需要的布局
    //UICollectionViewFlowLayout ：流水布局，自定义布局时,有时可以在它的布局基础上再进行扩展布局
}

//切换布局方式
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    if ([self.collectionView.collectionViewLayout isKindOfClass:[CustomLineLayout class]])
    {
        [self.collectionView setCollectionViewLayout:[[UICollectionViewFlowLayout alloc]init] animated:YES];
    }
    else
    {
        [self.collectionView setCollectionViewLayout:[[CustomLineLayout alloc]init] animated:YES];
    }
}

#pragma mark - <UICollectionDataSourceDelegate>
//返回组数
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
}
//返回个数
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return self.images.count;
}
//显示conllectionView的单元格
-(ImagesCell*)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    //设置重用单元格

    ImagesCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIndentifier forIndexPath:indexPath];

    //设置cell的内容
    cell.image = [UIImage imageNamed:[self.images objectAtIndex:indexPath.item]];
    return cell;
}

//选中item时删除它
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    //1.先删除掉对应的模型数据
    [self.images removeObjectAtIndex:indexPath.item];

    //2.删除item(刷新UI)
    [self.collectionView deleteItemsAtIndexPaths:@[indexPath]];
}
@end

4、自定义线式布局,它继承于流式布局，即

在.m文件中设置每一个item的布局属性如下：

#import "CustomLineLayout.h"

//设置item的固定的宽和高
static const CGFloat itemWH = 100;

//设置缩放时的有效距离
static const CGFloat activeDistance = 150;

//设置缩放因数,值越大,缩放效果越明显
static const CGFloat scaleFactor = 0.6;

@implementation CustomLineLayout

//UICollectionViewLayoutAttributes:很重要,布局属性设置
//每一个cell(item)都有自己的UICollectionViewLayoutAttributes
//每一个indexPath都有自己的UICollectionViewLayoutAttributes

-(instancetype)init{
    if (self = [super init]){

    }
    return self;
}

//每一次重新布局前,都会准备布局（苹果官方推荐使用该方法进行一些初始化）
-(void)prepareLayout
{
    [super prepareLayout];

    //初始化,设置默认的item属性
    self.itemSize = CGSizeMake(itemWH, itemWH);
    self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    self.minimumLineSpacing = itemWH * scaleFactor;

    //将第一个和最后一个item始终显示在中间,即分别将它们设置到组头和组尾的距离
    CGFloat inset = (self.collectionView.frame.size.width - itemWH) / 2;
    self.sectionInset = UIEdgeInsetsMake(0, inset, 0, inset);
}

//是否要重新刷新布局(只要显示的item边界发生改变就重新布局)
//只要每一次重新布局内部就会调用下面的layoutAttributesForElementsInRect:获取所有cell(item)的属性
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}

//用来设置colectionView停止滚动时的那一刻位置,内部会自动调用
#pragma targetContentOffset : 原本colectionView停止滚动时的那一刻位置
#pragma velocity : 滚动的速率,根据正负可以判断滚动方向是向左还是向右

-(CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{

    //1.计算colectionView最终停留的位置
    CGRect lastRect;
    lastRect.origin = proposedContentOffset;
    lastRect.size = self.collectionView.frame.size;

    //2.取出这个范围内的所有item的属性
    NSArray *array = [self layoutAttributesForElementsInRect:lastRect];

    //3.计算最终屏幕的中心x
    CGFloat centerX = proposedContentOffset.x+ self.collectionView.frame.size.width/2;

    //4.遍历所有的属性,通过计算item与最终屏幕中心的最小距离,然后将item移动屏幕的中心位置
    CGFloat adjustOffsetX = MAXFLOAT;
    for (UICollectionViewLayoutAttributes *attris in array)
    {
        if (ABS(attris.center.x - centerX) < ABS(adjustOffsetX)) {

            adjustOffsetX = attris.center.x - centerX;
        }
    }

    //5.返回要移动到中心的item的位置
    return CGPointMake(proposedContentOffset.x + adjustOffsetX , proposedContentOffset.y);
}

//返回需要重新布局的所有item属性
-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    //0.计算可见的矩形框属性
    CGRect visiableRect;
    visiableRect.size = self.collectionView.frame.size;
    visiableRect.origin = self.collectionView.contentOffset;

    //1.取出默认的cell的UICollectionViewLayoutAttributes
    NSArray *array = [super layoutAttributesForElementsInRect:rect];

    //计算屏幕最中心的x(滚出去的所有的item的偏移 + collectionView宽度的一半)
    CGFloat centerX = self.collectionView.contentOffset.x + self.collectionView.frame.size.width/2;

    //2.遍历所有的布局属性
    for(UICollectionViewLayoutAttributes *attrs in array)
    {
        //如果遍历的item和可见的矩形框的frame不相交,即不e是可见的,就直接跳过,只对可见的item进行放缩
        if (!CGRectIntersectsRect(visiableRect, attrs.frame)) continue;

        //每一个item的中心x
        CGFloat itemCenterX =  attrs.center.x;

        //差距越大，缩放比例越小
        //计算每一个item的中心x和屏幕最中心x的绝对值距离，然后可以计算出缩放比例,即

        //<1>计算间距/屏幕一半时的比例,得出的数一定<1
        //CGFloat ratio = ABS(itemCenterX - centerX) / (self.collectionView.frame.size.width/2);
        //CGFloat ratio = ABS(itemCenterX - centerX) / 150;
        //<2>实现放大
        //CGFloat scale = 1 +  (1 - ratio);
        //attrs.transform3D = CATransform3DMakeScale(scale, scale, 1.0);
        //attrs.transform = CGAffineTransformMakeScale(scale, scale);

        //当item的中心x距离屏幕的中心x距离在有效距离150以内时,item才开始放大
        if (ABS(itemCenterX - centerX) <= activeDistance)
        {
            //CGFloat ratio = ABS(itemCenterX - centerX) / (self.collectionView.frame.size.width/2);
            CGFloat ratio = ABS(itemCenterX - centerX) / activeDistance;

            //<2>实现放大
            CGFloat scale = 1 +  scaleFactor*(1 - ratio);
            attrs.transform3D = CATransform3DMakeScale(scale, scale, 1.0);
            //attrs.transform = CGAffineTransformMakeScale(scale, scale);
        }
        else
        {
            attrs.transform = CGAffineTransformMakeScale(1, 1);
        }
    }
    return array;
}
@end

演示结果如下：

流式布局：                                                切换为线式布局：