How to show collection view 3 columns in 1 row with RxSwift

Question

Here is my code:

import UIKit
import RxSwift
import RxCocoa
import RxOptional

class ViewController: UIViewController {

    @IBOutlet weak var collectionView: UICollectionView!

    let disposeBag = DisposeBag()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.

        let items = Observable.just(
            (0..<20).map{ "Test \($0)" }
        )

        items.asObservable().bindTo(self.collectionView.rx.items(cellIdentifier: CustomCollectionViewCell.reuseIdentifier, cellType: CustomCollectionViewCell.self)) { row, data, cell in
            cell.data = data
            }.addDisposableTo(disposeBag)
    }
}

So how to show 3 columns in 1 row.

I can't find any tutorial about collection view with RxSwift.

Answer 1

Something like this:

class ViewController: UIViewController, UICollectionViewDelegateFlowLayout {

    ....

    override func viewDidLoad() {
        super.viewDidLoad()

            ...

        items.asObservable().bindTo(self.collectionView.rx.items(cellIdentifier: CustomCollectionViewCell.reuseIdentifier, cellType: CustomCollectionViewCell.self)) { row, data, cell in
            cell.data = data
        }.addDisposableTo(disposeBag)

        // add this line you can provide the cell size from delegate method
        collectionView.rx.setDelegate(self).addDisposableTo(disposeBag)
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let width = collectionView.bounds.width
        let cellWidth = (width - 30) / 3 // compute your cell width
        return CGSize(width: cellWidth, height: cellWidth / 0.6)
    }
}

Answer 2

Another alternative:

let flowLayout = UICollectionViewFlowLayout()
let size = (collectionView.frame.size.width - CGFloat(30)) / CGFloat(3)
flowLayout.itemSize = CGSize(width: size, height: size)
collectionView.setCollectionViewLayout(flowLayout, animated: true)