一、UICollectionView 的基本用法

1，单个分区的集合视图

（1）首先自定义一个单元格类：

import UIKit

class MyCollectionViewCell: UICollectionViewCell {
    
    var label:UILabel!
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        //背景设为橙色
        self.backgroundColor = UIColor.orange
        
        //创建文本标签
        label = UILabel(frame: frame)
        label.textColor = UIColor.white
        label.textAlignment = .center
        self.contentView.addSubview(label)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        label.frame = bounds
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

（2）主视图控制器代码如下：

import UIKit
import RxSwift
import RxCocoa

class ViewController: UIViewController {
    
    var collectionView:UICollectionView!
    
    let disposeBag = DisposeBag()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //定义布局方式以及单元格大小
        let flowLayout = UICollectionViewFlowLayout()
        flowLayout.itemSize = CGSize(width: 100, height: 70)
        
        //创建集合视图
        self.collectionView = UICollectionView(frame: self.view.frame,
                                               collectionViewLayout: flowLayout)
        self.collectionView.backgroundColor = UIColor.white
        
        //创建一个重用的单元格
        self.collectionView.register(MyCollectionViewCell.self,
                                     forCellWithReuseIdentifier: "Cell")
        self.view.addSubview(self.collectionView!)
        
        //初始化数据
        let items = Observable.just([
            "Swift",
            "PHP",
            "Ruby",
            "Java",
            "C++",
            ])
        
        //设置单元格数据（其实就是对 cellForItemAt 的封装）
        items
            .bind(to: collectionView.rx.items) { (collectionView, row, element) in
                let indexPath = IndexPath(row: row, section: 0)
                let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell",
                                                for: indexPath) as! MyCollectionViewCell
                cell.label.text = "\(row)：\(element)"
                return cell
            }
            .disposed(by: disposeBag)
    }
}

2，单元格选中事件响应

（1）当我们点击某个单元格时将其索引位置，以及对应的标题打印出来。

//获取选中项的索引
collectionView.rx.itemSelected.subscribe(onNext: { indexPath in
    print("选中项的indexPath为：\(indexPath)")
}).disposed(by: disposeBag)


//获取选中项的内容
collectionView.rx.modelSelected(String.self).subscribe(onNext: { item in
    print("选中项的标题为：\(item)")
}).disposed(by: disposeBag)

（3）或者也可以在响应中调用外部的方法：

//获取选中项的索引
collectionView.rx.itemSelected.subscribe(onNext: { [weak self] indexPath in
    self?.showMessage("选中项的indexPath为：\(indexPath)")
}).disposed(by: disposeBag)

//获取选中项的内容
collectionView.rx.modelSelected(String.self).subscribe(onNext: {[weak self] item in
    self?.showMessage("选中项的标题为：\(item)")
}).disposed(by: disposeBag)

（4）如果想要同时获取选中项的索引，以及内容可以这么写：

Observable.zip(collectionView.rx.itemSelected, collectionView.rx.modelSelected(String.self))
    .bind { [weak self] indexPath, item in
        self?.showMessage("选中项的indexPath为：\(indexPath)")
        self?.showMessage("选中项的标题为：\(item)")
    }
    .disposed(by: disposeBag)

3，单元格取消选中事件响应

（1）我们可以分别获取被取消项的索引及内容：

//获取被取消选中项的索引
collectionView.rx.itemDeselected.subscribe(onNext: { [weak self] indexPath in
    self?.showMessage("被取消选中项的indexPath为：\(indexPath)")
}).disposed(by: disposeBag)

//获取被取消选中项的内容
collectionView.rx.modelDeselected(String.self).subscribe(onNext: {[weak self] item in
    self?.showMessage("被取消选中项的的标题为：\(item)")
}).disposed(by: disposeBag)

（2）也可以同时获取：

Observable
    .zip(collectionView.rx.itemDeselected, collectionView.rx.modelDeselected(String.self))
    .bind { [weak self] indexPath, item in
        self?.showMessage("被取消选中项的indexPath为：\(indexPath)")
        self?.showMessage("被取消选中项的的标题为：\(item)")
    }
    .disposed(by: disposeBag)

4，单元格高亮完成后的事件响应

//获取选中并高亮完成后的索引
collectionView.rx.itemHighlighted.subscribe(onNext: { indexPath in
    print("高亮单元格的indexPath为：\(indexPath)")
}).disposed(by: disposeBag)

5，高亮转成非高亮完成的事件响应

//分区头部、尾部将要显示出来的事件响应
collectionView.rx.willDisplaySupplementaryView.subscribe(onNext: { view, kind, indexPath in
    print("将要显示分区indexPath为：\(indexPath)")
    print("将要显示的是头部还是尾部：\(kind)")
    print("将要显示头部或尾部视图：\(view)\n")
}).disposed(by: disposeBag)