ios UICollectionView：一行或一列

UICollectionView: One Row or Column

提问by William T.

I want to use UICollectionViewto display a horizontal scrollable list of thumbnails, however, I want this to be a single row. On another view, I'm displaying the thumbnails in a UICollectionViewbut this one scrolls vertically and it's in a single column.

我想用来UICollectionView显示缩略图的水平可滚动列表，但是，我希望这是一行。在另一个视图中，我在 a 中显示缩略图，UICollectionView但此缩略图垂直滚动且位于单列中。

Currently, the way I'm doing this is by changing the size of the collection view to only be big enough for one item so it autowraps and works, but now I'm dealing with variable sized items so it doesn't work anymore.

目前，我这样做的方法是将集合视图的大小更改为仅足以容纳一个项目，以便它自动包装并工作，但现在我正在处理可变大小的项目，因此它不再起作用。

How do you make a UICollectionViewdisplay one row or column?

如何使UICollectionView显示为一行或一列？

采纳答案by Nikola Kirev

I am guessing you are using the built in Flow Layout. However, for your case, you should make a custom UICollectionView Layout. Make it subclass of UICollectionViewFlowLayoutand add this code in the initmethod:

我猜你正在使用内置的Flow Layout. 但是，对于您的情况，您应该自定义UICollectionView Layout. 将其设为子类UICollectionViewFlowLayout并将此代码添加到init方法中：

- (id)init {
    if ((self = [super init])) {
        self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
        self.minimumLineSpacing = 10000.0f;
    }
    return self; 
}

The minimumLineSpacingis the key to making it have one line here.

的minimumLineSpacing关键是使之有一条线在这里。

I hope this helps!

我希望这有帮助！

回答by sidekickr

I found that setting the minimumLineSpacingjust made my scroll area really big and that setting the minimumInteritemSpacing=bigaccomplished keeping the items in one scrolling row or column, centered in the middle of the collectionview.

我发现设置minimumLineSpacing只是使我的滚动区域变得非常大，并且设置minimumInteritemSpacing=big完成将项目保持在一个滚动行或列中，在collectionview.

回答by atreat

There isn't a real reason to subclass if you can trust the type cast.

如果您可以信任类型转换，则没有真正的理由进行子类化。

((UICollectionViewFlowLayout *)self.collectionView.collectionViewLayout).minimumLineSpacing = 1000.0f;

If you have your collectionView loaded from a nib you could also play around with the parameters in the Attributes and Size Inspectors.

如果您从笔尖加载了 collectionView，您还可以使用 Attributes 和 Size Inspectors 中的参数。

Same goes for scroll direction.

滚动方向也是如此。

回答by Ilker Baltaci

When you init your UICollectionViewpass the following UICollectionViewFlowLayoutin the init parameter.

当您在 init 参数中初始化您的UICollectionView传递时UICollectionViewFlowLayout。

Note: You do not need to create a subclass of UICollectionViewFlowLayout

注意：您不需要创建子类 UICollectionViewFlowLayout

var collectionViewFlowControl = UICollectionViewFlowLayout()
collectionViewFlowControl.scrollDirection = UICollectionViewScrollDirection.Horizontal

For 0 px Cell Spacing:

对于 0 px 单元格间距：

collectionViewFlowControl.minimumInteritemSpacing = 0;
collectionViewFlowControl.minimumLineSpacing = 0;

collectionView = UICollectionView(frame: CGRectMake(0, 0, self.view.frame.size.width, 120), collectionViewLayout: collectionViewFlowControl)

回答by Azhar

For Swift 3

对于 Swift 3

let flowLayout = UICollectionViewFlowLayout()
flowLayout.itemSize = CGSize(width: UIScreen.main.bounds.width/2-10, height: 190)
flowLayout.sectionInset = UIEdgeInsetsMake(0, 5, 0, 5)
flowLayout.scrollDirection = UICollectionViewScrollDirection.horizontal
flowLayout.minimumInteritemSpacing = 0.0
self.gCollectionView.collectionViewLayout = flowLayout

回答by Jiebe

This worked for me to get a single row of cells regardless of the height of the CollectionView. Set the Min spacing for cells to 1000

这对我有用，无论 CollectionView 的高度如何，都可以获得单行单元格。将单元格的最小间距设置为 1000

回答by matt

In iOS 13, thanks to UICollectionViewCompositionalLayout, this is trivial, because you can specifythe number of cells per column in a horizontal layout, or the number of cells per row in a vertical layout. Here's a simple example for a single horizontally scrolling, vertically centered row of cells:

在 iOS 13 中，感谢 UICollectionViewCompositionalLayout，这是微不足道的，因为您可以在水平布局中指定每列的单元格数，或者在垂直布局中指定每行的单元格数。这是单个水平滚动、垂直居中的单元格行的简单示例：

