iOS ~ UICollectionView 横向分页滑动，cell左右横向排列

Posted 2023-04-15

参考技术A 需求：固定高度一个区域，里面左右分页显示很多个图标，在每一页中的图标先从左往右排，排满后再从上往下排。这一页排满后排下一页。
图中这样的：上面cell的顺序我已经标出来了。

像这样的需求，第一反应是用UICollectionView来写，用UICollectionViewFlowLayout，然后设置为横向的。但是，采用这种方式来写，出来的效果就会是这样的：

那么还可以怎么实现？可以用大的cell包5个小图标在里面。这样实现按说没问题，但是如果单个图标这里复杂一点，就需要调很久了，而且如果要根据屏幕尺寸来定每行显示的图标个数也很麻烦。

1、KHomeNewRecommendFunctionFlowLayout.h

2、KHomeNewRecommendFunctionFlowLayout.m

3、实现:在数组没有的可以添加几个空白的cell数据

我这个简单的实现只支持1个section，而且section的items个数必须是 itemCountPerRow * rowCount 的整数倍。这里需要在UICollectionView的代理里面做好数组越界检查，防止数组越界造成崩溃。
完整的实现以后再说吧，现在这样已经满足需求了。

纵向和横向的 uicollectionview 单元格框架

【中文标题】纵向和横向的 uicollectionview 单元格框架

【英文标题】：uicollectionview cell frame in portrait and landscape

【发布时间】：2014-11-11 10:19:52

【问题描述】：

我卡在 uicollectionview 单元格框架的框架中 我想做的是，

在 iPad 的横向模式下，我想显示 3 个单元格， 并在纵向 2 个单元格中。

当我在方法- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath中编写框架代码时 它不会影响框架的大小。

我通过应用调试器检查了它是否在此方法中。 但它来了又返回了大小。

默认情况下，我必须以横向启动我的应用程序，然后如果需要以纵向启动。

这是它的横向显示方式

这里的单元格在纵向上看起来如何

这是我的框架代码

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath

  //return [self.cellSizes[indexPath.item] CGSizeValue];
    if (UIDeviceOrientationIsLandscape([[UIApplication sharedApplication] statusBarOrientation]))
    
        return CGSizeMake(100, 100);
    
    return CGSizeMake(200, 200);

无论我传递什么值，框架都没有改变。 我没有在任何地方传递任何其他帧值。

我想先给单元格框架硬编码值，然后再去动态。 但我只停留在第一位。 谁能帮帮我。

提前致谢。

【问题讨论】：

每次都返回200

不，我不这么认为。我得到的框架比 200 大得多。即使去掉那条线，它也会给出相同的框架

@stallone 在调用方向委托时尝试使 CollectionViewLayout 无效。

【参考方案1】：

我遇到了类似的问题，所以基本上你应该在你的视图控制器中实现 UICollectionViewDelegateFlowLayout，否则设计一个自定义的 collectionviewcell 并在你的视图控制器中注册，它肯定会工作。试试看。

就我而言 我通过子类化 UICollectionViewCell 添加了 xib 并相应地设计了它，它可以工作，所以你可以试试。

【参考方案2】：

对于动态集合视图单元，您可以使用这样的集合视图方法。

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
  return 1;
    

 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:  (NSInteger)section
    return [_elements count];
   

  -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
   static NSString *cellIdentifier = @"cell";
    MosaicCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
   MosaicData *data = [_elements objectAtIndex:indexPath.row];
   cell.mosaicData = data;

    float randomWhite = (arc4random() % 40 + 10) / 255.0;
    cell.backgroundColor = [UIColor colorWithWhite:randomWhite alpha:1];
     return cell;
   

有关详细信息，您可以查看此示例。这是您需要的完美示例 https://github.com/betzerra/MosaicLayout

【讨论】：

瑞克，感谢您的评论。但是在我启动应用程序时使用 arc4random 会更改我的单元格框架，我已经尝试过了。我需要以这样的方式为框架设置硬编码值，在纵向模式下 iPad 将显示 2 个单元格列，在横向模式下它将显示 3 个单元格列

@stallone 然后你可以使用硬代码值代替动态（arc4random）或者你可以自定义collectionView单元

【参考方案3】：

当方向发生变化时，您需要重新加载集合视图。因此将调用 CGRect 大小方法为单元格重新创建单元格。

- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation

    // do something after rotation
    [_collectView reloadData];

添加此方法并重新加载您的集合视图，以便调用 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath 并更改大小。 谢谢