如何将我的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 
    } 

} 

我将离开“启用分页”部分取决于你:)