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

Posted 2023-03-10

【中文标题】如何将我的 UICollectionView Flowlayout 更改为具有水平滚动的垂直列表

【英文标题】：How can I change my UICollectionView's Flow Layout to a vertical List with Horizontal Scrolling

【发布时间】：2017-06-20 14:23:23

【问题描述】：

基本上，我要创建的是一个表格，其中三个单元格相互堆叠。但是，如果有超过三个单元格，我希望能够在 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
        
    

【参考方案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
    

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

【讨论】：

非常感谢！设置分页并不难。 :)