如何使用RxSwift在1行中显示集合视图3列

Question

这是我的代码:

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

那么如何在1行中显示3列.

我找不到任何关于RxSwift的集合视图的教程.

Answer 1

像这样的东西:

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

另一种选择：

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)