如何將我的UICollectionView的流佈局更改爲水平滾動的垂直列表

Question

基本上，我嘗試創建的是三個單元格堆疊在一起的表格。但是，如果有三個以上的單元格，我希望能夠在集合視圖上向左滑動以顯示更多單元格。這是一張圖片來說明。

現在我有單元格排列在一個列表中，但我似乎無法改變滾動方向出於某種原因。 - 他們還是垂直滾動

這裏是我的流式佈局當前代碼：

注：我不打算以包括集合視圖代碼，在我看來是控制器我不認爲它是相關的。

進口基金會 進口的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 
    } 

} 

我將離開「啓用分頁」部分取決於你:)