UICollectionView使用注意点

1.创建UICollectionView必须要有布局参数
2.cell必须通过注册
3.cell必须自定义,系统cell没有任何子控件，不同于tableView有label，imageview等

自定义布局:只要了解5个方法

• collectionView

• 什么时候调用:collectionView第一次布局,collectionView刷新的时候也会调用

• 作用:计算cell的布局,条件:cell的位置是固定不变

• (void)prepareLayout;

• 作用:指定一段区域给你这段区域内cell的尺寸可以一次性返回所有cell尺寸,也可以每隔一个距离返回cell

 - (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;

• Invalidate:刷新在滚动的时候是否允许刷新布局

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds;

什么时候调用:用户手指一松开就会调用作用:确定最终偏移量定位:距离中心点越近,这个cell最终展示到中心点

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

• 计算collectionView滚动范围
  - (CGSize)collectionViewContentSize;

自定义流水布局代码

难点：距离中心点距离为collectionView宽度的一半时图片缩小，在中心点处就会有放大的效果（其实是原图大小，只是之前缩小了）
3.1、求cell距离中心点距离 = cell的中心-手动离开时的偏移量- collectionView宽度的一半。
3.2、距离中心点距离和collectionView宽度的一半作比较，值越大越远图片才会越小，设置缩放比例关系
3.3、当用户手指滑动较快时，会有一段时间的缓冲距离、滑动停止后、放大距离中心点最近的cell
距离中心点距离= cell的中心-最终偏移量-collectionView宽度的一半，然后比较距离大小，设置最终偏移

@implementation FlowLayout

/*

 UICollectionViewLayoutAttributes:确定cell的尺寸

 一个UICollectionViewLayoutAttributes对象就对应一个cell

 拿到UICollectionViewLayoutAttributes相当于拿到cell

 */

// 作用:指定一段区域给你这段区域内cell的尺寸

// 可以一次性返回所有cell尺寸,也可以每隔一个距离返回cell

- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{

//    NSLog(@"%s",__func__);

    // 设置cell尺寸 => UICollectionViewLayoutAttributes

    // 越靠近中心点,距离越小,缩放越大

    // 求cell与中心点距离

    

    // 1.获取当前显示cell的布局

    NSArray *attrs = [super layoutAttributesForElementsInRect:self.collectionView.bounds];

    

    for (UICollectionViewLayoutAttributes *attr in attrs) {

        

        // 2.计算中心点距离

      CGFloat delta = fabs((attr.center.x - self.collectionView.contentOffset.x) - self.collectionView.bounds.size.width * 0.5);

        

        // 3.计算比例

        CGFloat scale = 1 - delta / (self.collectionView.bounds.size.width * 0.5) * 0.25;

        attr.transform = CGAffineTransformMakeScale(scale, scale);

    }

    

    return attrs;

    

}

// 什么时候调用:用户手指一松开就会调用

// 作用:确定最终偏移量

// 定位:距离中心点越近,这个cell最终展示到中心点

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

    // 拖动比较快 最终偏移量 不等于 手指离开时偏移量

    CGFloat collectionW = self.collectionView.bounds.size.width;

    

    // 最终偏移量

    CGPoint targetP = [super targetContentOffsetForProposedContentOffset:proposedContentOffset withScrollingVelocity:velocity];

    

    // 0.获取最终显示的区域

    CGRect targetRect = CGRectMake(targetP.x, 0, collectionW, MAXFLOAT);

    

     // 1.获取最终显示的cell

    NSArray *attrs = [super layoutAttributesForElementsInRect:targetRect];

    

    // 获取最小间距

    CGFloat minDelta = MAXFLOAT;

    for (UICollectionViewLayoutAttributes *attr in attrs) {

        // 获取距离中心点距离:注意:应该用最终的x

        CGFloat delta = (attr.center.x - targetP.x) - self.collectionView.bounds.size.width * 0.5;

        

        if (fabs(delta) < fabs(minDelta)) {

            minDelta = delta;

        }

    }

    // 移动间距

    targetP.x += minDelta;

    

    if (targetP.x < 0) {

        targetP.x = 0;

    }

    

    return targetP;

}

// Invalidate:刷新

// 在滚动的时候是否允许刷新布局

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{

    return YES;

}

四、自定义流水布局效果图

a67d50a8-9ced-4b71-86e7-3d6327d7e845.png