已更新Demo(2017-8-8)：
https://pan.baidu.com/s/1bDXrYI
不放github了

下面這種需求應該是會經常遇到的：
需求：固定高度一個區域，里面左右分頁顯示很多個圖標，在每一頁中的圖標先從左往右排，排滿后再從上往下排。這一頁排滿后排下一頁。
圖中這樣的：上面cell的順序我已經標出來了。

p1.png

像這樣的需求，第一反應是用UICollectionView來寫，用UICollectionViewFlowLayout，然后設置為橫向的。但是，采用這種方式來寫，出來的效果就會是這樣的：

p2.png

那么還可以怎么實現？可以用大的cell包5個小圖標在里面。這樣實現按說沒問題，但是如果單個圖標這里復雜一點，就需要調很久了，而且如果要根據屏幕尺寸來定每行顯示的圖標個數也很麻煩。

下面是我的實現：

子類化 UICollectionViewFlowLayout

DDCollectionViewHorizontalLayout.h
@interface DDCollectionViewHorizontalLayout : UICollectionViewFlowLayout
// 一行中 cell的個數
@property (nonatomic) NSUInteger itemCountPerRow;
// 一頁顯示多少行
@property (nonatomic) NSUInteger rowCount;
@end

DDCollectionViewHorizontalLayout.m
@interface DDCollectionViewHorizontalLayout ()
@property (strong, nonatomic) NSMutableArray *allAttributes;
@end
- (void)prepareLayout
{
    [super prepareLayout];

    self.allAttributes = [NSMutableArray array];

    NSUInteger count = [self.collectionView numberOfItemsInSection:0];
    for (NSUInteger i = 0; i<count; i++) {
       NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:indexPath];
        [self.allAttributes addObject:attributes];
    }
}

- (CGSize)collectionViewContentSize
{
    return [super collectionViewContentSize];
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSUInteger item = indexPath.item;
    NSUInteger x;
    NSUInteger y;
    [self targetPositionWithItem:item resultX:&x resultY:&y];
    NSUInteger item2 = [self originItemAtX:x y:y];
    NSIndexPath *theNewIndexPath = [NSIndexPath indexPathForItem:item2 inSection:indexPath.section];

    UICollectionViewLayoutAttributes *theNewAttr = [super layoutAttributesForItemAtIndexPath:theNewIndexPath];
    theNewAttr.indexPath = indexPath;
    return theNewAttr;
}

- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSArray *attributes = [super layoutAttributesForElementsInRect:rect];

    NSMutableArray *tmp = [NSMutableArray array];

    for (UICollectionViewLayoutAttributes *attr in attributes) {
        for (UICollectionViewLayoutAttributes *attr2 in self.allAttributes) {
            if (attr.indexPath.item == attr2.indexPath.item) {
                [tmp addObject:attr2];
                break;
            }
        }
    }
    return tmp;
}

// 根據 item 計算目標item的位置
// x 橫向偏移  y 豎向偏移
- (void)targetPositionWithItem:(NSUInteger)item
                       resultX:(NSUInteger *)x
                       resultY:(NSUInteger *)y
{
    NSUInteger page = item/(self.itemCountPerRow*self.rowCount);

    NSUInteger theX = item % self.itemCountPerRow + page * self.itemCountPerRow;
    NSUInteger theY = item / self.itemCountPerRow - page * self.rowCount;
    if (x != NULL) {
        *x = theX;
    }
    if (y != NULL) {
        *y = theY;
    }
}

// 根據偏移量計算item
- (NSUInteger)originItemAtX:(NSUInteger)x
                          y:(NSUInteger)y
{
    NSUInteger item = x * self.rowCount + y;
    return item;
}

@end

需要注意的

我這個簡單的實現只支持1個section，而且section的items個數必須是 itemCountPerRow * rowCount 的整數倍。這里需要在UICollectionView的代理里面做好數組越界檢查，防止數組越界造成崩潰。
完整的實現以后再說吧，現在這樣已經滿足需求了。