需求

需求

页面显示最少0行最多两行，超过两行水平方向分页显示。

效果

collectionViewGIF.gif

分析

常用功能中应用个数是不固定的，高度也是不固定的，过多时横向分页。

选择UICollectionView控件来实现，使用UICollectionViewFlowLayout布局，设置滚动方向为水平。

问题

使用UICollectionViewFlowLayout进行布局后发现页面显示为

错误布局

而我们期望的是

正确布局

解决方法

核心代码

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
    NSInteger item = indexPath.item;

    /*
     0 2 4 ---\  0 1 2
     1 3 5 ---/  3 4 5 计算转换后对应的item  原来'4'的item为4,转换后为3
     */
    NSInteger page = item / (self.itemCountPerRow * self.maxRowCount);
    // 计算目标item的位置 x 横向偏移  y 竖向偏移
    NSUInteger x = item % self.itemCountPerRow + page * self.itemCountPerRow;
    NSUInteger y = item / self.itemCountPerRow - page * self.rowCount;
    // 根据偏移量计算item
    NSInteger newItem = x * self.rowCount + y;
    NSIndexPath *newIndexPath = [NSIndexPath indexPathForItem:newItem inSection:indexPath.section];

    UICollectionViewLayoutAttributes *newAttributes = [super layoutAttributesForItemAtIndexPath:newIndexPath];
    newAttributes.indexPath = indexPath;

    return newAttributes;
}

UICollectionViewLayoutAttributes是管理collectionView中item的布局相关属性的布局对象。

我们这里通过重新设置Item对应UICollectionViewLayoutAttributes的indexPath来达到我们想要的效果，需要注意的是为了防止出现数组越界的情况这里做了使每一行Item都是“满”的处理（即Item的个数为itemCountPerRow的整数倍）。

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    NSInteger itemCount;
    if (self.dataArray.count == 0) {
        itemCount = 0;
    } else if (self.dataArray.count / (kMaxRowCount * kItemCountPerRow) > 1) {
        itemCount = kMaxRowCount * kItemCountPerRow * ceilf(self.dataArray.count / (kMaxRowCount * kItemCountPerRow));
    } else {
        itemCount = ceilf(self.dataArray.count / kItemCountPerRow) * kItemCountPerRow;
    }
    return itemCount;
}

占位

为了更好的体现，这里未对label背景颜色进行透明处理,我们可以从图中看出6、7的位置实际是返回了UICollectionViewCell。

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    CollectionViewLabelCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:[CollectionViewLabelCell description] forIndexPath:indexPath];
    
    if (indexPath.item < self.dataArray.count) {
        cell.backgroundColor = [UIColor lightGrayColor];
        cell.labelTitle.text = self.dataArray[indexPath.item];
    }else{
        cell.backgroundColor = [UIColor clearColor];
        cell.labelTitle.text = @"";
    }
    return cell;
}

demo地址:https://github.com/ABChe/HorizontallyPageableFlowLayout