具有不同大小项目的iOS UICollectionView 水平滚动矩形布局? [英] iOS UICollectionView Horizontal Scrolling Rectangular Layout with different size of items?

问题描述

iOS UICollectionView 如何创建具有不同大小项目的水平滚动矩形布局.

我想使用 UICollectionView 创建一个矩形布局，如下所示.我怎样才能实现?

I want to create a Rectangular layout using UICollectionView like below. how can i achieve?

当我使用 CollectionView 滚动 水平 时，1,2,3,4,5,6 网格将一起滚动以带来 7.

When i scroll horizontally using CollectionView 1,2,3,4,5,6 grid will scroll together to bring 7.

以下是 320*480 iPhone 分辨率的尺寸.下面更新了屏幕.

The Below are the dimensions of 320*480 iPhone Resolution. Updated Screen below.

前 6 件商品的尺寸低于 iPhone 5s.

First 6 items have below dimensions for iPhone 5s.

Item 1 Size is - (213*148)
Item 2 Size is - (106*75)
Item 3 Size is - (106*74)
Item 4 Size is - (106*88)
Item 5 Size is - (106*88)
Item 6 Size is - (106*88)

item6 之后的尺寸与集合视图的宽度和高度相同，如下所示.

After item6 have same dimensions as collection View width and height like below.

Item 7 Size is - (320*237)
Item 8 Size is - (320*237)
Item 9 Size is - (320*237)

如何使用具有水平滚动功能的集合视图创建简单的自定义布局?

必须感谢快速解决方案.提前致谢.

Must appreciate for a quick solution. Thanks in advance.

推荐答案

我建议在 CollectionViewCell(固定尺寸)中使用 StackView 来创建网格布局，如您的帖子所示.

I would suggest using a StackView inside CollectionViewCell(of fixed dimension) to create a grid layout as shown in your post.

下面的GridStackView根据使用方法addCell(view: UIView)添加的视图数量创建一个动态网格布局.

Below GridStackView creates a dynamic grid layout based on the number of views added using method addCell(view: UIView).

将此 GridStackView 添加为 CollectionViewCell 的唯一子视图，将所有边缘固定到侧面，使其完全填充 CollectionViewCell.

Add this GridStackView as the only subview of your CollectionViewCell pinning all the edges to the sides so that it fills the CollectionViewCell completely.

在准备 CollectionViewCell 时，使用 addCell(view: UIView) 方法向其添加平铺视图.

while preparing your CollectionViewCell, add tile views to it using the method addCell(view: UIView).

如果只添加了一个视图，那么它将显示一个占据整个 GridStackView 以及整个 CollectionViewCell 的视图.如果添加了多个视图，它会自动将它们布局在 CollectionViewCell 内部.

If only one view added, then it will show a single view occupying whole GridStackView and so as whole CollectionViewCell. If there is more than one view added, it will automatically layout them in the inside the CollectionViewCell.

您可以调整下面的代码以获得计算行和列的所需布局.当前的实现需要 rowSize 在初始化我用于我的项目之一时提供，您需要稍微修改它以获得所需的布局.

You can tweak the code below to get the desired layout calculating the row and column. Current implementation needed rowSize to be supplied while initializing which I used for one of my project, you need to modify it a bit to get your desired layout.

class GridStackView: UIStackView {
    private var cells: [UIView] = []
    private var currentRow: UIStackView?
    var rowSize: Int = 3
    var defaultSpacing: CGFloat = 5

    init(rowSize: Int) {
        self.rowSize = rowSize
        super.init(frame: .zero)
        translatesAutoresizingMaskIntoConstraints = false
        axis = .vertical
        spacing = defaultSpacing
        distribution = .fillEqually
    }

    required init(coder: NSCoder) {
        super.init(coder: coder)
        translatesAutoresizingMaskIntoConstraints = false
        axis = .vertical
        spacing = defaultSpacing
        distribution = .fillEqually
    }

    private func preapreRow() -> UIStackView {
        let row = UIStackView(arrangedSubviews: [])
        row.spacing = defaultSpacing
        row.translatesAutoresizingMaskIntoConstraints = false
        row.axis = .horizontal
        row.distribution = .fillEqually
        return row
    }

    func removeAllCell() {
        for item in arrangedSubviews {
            item.removeFromSuperview()
        }
        cells.removeAll()
        currentRow = nil
    }

    func addCell(view: UIView) {
        let firstCellInRow = cells.count % rowSize == 0
        if currentRow == nil || firstCellInRow {
            currentRow = preapreRow()
            addArrangedSubview(currentRow!)
        }
        view.translatesAutoresizingMaskIntoConstraints = false
        cells.append(view)
        currentRow?.addArrangedSubview(view)
        setNeedsLayout()
    }
}

这篇关于具有不同大小项目的iOS UICollectionView 水平滚动矩形布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！