OC之利用UICollectionView实现瀑布流之左对齐或右对齐

点击下载Demo

我们知道UICollectionView的属性minimumInteritemSpacing可以设置同一行的项之间的最小间距；这个间距用来计算在一行中可以容纳多少项，但是在确定了项的数量之后，实际的间距可能会向上调整。最终的结果就是UICollectionViewCell在UICollectionView两边对齐。

但是在实际开发中，经常遇到UICollectionViewCell左对齐或者右对齐的需求，这时就需要我们继承UICollectionViewFlowLayout类，重写-layoutAttributesForElementsInRect:方法

我们不妨创建一个UICollectionViewFlowLayout的子类UICollectionViewCellAlignmentFlowLayout，具体实现如下代码所示：

typedef NS_ENUM(NSUInteger,UICollectionViewCellAlignmentType) {
    UICollectionViewCellAlignmentTypeDefault = 0,//默认两边对齐
    UICollectionViewCellAlignmentTypeLeft,//左对齐
    UICollectionViewCellAlignmentTypeRight//右对齐
};

@interface UICollectionViewCellAlignmentFlowLayout : UICollectionViewFlowLayout

@property(nonatomic ,assign ,readwrite) UICollectionViewCellAlignmentType cellAlignmentType;
@property(nonatomic ,assign ,readwrite) CGFloat cellAlignmentSpace;

@end



@implementation UICollectionViewCellAlignmentFlowLayout

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSArray *superArray = [super layoutAttributesForElementsInRect:rect];
    
    if (self.cellAlignmentType == UICollectionViewCellAlignmentTypeLeft){
        [superArray enumerateObjectsUsingBlock:^(UICollectionViewLayoutAttributes * _Nonnull layoutAttributes, NSUInteger idx, BOOL * _Nonnull stop) {
            
            if (idx > 0){
                UICollectionViewLayoutAttributes *prevLayoutAttributes = superArray[idx - 1];
                if (CGRectGetMaxX(prevLayoutAttributes.frame) + CGRectGetWidth(layoutAttributes.frame) + self.cellAlignmentSpace < self.collectionViewContentSize.width){
                    CGRect currentFrame = layoutAttributes.frame;
                    currentFrame.origin.x = CGRectGetMaxX(prevLayoutAttributes.frame) + self.cellAlignmentSpace;
                    layoutAttributes.frame = currentFrame;
                }else{
                    CGRect currentFrame = layoutAttributes.frame;
                    currentFrame.origin.x = 0;
                    layoutAttributes.frame = currentFrame;
                }
            }else{
                CGRect currentFrame = layoutAttributes.frame;
                currentFrame.origin.x = 0;
                layoutAttributes.frame = currentFrame;
            }
        }];
        
    }
    else if (self.cellAlignmentType == UICollectionViewCellAlignmentTypeRight)//右对齐
    {
        [superArray enumerateObjectsUsingBlock:^(UICollectionViewLayoutAttributes * _Nonnull layoutAttributes, NSUInteger idx, BOOL * _Nonnull stop) {
            
            if (idx > 0){
                UICollectionViewLayoutAttributes *prevLayoutAttributes = superArray[idx - 1];
                
                if (CGRectGetWidth(layoutAttributes.frame) + self.minimumInteritemSpacing < prevLayoutAttributes.frame.origin.x){
                    CGRect currentFrame = layoutAttributes.frame;
                    currentFrame.origin.x = prevLayoutAttributes.frame.origin.x - self.minimumInteritemSpacing - CGRectGetWidth(currentFrame);
                    layoutAttributes.frame = currentFrame;
                }else{
                    CGRect currentFrame = layoutAttributes.frame;
                    currentFrame.origin.x = self.collectionViewContentSize.width - CGRectGetWidth(currentFrame);
                    layoutAttributes.frame = currentFrame;
                }
            }else{
                CGRect currentFrame = layoutAttributes.frame;
                currentFrame.origin.x = self.collectionViewContentSize.width - CGRectGetWidth(currentFrame);
                layoutAttributes.frame = currentFrame;
            }
        }];
    }
    return superArray;
}

@end

我们不妨利用上述的UICollectionViewCellAlignmentFlowLayout来写一个左对齐的例子：

UICollectionViewCellAlignmentFlowLayout *flowLayout = [[UICollectionViewCellAlignmentFlowLayout alloc] init];
flowLayout.minimumLineSpacing = 10;
flowLayout.cellAlignmentType = UICollectionViewCellAlignmentTypeLeft;
flowLayout.cellAlignmentSpace = 16;

通过设置cellAlignmentType来设置对齐方式，cellAlignmentSpace来设置单元格间距，效果如下所示：

左对齐.png

点击下载Demo