func layout() -> UICollectionViewCompositionalLayout {
    let itemSize = NSCollectionLayoutSize(
        widthDimension: .fractionalWidth(1),
        heightDimension: .fractionalHeight(1))
    let item = NSCollectionLayoutItem(layoutSize: itemSize)
    let groupSize = NSCollectionLayoutSize(
        widthDimension: .absolute(75),
        heightDimension: .absolute(75))
    let group = NSCollectionLayoutGroup.vertical(
        layoutSize: groupSize, subitem: item, count: 1) // *
    group.edgeSpacing = NSCollectionLayoutEdgeSpacing(
        leading: nil, top: .flexible(0),
        trailing: nil, bottom: .flexible(0))
    let section = NSCollectionLayoutSection(group: group)
    section.interGroupSpacing = 65
    let config = UICollectionViewCompositionalLayoutConfiguration()
    config.scrollDirection = .horizontal
    let layout = UICollectionViewCompositionalLayout(
        section: section, configuration:config)
    return layout
}

回答by andesta.erfan

I think the documentation is the best :

我认为文档是最好的：

minimumLineSpacingForSectionAt:

minimumLineSpacingForSectionAt：

For a vertically scrolling grid, this value represents the minimum spacing between successive rows. For a horizontally scrolling grid, this value represents the minimum spacing between successive columns. This spacing is not applied to the space between the header and the first line or between the last line and the footer.

对于垂直滚动的网格，此值表示连续行之间的最小间距。对于水平滚动网格，此值表示连续列之间的最小间距。此间距不适用于页眉和第一行之间或最后一行和页脚之间的空间。

minimumInteritemSpacingForSectionAt:

minimumInteritemSpacingForSectionAt：

For a vertically scrolling grid, this value represents the minimum spacing between items in the same row. For a horizontally scrolling grid, this value represents the minimum spacing between items in the same column. This spacing is used to compute how many items can fit in a single line, but after the number of items is determined, the actual spacing may possibly be adjusted upward.

对于垂直滚动的网格，此值表示同一行中项目之间的最小间距。对于水平滚动的网格，此值表示同一列中项目之间的最小间距。这个间距是用来计算一行可以容纳多少个item，但是在确定item的个数之后，实际的间距可能会向上调整。

So if your scrollDirectionis horizontal, you need to set minimumInteritemSpacingForSectionAtto CGFloat.greatestFiniteMagnitudeand if your scrollDirectionis vertical, you need to set minimumLineSpacingForSectionAtto CGFloat.greatestFiniteMagnitudefor getting one row collectionView

所以，如果你scrollDirection是水平的，你需要设置minimumInteritemSpacingForSectionAt到CGFloat.greatestFiniteMagnitude，如果你scrollDirection是垂直的，你需要设置minimumLineSpacingForSectionAt到CGFloat.greatestFiniteMagnitude用于获取一行collectionView

回答by Gerd Castan

I wanted one column, left aligned and the other answers didn't help me.

我想要一列，左对齐，其他答案对我没有帮助。

So here is my very simple solution for one column, left aligned:

所以这是我对一列的非常简单的解决方案，左对齐：

class GCOneColumnLeftAlignedFlowLayout: UICollectionViewFlowLayout {
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        let attributes = super.layoutAttributesForElements(in: rect)

        var y: CGFloat = sectionInset.top
        attributes?.forEach { layoutAttribute in
            layoutAttribute.frame.origin.x = sectionInset.left
            layoutAttribute.frame.origin.y = y
            y = y + layoutAttribute.frame.height + minimumLineSpacing
        }

        return attributes
    }
}

you also should set something like

你也应该设置类似的东西

estimatedItemSize = CGSize(width: 120, height: 40)

Don't forget to remove the line

不要忘记删除该行

minimumLineSpacing = big number

From the other solutions.

从其他解决方案。

Hope this is helpful because it's a completely different approach compared to the other answers.

希望这会有所帮助，因为与其他答案相比，这是一种完全不同的方法。

回答by Ajjjjjjjj

 UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc] init];
 [layout setScrollDirection:UICollectionViewScrollDirectionHorizontal];

 layout.minimumInteritemSpacing = 0;
 layout.minimumLineSpacing = 0;


 blendEffectCollectionView=[[UICollectionView alloc] initWithFrame:CGRectMake(0, 95, 320, 60) collectionViewLayout:layout];
 [blendEffectCollectionView setDataSource:self];
 [blendEffectCollectionView setDelegate:self];
 [blendEffectCollectionView registerClass:[BlendModeCell class] forCellWithReuseIdentifier:@"cellIdentifier"];
 [blendEffectCollectionView setBackgroundColor:[UIColor clearColor]];

 [bottomActivityView addSubview:blendEffectCollectionView];