UICollectionView Objective C中有2种不同的单元格大小

Posted 2023-02-15

【中文标题】UICollectionView Objective C中有2种不同的单元格大小

【英文标题】：2 different cell sizes in UICollectionView Objective C

【发布时间】：2016-04-10 11:38:32

【问题描述】：

我想使用 UICollectionView，可以创建如下布局：

如您所见，单元格有两种不同的大小。一个是行的 1/4，另一个是 3/4。是否可以使用 UICollectionView 创建这种布局？

谁能教我怎么做？？？或者有样品吗？？？我已经学习了很多教程和参考资料。但是还是不知道怎么弄。。

谢谢！

【问题讨论】：

是的，这是可能的。查看为您的UIControllerView 创建自定义布局，它构建了所需的界面；你可以开始例如阅读Apple Official Documentation 了解如何创建自定义布局。

这两个不同大小的单元格是否相关？

@Fogmeister，你在考虑自定义UITableViewCell吗？ :)

@holex 是的。即使不相关，也可能更容易（对于刚接触集合视图的人）只是坚持使用表格视图并在单元格内创建布局。 :D

【参考方案1】：

好吧，我暂时对项目宽度进行了硬编码（72.0 和 23.0）。 5.0 的其余部分将用于临时间距和 edgeInsets。此代码将为您提供您想要的。

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section

    return 10.0;


- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section

    return 10.0;


#pragma mark - CollectionViewFlowLayout Methods

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

    CGSize newSize = CGSizeZero;
    newSize.height = 100;

    CGRect screenBounds = [[UIScreen mainScreen] bounds];
    CGSize screenSize = screenBounds.size;

    if(indexPath.item % 4 == 0 || indexPath.item % 4 == 3)
    
        // Size : 1/4th of screen
        newSize.width = screenSize.width * 0.23;
    
    else
    
        // Size : 3/4th of screen
        newSize.width = screenSize.width * 0.72;

    
    return newSize;


- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section

    return UIEdgeInsetsMake(10, 2.0, 10, 2.0);

【参考方案2】：

有不同的方法：

您可以通过实现- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath 方法来做到这一点。

您可以按照以下教程逐步描述的方式完全自定义集合视图。

http://www.raywenderlich.com/107439/uicollectionview-custom-layout-tutorial-pinterest

从您的目标布局中，看起来可以通过使用 UITableviewCell 轻松获得外观（在单个单元格中加载 1/4 大小和 3/4 大小的单元格），并通过自动布局更改它们的大小.

【讨论】：

感谢您的回复，我已阅读自定义布局教程。但我无法理解。你能告诉我更多怎么做吗？很抱歉打扰您！

【参考方案3】：

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

    return [(NSString*)[arrayOfStats objectAtIndex:indexPath.row] sizeWithAttributes:NULL];

使用此方法，您可以返回不同大小的单元格。请参考此链接Dynamic cell width of UICollectionView depending on label width