如何顯示集合視圖爲1行3列與RxSwift

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)