前言

最近在做标签选择页的时候碰到这样一个需求，一页显示8个标签，超过时显示多页的效果。一开始本人信心满满的使用UICollectionView，并调整了scrollDirection为UICollectionViewScrollDirectionHorizontal，发现基本满足需求。但是在标签个数为5个时候的出现了问题，右半边出现了空白。因为UICollectionView调整为横向滚动后，数据的填充的方式就改变了。如下图：

image.png

可以发现数据的填充方式变为了从上往下，显然与我们需要的从左往右的方式不符。
为了解决这个问题，我们需要自定义UICollectionViewFlowLayout。

首先

创建子类继承自UICollectionViewFlowLayout。

///.h
@interface LiveBroadcastHeadFlowLayout : UICollectionViewFlowLayout

@end
///.m
#import "LiveBroadcastHeadFlowLayout.h"

@interface LiveBroadcastHeadFlowLayout ()

//一行中cell的个数
@property(nonatomic, assign)NSUInteger itemCountPerRow;
//一页显示多少行
@property(nonatomic, assign)NSUInteger rowCount;
//一页计划设置显示多少行
@property(nonatomic, assign)NSUInteger rowPlanCount;

@end

主要通过下面这4个方法，对自定义UICollectionViewFlowLayout进行定制操作。

///子类可以重写它，并使用它来设置数据结构或执行稍后执行布局所需的任何初始计算。
-(void)prepareLayout;
///滚动范围
-(CGSize)collectionViewContentSize;
///子类必须重写此方法，并使用它返回视图与指定矩形相交的所有项的布局信息。
-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect;
///子类必须重写此方法并使用它返回集合视图中项的布局信息。即修改x，y坐标
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath*)indexPath;

接着

在- (void)prepareLayout;方法中设置一行要显示的个数，及一页要显示的行数，本文以4*2为例：

- (void)prepareLayout
{
    [super prepareLayout];

    self.itemCountPerRow = 4;
    self.rowPlanCount = 2;
}

在- (CGSize)collectionViewContentSize;方法中对滚动范围进行计算：

///滚动范围
- (CGSize)collectionViewContentSize {
    CGSize size = CGSizeZero;
    NSInteger itemCount = 0;
    if ([self.collectionView.dataSource respondsToSelector:@selector(collectionView:numberOfItemsInSection:)]) {
        itemCount = [self.collectionView.dataSource collectionView:self.collectionView numberOfItemsInSection:0];
    }
    if (CGSizeEqualToSize(size, CGSizeZero) && itemCount == 0) {
        return CGSizeZero;
    }
    /// 解决只有一行时布局错乱的问题,  感谢指出问题
    if (itemCount <= self.itemCountPerRow) {
      itemCount = self.itemCountPerRow + 1;
    }
    self.rowCount = (itemCount * 1.0 / self.itemCountPerRow)<=1?1:2;

    //宽度按整个collectionView的宽度取超过一页按两页算
    size.width = ceilf(itemCount* 1.0 / (self.itemCountPerRow * self.rowPlanCount)) * self.collectionView.width;
    
    return size;
}

在- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect;方法中返回我们自定义的布局信息：

///子类必须重写此方法，并使用它返回视图与指定矩形相交的所有项的布局信息。
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    //获取UICollectionViewFlowLayout重写的相关排列
    NSArray *attributes = [super layoutAttributesForElementsInRect:rect];

    NSMutableArray *newAttributes = [NSMutableArray array];
    for(NSUInteger i = 0; i < attributes.count; i++) {
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];

        UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:indexPath];
        [newAttributes addObject:attributes];
    }
    
    return newAttributes;
}

在- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath*)indexPath;方法中对计算得到偏移后将要替换的item对象进行indexPath交换

///子类必须重写此方法并使用它返回集合视图中项的布局信息。即修改x，y坐标
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath*)indexPath
{
    NSUInteger item = indexPath.item;

    NSUInteger x;

    NSUInteger y;
    //计算向右，向下偏移的位置
    //目标布局
    //0-1-2-3  08-09-10-11
    //4-5-6-7  12-13-14-15
    [self targetPositionWithItem:item resultX:&x resultY:&y];
    //根据偏移量计算新的位置
    //                      (x,y)
    //原布局                 (0,0),(1,0),(2,0),(3,0)   (4,0),(5,0), (6,0),  (7,0)
    //0-2-4-6  8-10-12-14   0->0, 1->2, 2->4, 3->6    8->8, 9->10, 10->12, 11->14
    //                      (0,1),(1,1),(2,1),(3,1)   (4,1),(5,1),   (6,1)   (7,1)
    //1-3-5-7  9-11-13-15   4->1, 5->3, 6->5, 7->7    12->9, 13->11, 14->13, 15->15
    //根据偏移量计算将被替换的item
    NSUInteger item2 = [self originItemAtX:x y:y];

    //取得将被替换的item的indexPath
    NSIndexPath *theNewIndexPath = [NSIndexPath indexPathForItem:item2 inSection:indexPath.section];
    //取得将被替换的item的Attributes信息
    UICollectionViewLayoutAttributes *theNewAttr = [super layoutAttributesForItemAtIndexPath:theNewIndexPath];
    //交换取得的item的indexPath为当前indexPath
    theNewAttr.indexPath = indexPath;

    return theNewAttr;
}

计算x，y方向的偏移

///根据item计算目标item的位置
/// x横向偏移y竖向偏移
- (void)targetPositionWithItem:(NSUInteger)item resultX:(NSUInteger *)x resultY:(NSUInteger *)y
{
    // 页数 = 当前顺序 / （一行个数 * 行数 ）
    NSUInteger page = item / (self.itemCountPerRow * self.rowCount);
    // x坐标 = 当前顺序 % 一行个数 + 页数 * 一行个数
    NSUInteger theX = item % self.itemCountPerRow + page * self.itemCountPerRow;
    // y坐标 = 当前顺序 / 一行个数 - 页数 * 行数
    NSUInteger theY = item / self.itemCountPerRow - page * self.rowCount;

    if(x != NULL) {
        *x = theX;
    }

    if(y != NULL) {
        *y = theY;
    }
}

得到将要替换的item

///根据偏移量计算item
- (NSUInteger)originItemAtX:(NSUInteger)x y:(NSUInteger)y
{
    //新的顺序 = x偏移 * 行数 + y偏移
    NSUInteger item = x * self.rowCount + y;
    return item;
}

至此

完成了将数据的填充方式变为从左往右。得到如下图的效果：

image.png

Demo
链接: https://pan.baidu.com/s/1qgBrtFV53S8iTSMLo-N1iA 提取码: rbve