iOS UICollectionView横向滑动并且横向加载数据

时间:2021-6-7 作者:qvyue

前言

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

iOS 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;
    }
    
    self.rowCount = (itemCount * 1.0 / self.itemCountPerRow)

计算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;
    }
}

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

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

    NSMutableArray *newAttributes = [NSMutableArray array];
    for(NSUInteger i = 0; i 

- (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;
}

得到将要替换的item

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

至此

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

iOS UICollectionView横向滑动并且横向加载数据
image.png

参考文章和源码:
怎样让collectionView横向滑动并且横向加载数据

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。