UICollectionView: 左右滑动的一种布局

效果图如下:

效果图.gif

继承自UICollectionViewFlowLayout的自定义布局, 在系统提供的基础上进行操作

• 重写prepareLayout方法
  • 在这个方法中做一些初始化操作
  • 一定要调用[super prepareLayout];
• 重写layoutAttributesForElementsInRect:方法
  • 这个方法返回一个数组
  • 这个数组中存放的都是UICollectionViewLayoutAttributes对象
  • UICollectionViewLayoutAttributes对象决定了cell的排布方式(frame等)
• 重写shouldInvalidateLayoutForBoundsChange:方法
  • 如果返回YES, 那么collectionView显示的范围发生变化时, 就会重新刷新布局
  • 一旦刷新布局就会按顺序调用下面的方法:
    • prepareLayout
    • layoutAttributesForElementsInRect:
• 重写targetContentOffsetForProposedContentOffset:withScrollingVelocity:方法
  • 返回值决定了collectionView停止滚动时, 最终的偏移量
  • velocity: 滚动速率, 通过这个参数可以了解到滚动方向

/**
 用来做布局的初始化操作(不建议在init方法中进行布局的初始化操作)
 */
- (void)prepareLayout
{
    [super prepareLayout];
    //设置内边距
    CGFloat inset = (self.collectionView.frame.size.width - self.itemSize.width) * 0.5;
    self.sectionInset = UIEdgeInsetsMake(0, inset, 0, inset);
}

/**
 当collectionView的显示范围发生改变的时候, 是否需要重新刷新布局
 一旦重新刷新布局, 就会重新调用下面的方法
 1. prepareLayout方法
 2. layoutAttributesForElementsInRect:方法
 */
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}

/**
 这个方法的返回值是一个数组, 数组里面存放着rect范围内所有元素的布局属性
 这个方法的返回值决定了rect范围内所有元素的排布
 */
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
//    CGRect rect;
    rect.origin.y = 0;
    rect.origin.x = self.collectionView.contentOffset.x;
    rect.size = self.collectionView.frame.size;
    
    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最中心点的x值 的间距
        CGFloat delta = ABS(attrs.center.x - centerX);
        
        // 根据间距值 计算 cell的缩放比例
        CGFloat scale = 1 - delta / self.collectionView.frame.size.width;
        
        // 设置缩放比例
        attrs.transform = CGAffineTransformMakeScale(scale, scale);
    }
    
    return array;
}

/**
 这个方法的返回值, 决定了collectionView停止滚动时的偏移量

 @param proposedContentOffset 目标偏移量
 @param velocity              滚动速率, 通过这个参数可以了解滚动的方向

 @return 终点偏移位置
 */
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
    CGRect rect;
    rect.origin.y = 0;
    rect.origin.x = proposedContentOffset.x;
    rect.size = self.collectionView.frame.size;
    
    NSArray <UICollectionViewLayoutAttributes *>*array = [super layoutAttributesForElementsInRect:rect];
    
    CGFloat centerX = proposedContentOffset.x + self.collectionView.frame.size.width * 0.5;
    
    __block CGFloat min = MAXFLOAT;
    [array enumerateObjectsUsingBlock:^(UICollectionViewLayoutAttributes * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        if (ABS(min) > ABS(obj.center.x - centerX)) {
            min = obj.center.x - centerX;
        }
    }];
    proposedContentOffset.x += min;
    return proposedContentOffset;
}