How can I change my UICollectionView's Flow Layout to a vertical List with Horizontal Scrolling

Question

Basically what I am trying to create is a table with three cells stacked on top of one another. But, if there are more than three cells, I want to be able to swipe left on the Collection View to show more cells. Here is a picture to illustrate.

Right now I have the cells arranged in a list but I cannot seem to change the scroll direction for some reason. - They still scroll vertically

Here is my current code for the Flow Layout:

Note: I'm not going to include the Collection View code that is in my view controller as I do not think it is relevant.

import Foundation import 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

If you have your cells sized correctly, Horizontal Flow Layout will do exactly what you want... fill down and across.

Here is a simple example (just set a view controller to this class - no IBOutlets needed):

//
//  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
    }

}

I'll leave the "enable paging" part up to you :)