在ios中使用uicollectionview创建视图

Question

我正在尝试创建一个类似于下面附图的视图。有一个可变大小的宽度。我将文本标记为黑色，因为存在版权问题。

任何人都可以查看同样的内容，并提供一些代码，以便它可以帮助我。

我是否需要实施自定义集合视图布局？

请帮帮我。

Answer 1

您可以通过强制

为每个项目设置大小

UICollectionViewDelegateFlowLayout协议，并使用偶数/奇数公式计算项目宽度。

-(CGSize)collectionView:(UICollectionView *)collectionView
             layout:(UICollectionViewLayout *)collectionViewLayout
 sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewFlowLayout *flowLayout = (UICollectionViewFlowLayout *)collectionView.collectionViewLayout;

    NSInteger itemsPerRow = 0;
    NSInteger contentSizeWidth = 0;
    NSInteger num = indexPath.row;
    if (num % 2)
    {// odd
        itemsPerRow = 2;
    }
    else {
    // even
        itemsPerRow = 3;
    }

    contentSizeWidth = collectionView.frame.size.width-   (flowLayout.minimumInteritemSpacing*(itemsPerRow-1))-flowLayout.sectionInset.left-flowLayout.sectionInset.right;

    return CGSizeMake(contentSizeWidth/itemsPerRow, 100);
}

Answer 2

这是对您的评论的回复，您需要在SGSStaggeredFlowLayout中添加3行额外代码

NSArray* arr = [super layoutAttributesForElementsInRect:rect];

// THIS CODE SEPARATES INTO ROWS
NSMutableArray* rows = [NSMutableArray array];
NSMutableArray* currentRow = nil;
NSInteger currentIndex = 0;
BOOL nextIsNewRow = YES;
for (UICollectionViewLayoutAttributes* atts in arr) {
    if (nextIsNewRow) {
        nextIsNewRow = NO;
        if (currentRow) {
            [rows addObject:currentRow];
        }
        currentRow = [NSMutableArray array];
    }

    if (arr.count > currentIndex+1) {
        UICollectionViewLayoutAttributes* nextAtts = arr[currentIndex+1];
        if (nextAtts.frame.origin.y > atts.frame.origin.y) {
            nextIsNewRow = YES;
        }
    }

    [currentRow addObject:atts];
    currentIndex++;
}
if (![rows containsObject:currentRow]) {
    [rows addObject:currentRow];
}

它就像魅力一样：）

Answer 3

如果你试图在没有任何框架的情况下这样做，你需要开发自己的algroithm来计算每个单元格的宽度。

首先，您需要计算文本的宽度加上边距也可能是边框。

其次，计算将在给定行中放置的项目数。尝试添加3 togther，如果总宽度超过uicollection宽度，则意味着第三个文本应该转到下一个单元格。如果它小于集合宽度，则意味着您可以将try添加到第4个文本。

第三，计算每一行中每个单元格的宽度，以及将要放置在该行上的单元格数量和它们自己的宽度。

更改uicollectionview宽度不应该是难以理解的，因为collectionviewcells从左到右，从上到下都是darw。