說明

本文的代碼已經上傳到 GitHub 上，有興趣的童鞋可以到 GitHub 上查看，歡迎溝通交流。

https://github.com/light-bo/BLLSudokuImageLayout

需要實現的效果

用過 nice app 的童鞋應該比較熟悉，nice 對于圖片貼的顯示是根據圖片數量有 9 種不同的顯示樣式的，如下圖所示：

1 張圖的樣式

2 張圖的樣式

3 張圖的樣式

4 張圖的樣式

5 張圖的樣式

6 張圖的樣式

7 張圖的樣式

8 張圖的樣式

9 張圖的樣式

如何實現

看到上面這種顯示效果，很多人應該很容易就能想到，可以使用 UICollecitonView 來實現，不過這布局僅僅使用 UIKit 提供的 UICollectionViewFlowLayout 還是有點難以實現，看來只能借助于 UICollectionViewFlowLayout 來自定義布局了，本文采用的實現方案就是自定義一個 UICollectionViewLayout 類（繼承于 UICollectionViewFlowLayout），來達成效果。

看看代碼

自定義 layout 類

//BLLCollectionViewImageSudokuLayout.h

//繼承自 UICollectionViewFlowLayout
@interface BLLCollectionViewImageSudokuLayout : UICollectionViewFlowLayout

/**
 The intermal of each column.
 
 每一列的間距
 */
@property (nonatomic, assign) float columnMargin;

/**
 The interval of each row.
 
 每一行的間距
 */
@property (nonatomic, assign) float rowMargin;

@end

自定義布局中根據圖片的數量，計算圖片布局，這里使用策略模式，每一種布局由一個類負責。

@implementation BLLCollectionViewImageSudokuLayout

- (instancetype)init {
    self = [super init];
    if (self) {
        _attrsArray = [NSMutableArray new];
    }
    
    return self;
}

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
    return YES;
}

- (void)prepareLayout {
    [super prepareLayout];
    
    //計算所有 cell 的屬性
    [self.attrsArray removeAllObjects];
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    for (int i = 0; i<count; i++) {
        UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
        [self.attrsArray addObject:attrs];
    }
}

- (CGSize)collectionViewContentSize {
    return CGSizeMake(self.collectionView.width, self.collectionView.height);
}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect )rect {
    return self.attrsArray;
}

// 根據圖片的數量，計算圖片布局，這里使用策略模式，每一種布局由一個類負責，分別是 BLLSudokuItemLayoutAttributeAlgorithm1， BLLSudokuItemLayoutAttributeAlgorithm2， ...
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
    NSInteger itemAmount = [self.collectionView numberOfItemsInSection:0];
    
    Class algorithmClass =  NSClassFromString([NSString stringWithFormat:@"BLLSudokuItemLayoutAttributeAlgorithm%zd", itemAmount]);
    BLLSudokuItemLayoutConfigurator *layoutConfigurator = [[BLLSudokuItemLayoutConfigurator alloc] initWithAlgorithmStrategy:[algorithmClass new]];
    
    return [layoutConfigurator layoutConfigWithCollectionView:self indexPath:indexPath];
}

@end

布局算法協議

@protocol BLLSudokuItemLayoutAttributeAlgorithmProtocol <NSObject>

@required
- (UICollectionViewLayoutAttributes *)layoutConfigWithCollectionView:(BLLCollectionViewImageSudokuLayout *)collectionViewSudokuLayout indexPath:(NSIndexPath *)indexPath;

@end

布局算法基類

//BLLSudokuItemLayoutAttributeAlgorithm
@interface BLLSudokuItemLayoutAttributeAlgorithm : NSObject <BLLSudokuItemLayoutAttributeAlgorithmProtocol>

@end

具體算法子類

簡單地列出圖片數量為 4 時，算法子類的實現

//BLLSudokuItemLayoutAttributeAlgorithm4
@interface BLLSudokuItemLayoutAttributeAlgorithm4 : BLLSudokuItemLayoutAttributeAlgorithm

@end

@implementation BLLSudokuItemLayoutAttributeAlgorithm4

- (UICollectionViewLayoutAttributes *)layoutConfigWithCollectionView:(BLLCollectionViewImageSudokuLayout *)collectionViewSudokuLayout indexPath:(NSIndexPath *)indexPath {
    float width = collectionViewSudokuLayout.collectionView.width - collectionViewSudokuLayout.sectionInset.left - collectionViewSudokuLayout.sectionInset.right;
    float halfWidth = (width - collectionViewSudokuLayout.columnMargin)/2;
    float height = collectionViewSudokuLayout.collectionView.height - collectionViewSudokuLayout.sectionInset.top - collectionViewSudokuLayout.sectionInset.bottom;
    float halfHeight = (height - collectionViewSudokuLayout.rowMargin) / 2;
    
    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    attrs.frame = CGRectMake((indexPath.row % 2) * (halfWidth + collectionViewSudokuLayout.columnMargin), (indexPath.row > 1? 1: 0) * (halfHeight+collectionViewSudokuLayout.rowMargin), halfWidth, halfHeight);
    
    return attrs;
}

@end

最后，類似于常規的 UICollectionViewLayout 的使用即可

   BLLCollectionViewImageSudokuLayout *collectionViewImageSudokuLayout = [[BLLCollectionViewImageSudokuLayout alloc] init];
    collectionViewImageSudokuLayout.columnMargin = 2;
    collectionViewImageSudokuLayout.rowMargin = 2;
    
    //yourWidth：整個圖片區域的寬度  yourHeight：整個圖片區域的高度
    _mainCollectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, yourWidth, yourHeight) collectionViewLayout:collectionViewImageSudokuLayout];
    _mainCollectionView.backgroundColor = [UIColor whiteColor];
    _mainCollectionView.delegate = self;
    _mainCollectionView.dataSource = self;
    [_mainCollectionView registerClass:[BLLImageCollectionViewCell class] forCellWithReuseIdentifier:kImageCellId];
    
    [self addSubview:_mainCollectionView];