UICollectionView布局详解

最新推荐文章于 2024-06-05 09:54:28 发布

唐枫

最新推荐文章于 2024-06-05 09:54:28 发布

阅读量1.3k

点赞数

分类专栏： Objective-C学习总结文章标签： Object--c UICollect 瀑布流 flowLayout

本文链接：https://blog.csdn.net/u013136306/article/details/49632783

版权

本文详细介绍了使用UICollectionView实现线性布局、图片环形效果、堆形布局和瀑布流效果的步骤与关键代码。通过自定义UICollectionViewLayout，实现各种创新布局，并提供了GitHub源代码供参考。

摘要由CSDN通过智能技术生成

1、UICollectionViewController作为一个功能强大的UI控制器，在当下的开发中占据了很大的地位，在很多的应用中都可以找到他的身影。那么接下来我们就来详细演练一下他的几种用法。

一、实现线性布局的相册效果
这里写图片描述

1、首先分析可以知道，一般情况这种的线性布局我们布局直接去继承 UICollectionViewLayout的流水式布局UICollectionViewFlowLayout 就可以快速的实现，

注意点：
只有 UICollectionViewFlowLayout 可以去设置图片的滚动方向
//设置滚动方向
self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
UICollectionViewLayout是没有这个属性的。

核心代码：

//准备布局
- (void)prepareLayout{

    // 必须 调用父类
    [super prepareLayout];

    //设置滚动方向
    self.scrollDirection = UICollectionViewScrollDirectionHorizontal;

    //设置cell 的大小
    CGFloat itemWH = self.collectionView.frame.size.height  * 0.7;

    self.itemSize = CGSizeMake(itemWH, itemWH);

    //设置内边距
    CGFloat inset = (self.collectionView.frame.size.width - self.itemSize.width) * 0.5;

    self.sectionInset = UIEdgeInsetsMake(0, inset, 0, inset);
}

/**
 * 返回CollectionView 上面 所有元素的布局属性
 */
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {

    // 调用父类方法 拿到默认的布局 属性
    NSArray *array = [super layoutAttributesForElementsInRect:rect];

    //获得CollectionView中点 的x值
    CGFloat centerX = self.collectionView.contentOffset.x + self.collectionView.frame.size.width * 0.5;

    //在默认的布局属相的基础上进行 调整
    for (UICollectionViewLayoutAttributes *attrs in array) {

        // 计算 cell 中点 x 到 CollectionvIEW Z的值
        CGFloat delta = ABS(attrs.center.x - centerX);

        // 根据距离计算缩放比例  成反比

        CGFloat scale = 1 - delta / (self.collectionView.frame.size.width + self.itemSize.width);

        attrs.transform = CGAffineTransformMakeScale(scale, scale);

    }
    return array;
}


// 当 CollectionView 的bounds 发生变化 的时候刷新
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{
    return YES;
}

/**
 * 获得最终的偏移量
 */

- (