Swift - RxSwift的使用详解37(UICollectionView的使用1:基本用法)
一、UICollectionView 的基本用法
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)当我们点击某个单元格时将其索引位置,以及对应的标题打印出来。(2)如果业务代码直接放在响应方法内部,可以这么写:
//获取选中项的索引 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.itemUnhighlighted.subscribe(onNext: { indexPath in print("失去高亮的单元格的indexPath为:\(indexPath)") }).disposed(by: disposeBag)
6,单元格将要显示出来的事件响应
//单元格将要显示出来的事件响应 collectionView.rx.willDisplayCell.subscribe(onNext: { cell, indexPath in print("将要显示单元格indexPath为:\(indexPath)") print("将要显示单元格cell为:\(cell)\n") }).disposed(by: disposeBag)
7,分区头部或尾部将要显示出来的事件响应
//分区头部、尾部将要显示出来的事件响应 collectionView.rx.willDisplaySupplementaryView.subscribe(onNext: { view, kind, indexPath in print("将要显示分区indexPath为:\(indexPath)") print("将要显示的是头部还是尾部:\(kind)") print("将要显示头部或尾部视图:\(view)\n") }).disposed(by: disposeBag)