collcetionView 横向分页排版(oc版)

引言

collcetionView 横向分页排版现在在App首页头部视图菜单里面用的比较多。今天分享一哈实现方法。

true.png

这种界面分分钟肯定会想到用collectionview来做，实现也很简单，但是结果你得到的会是下面这种界面（顺序完全不是你想要的）

false.png

这是collectionview横向滑动默认的布局方式，想要实现按照你想要的顺序的布局方式的话必须自定义collectionviewflowlayout子类来实现了，废话不多说直接上代码。

- (void)prepareLayout {
    [super prepareLayout];
    [self.attArray removeAllObjects];
    //定义当前行数、页数变量
    NSInteger lineNum = 1;
    NSInteger page = 0;
    //定义itemsize
    NSInteger originX = self.collectionView.bounds.size.width;
    CGFloat attWidth = (SCREEN_WIDTH - 22) / 5;
    CGFloat attHeight = (SCREEN_WIDTH - 22) / 5.5;
    
    NSInteger items = [self.collectionView numberOfItemsInSection:0];
    
    for (NSInteger i = 0; i < items; i ++) {
        NSIndexPath *index = [NSIndexPath indexPathForRow:i inSection:0];
        UICollectionViewLayoutAttributes *att = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:index];
      //因为我是一行显示5个，所以取计算5的余数，如果==0就换行，一来i = 0，所以lineNum初始值为0，从第一行开始添加
        if (i % 5 == 0) {
            lineNum = lineNum == 0 ? 1 : 0;
        }
       //超过10个就加一页，让x坐标加上页数 * collectionview宽度
        if ((NSInteger)(i / 10) >= 0) {
            page = i / 10;
        }
        //计算frame
        att.frame = CGRectMake((i % 5) * attWidth + (originX * page), lineNum * (attHeight + self.minimumInteritemSpacing) + self.sectionInset.top, attWidth, attHeight);
        
        [self.attArray addObject:att];
    }
}

- (CGSize)collectionViewContentSize {
    NSInteger items = [self.collectionView numberOfItemsInSection:0];
    NSInteger pages = 0;
    if (items % 10 == 0) {
        pages = items / 10;
    } else {
        pages = items / 10 + 1;
    }
    return CGSizeMake(CGRectGetWidth(self.collectionView.frame) * pages, 0);
}

- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
    NSMutableArray *array = [NSMutableArray array];
    for (UICollectionViewLayoutAttributes *att in self.attArray) {
        if (CGRectIntersectsRect(rect, att.frame)) {
            [array addObject:att];
        }
    }
    return array;
}