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

Posted 2023-04-15

参考技术A

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

                                          

 可以发现数据的填充方式变为了从上往下，显然与我们需要的从左往右的方式不符。

   为了解决这个问题，我们需要自定义UICollectionViewFlowLayout。

  

 创建子类继承自 UICollectionViewFlowLayout 。

  

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

  

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

  

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

  

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

  

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

  

 计算x，y方向的偏移

  

 得到将要替换的 item 

  

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

   

                                          

 

  

 Demo

   链接:  https://pan.baidu.com/s/1qgBrtFV53S8iTSMLo-N1iA

  提取码: rbve

iOS8 UICollectionView横向滑动demo

在iOS8中，scrollView和加载在它上面的点击事件会有冲突，所以做一个横向滑动的界面最好的选择就是UICollectionView。

这个效果可以用苹果公司提供的官方demo修改而来，下载地址https://github.com/SeniorZhai/LineLayout。

主要介绍涉及到的几个属性，在LineLayout.m文件中：

        //cell大小
        self.itemSize = CGSizeMake(200, 250);
        //水平滑动
        self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
        //上左下右四个偏移量
        self.sectionInset = UIEdgeInsetsMake(100, 10, 200, 10);
        //每个cell之间的间距
        self.minimumInteritemSpacing = 10.0;

在LineLayout.m中将-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect这个方法注释掉，他是滑动的时候让item有放大的动画效果。

其他就不累赘了，请自行测试。