在 ios 中使用集合视图创建视图

Question

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

任何人都可以查看相同的内容并提供一些代码以便它可以在某个地方帮助我。

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

请帮帮我。

Answer 1

您可以通过推动

为每个项目设置尺寸

UICollectionViewDelegateFlowLayout 协议，并使用even/odd 公式计算项目宽度。

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

如果您尝试在没有任何框架的情况下执行此操作，则需要开发自己的算法来计算每个单元格的宽度。

首先，您需要计算文本加上边距的宽度，也许还有边框。

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

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

更改 uicollectionview 宽度应该不难，因为 collectionviewcells 是从左到右然后从上到下的 darw。

Answer 3

这是对您的评论的回应，您需要在 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];
}

它很有魅力:)

在 ios 中使用集合视图创建视图

Create a view using collection view in ios

iphone

objective-c

ios

uicollectionview