如何将我的 UICollectionView Flowlayout 更改为具有水平滚动的垂直列表

Question

基本上，我要创建的是一个表格，其中三个单元格相互堆叠。但是，如果有超过三个单元格，我希望能够在 Collection View 上向左滑动以显示更多单元格。这是一张图片来说明。

现在我将单元格排列在一个列表中，但由于某种原因我似乎无法更改滚动方向。 - 他们仍然垂直滚动

这是我当前的流布局代码：

注意：我不打算包含我的视图控制器中的集合视图代码，因为我认为它不相关。

导入基础 导入 UIKit

class HorizontalListCollectionViewFlowLayout: UICollectionViewFlowLayout {

     let itemHeight: CGFloat = 35





    func itemWidth() -> CGFloat {
        return collectionView!.frame.width
    }

    override var itemSize: CGSize {
        set {
            self.itemSize = CGSize(width: itemWidth(), height: itemHeight)
        }
        get {
            return CGSize(width: itemWidth(), height: itemHeight)
        }
    }

    override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint) -> CGPoint {
        return collectionView!.contentOffset
    }

    override var scrollDirection: UICollectionViewScrollDirection {

        set {
            self.scrollDirection = .horizontal

        } get {

            return self.scrollDirection
        }
    }


}

Answer 1

如果您的单元格大小正确，水平流式布局将完全按照您的要求...填充并横跨。

这是一个简单的示例（只需为此类设置一个视图控制器 - 不需要 IBOutlets）：

//
//  ThreeRowCViewViewController.swift
//
//  Created by Don Mag on 6/20/17.
//

import UIKit

private let reuseIdentifier = "LabelItemCell"

class LabelItemCell: UICollectionViewCell {
    // simple CollectionViewCell with a label

    @IBOutlet weak var theLabel: UILabel!

    let testLabel: UILabel = {
        let label = UILabel()
        label.font = UIFont.systemFont(ofSize: 14)
        label.textColor = UIColor.black
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        addViews()
    }

    func addViews(){
        addSubview(testLabel)
        testLabel.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 8.0).isActive = true
        testLabel.centerYAnchor.constraint(equalTo: self.centerYAnchor, constant: 0.0).isActive = true
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

}

class ThreeRowCViewViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

    // 3 gray colors for the rows
    let cellColors = [
        UIColor.init(white: 0.9, alpha: 1.0),
        UIColor.init(white: 0.8, alpha: 1.0),
        UIColor.init(white: 0.7, alpha: 1.0)
    ]

    var theCodeCollectionView: UICollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // height we'll use for the rows
        let rowHeight = 30

        // just picked a random width of 240
        let rowWidth = 240

        let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()

        // horizontal collection view direction
        layout.scrollDirection = .horizontal

        // each cell will be the width of the collection view and our pre-defined height
        layout.itemSize = CGSize(width: rowWidth - 1, height: rowHeight)

        // no item spacing
        layout.minimumInteritemSpacing = 0.0

        // 1-pt line spacing so we have a visual "edge" (with horizontal layout, the "lines" are vertical blocks of cells
        layout.minimumLineSpacing = 1.0

        theCodeCollectionView = UICollectionView(frame: CGRect.zero, collectionViewLayout: layout)
        theCodeCollectionView.dataSource = self
        theCodeCollectionView.delegate = self
        theCodeCollectionView.register(LabelItemCell.self, forCellWithReuseIdentifier: reuseIdentifier)
        theCodeCollectionView.showsVerticalScrollIndicator = false

        // set background to orange, just to make it obvious
        theCodeCollectionView.backgroundColor = .orange

        theCodeCollectionView.translatesAutoresizingMaskIntoConstraints = false

        self.view.addSubview(theCodeCollectionView)

        // set collection view width x height to rowWidth x (rowHeight * 3)
        theCodeCollectionView.widthAnchor.constraint(equalToConstant: CGFloat(rowWidth)).isActive = true
        theCodeCollectionView.heightAnchor.constraint(equalToConstant: CGFloat(rowHeight * 3)).isActive = true

        // center the collection view
        theCodeCollectionView.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: 0.0).isActive = true
        theCodeCollectionView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 0.0).isActive = true

    }

     func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }
     func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 12
    }

     func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) as! LabelItemCell

        cell.backgroundColor = cellColors[indexPath.row % 3]
        cell.testLabel.text = "\(indexPath)"

        return cell
    }

}

我将把“启用分页”部分留给你 :)