RxSwift之UI控件UICollectionView扩展的使用

举报
Serendipity·y 发表于 2022/02/17 00:33:45 2022/02/17
【摘要】 一、基本用法 ① 单个分区的集合视图 效果如下： 示例代码： // 定义布局方式以及单元格大小 let flowLayout = UICollectionViewFlowLayout() fl...

一、基本用法

① 单个分区的集合视图

  • 效果如下：

在这里插入图片描述

  • 示例代码：
// 定义布局方式以及单元格大小
let flowLayout = UICollectionViewFlowLayout()
flowLayout.sectionInset = UIEdgeInsets.init(top: 0, left: 5, bottom: 0, right: 5)
flowLayout.itemSize = CGSize(width: (SCREEN_WIDTH-50)/3.0, 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)

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    • 
  
  • 8
    • 
  
  • 9
    • 
  
  • 10
    • 
  
  • 11
    • 
  
  • 12
    • 
  
  • 13
    • 
  
  • 14
    • 
  
  • 15
    • 
  
  • 16
    • 
  
  • 17
    • 
  
  • 18
    • 
  
  • 19
    • 
  
  • 20
    • 
  
  • 21
    • 
  
  • 22
    • 
  
  • 23
    • 
  
  • 24
    • 
  
  • 25
    • 
  
  • 26
    • 
  
  • 27
    • 
  
  • 28
    • 
  
  • 29
    • 
  
  • 30
    • 
  
  • 31
    • 
  
  • 32
    • 
  
  • 33
    • 
  
  • 34
    •

② 单元格选中事件响应

  • 如下所示，当点击某个单元格时将其索引位置，以及对应的标题打印出来：
选中项的indexPath为：[0, 0]
选中项的标题为：Swift

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

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    • 
  
  • 8
    • 
  
  • 9
    • 
  
  • 10
    •
  • 也可以在响应中调用外部的方法实现：
// 获取选中项的索引
collectionView.rx.itemSelected.subscribe(onNext: { [weak self] indexPath in
	print("选中项的indexPath为：\(indexPath)")
}).disposed(by: disposeBag)
 
// 获取选中项的内容
collectionView.rx.modelSelected(String.self).subscribe(onNext: {[weak self] item in
	print("选中项的标题为：\(item)")
}).disposed(by: disposeBag)

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    • 
  
  • 8
    • 
  
  • 9
    •
  • 如果想要同时获取选中项的索引以及内容，可以如下实现：
Observable.zip(collectionView.rx.itemSelected, collectionView.rx.modelSelected(String.self))
    .bind { [weak self] indexPath, item in
        print("选中项的indexPath为：\(indexPath)")
        print("选中项的标题为：\(item)")
    }
    .disposed(by: disposeBag)

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    •

③ 单元格取消选中事件响应

被取消选中项的indexPath为：[0, 4]
被取消选中项的的标题为：C++

  
 
    
  
  • 1
    • 
  
  • 2
    •
  • 可以分别获取被取消项的索引及内容：
// 获取被取消选中项的索引
collectionView.rx.itemDeselected.subscribe(onNext: { [weak self] indexPath in
	print("被取消选中项的indexPath为：\(indexPath)")
}).disposed(by: disposeBag)
 
// 获取被取消选中项的内容
collectionView.rx.modelDeselected(String.self).subscribe(onNext: {[weak self] item in
	print("被取消选中项的的标题为：\(item)")
}).disposed(by: disposeBag)

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    • 
  
  • 8
    • 
  
  • 9
    •
  • 也可以同时获取：
Observable
    .zip(collectionView.rx.itemDeselected, collectionView.rx.modelDeselected(String.self))
    .bind { [weak self] indexPath, item in
       	print("被取消选中项的indexPath为：\(indexPath)")
		print("被取消选中项的的标题为：\(item)")
    }
    .disposed(by: disposeBag)

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    •

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

高亮单元格的indexPath为：[0, 3]

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

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    •

⑤ 高亮转成非高亮完成的事件响应

失去高亮的单元格的indexPath为：[0, 3]

  
 
    
  
  • 1
    •
  • 示例代码：
// 获取高亮转成非高亮完成后的索引
collectionView.rx.itemUnhighlighted.subscribe(onNext: { indexPath in
    print("失去高亮的单元格的indexPath为：\(indexPath)")
}).disposed(by: disposeBag)

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    •

⑥ 单元格将要显示出来的事件响应

将要显示单元格indexPath为：[0, 0]
将要显示单元格cell为：<RxSwift.MyCollectionViewCell: 0x7fe0f1112490; baseClass = UICollectionViewCell; frame = (5 0; 126 70); layer = <CALayer: 0x6000006f1a40>>

将要显示单元格indexPath为：[0, 1]
将要显示单元格cell为：<RxSwift.MyCollectionViewCell: 0x7fe0f0706be0; baseClass = UICollectionViewCell; frame = (144 0; 126 70); layer = <CALayer: 0x6000006f6360>>

将要显示单元格indexPath为：[0, 2]
将要显示单元格cell为：<RxSwift.MyCollectionViewCell: 0x7fe0f1304420; baseClass = UICollectionViewCell; frame = (283 0; 126 70); layer = <CALayer: 0x6000006bd900>>

将要显示单元格indexPath为：[0, 3]
将要显示单元格cell为：<RxSwift.MyCollectionViewCell: 0x7fe0f1304e40; baseClass = UICollectionViewCell; frame = (5 80; 126 70); layer = <CALayer: 0x6000006bd960>>

将要显示单元格indexPath为：[0, 4]
将要显示单元格cell为：<RxSwift.MyCollectionViewCell: 0x7fe0f1113c50; baseClass = UICollectionViewCell; frame = (144 80; 126 70); layer = <CALayer: 0x6000006f18a0>>

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    • 
  
  • 8
    • 
  
  • 9
    • 
  
  • 10
    • 
  
  • 11
    • 
  
  • 12
    • 
  
  • 13
    • 
  
  • 14
    •
  • 示例代码：
// 单元格将要显示出来的事件响应
collectionView.rx.willDisplayCell.subscribe(onNext: { cell, indexPath in
    print("将要显示单元格indexPath为：\(indexPath)")
    print("将要显示单元格cell为：\(cell)\n")
}).disposed(by: disposeBag)

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    •

⑦ 分区头部或尾部将要显示出来的事件响应

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

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    •

二、RxDataSources

① 单分区的 CollectionView

  • 如下所示，要实现如下效果：

在这里插入图片描述

  • 主视图控制器里的功能实现有如下两种写法：
    • 方式一：使用自带的 Section：
// 定义布局方式以及单元格大小
let flowLayout = UICollectionViewFlowLayout()
flowLayout.sectionInset = UIEdgeInsets.init(top: 0, left: 5, bottom: 0, right: 5)
flowLayout.itemSize = CGSize(width: (SCREEN_WIDTH-50)/3.0, 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([
    SectionModel(model: "", items: [
        "Swift",
        "PHP",
        "Python",
        "Java",
        "javascript",
        "C#"
        ])
    ])
 
// 创建数据源
let dataSource = RxCollectionViewSectionedReloadDataSource
    <SectionModel<String, String>>(
    configureCell: { (dataSource, collectionView, indexPath, element) in
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell",
                                        for: indexPath) as! MyCollectionViewCell
        cell.label.text = "\(element)"
        return cell}
)
 
// 绑定单元格数据
items
    .bind(to: collectionView.rx.items(dataSource: dataSource))
    .disposed(by: disposeBag)

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    • 
  
  • 8
    • 
  
  • 9
    • 
  
  • 10
    • 
  
  • 11
    • 
  
  • 12
    • 
  
  • 13
    • 
  
  • 14
    • 
  
  • 15
    • 
  
  • 16
    • 
  
  • 17
    • 
  
  • 18
    • 
  
  • 19
    • 
  
  • 20
    • 
  
  • 21
    • 
  
  • 22
    • 
  
  • 23
    • 
  
  • 24
    • 
  
  • 25
    • 
  
  • 26
    • 
  
  • 27
    • 
  
  • 28
    • 
  
  • 29
    • 
  
  • 30
    • 
  
  • 31
    • 
  
  • 32
    • 
  
  • 33
    • 
  
  • 34
    • 
  
  • 35
    • 
  
  • 36
    • 
  
  • 37
    • 
  
  • 38
    • 
  
  • 39
    • 
  
  • 40
    • 
  
  • 41
    •
    • 方式二：使用自定义的 Section：
// 定义布局方式以及单元格大小
let flowLayout = UICollectionViewFlowLayout()
flowLayout.sectionInset = UIEdgeInsets.init(top: 0, left: 5, bottom: 0, right: 5)
flowLayout.itemSize = CGSize(width: (SCREEN_WIDTH-50)/3.0, 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 sections = Observable.just([
    MySection(header: "", items: [
        "Swift",
        "PHP",
        "Python",
        "Java",
        "javascript",
        "C#"
        ])
    ])
 
// 创建数据源
let dataSource = RxCollectionViewSectionedReloadDataSource<MySection>(
    configureCell: { (dataSource, collectionView, indexPath, element) in
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell",
                                        for: indexPath) as! MyCollectionViewCell
        cell.label.text = "\(element)"
        return cell}
)
 
// 绑定单元格数据
sections
    .bind(to: collectionView.rx.items(dataSource: dataSource))
    .disposed(by: disposeBag)


// 自定义Section
struct MySection {
    var header: String
    var items: [Item]
}
 
extension MySection : AnimatableSectionModelType {
    typealias Item = String
     
    var identity: String {
        return header
    }
     
    init(original: MySection, items: [Item]) {
        self = original
        self.items = items
    }
}

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    • 
  
  • 8
    • 
  
  • 9
    • 
  
  • 10
    • 
  
  • 11
    • 
  
  • 12
    • 
  
  • 13
    • 
  
  • 14
    • 
  
  • 15
    • 
  
  • 16
    • 
  
  • 17
    • 
  
  • 18
    • 
  
  • 19
    • 
  
  • 20
    • 
  
  • 21
    • 
  
  • 22
    • 
  
  • 23
    • 
  
  • 24
    • 
  
  • 25
    • 
  
  • 26
    • 
  
  • 27
    • 
  
  • 28
    • 
  
  • 29
    • 
  
  • 30
    • 
  
  • 31
    • 
  
  • 32
    • 
  
  • 33
    • 
  
  • 34
    • 
  
  • 35
    • 
  
  • 36
    • 
  
  • 37
    • 
  
  • 38
    • 
  
  • 39
    • 
  
  • 40
    • 
  
  • 41
    • 
  
  • 42
    • 
  
  • 43
    • 
  
  • 44
    • 
  
  • 45
    • 
  
  • 46
    • 
  
  • 47
    • 
  
  • 48
    • 
  
  • 49
    • 
  
  • 50
    • 
  
  • 51
    • 
  
  • 52
    • 
  
  • 53
    • 
  
  • 54
    • 
  
  • 55
    • 
  
  • 56
    • 
  
  • 57
    • 
  
  • 58
    • 
  
  • 59
    • 
  
  • 60
    •
  • 注意：RxDataSources 是以 section 来做为数据结构的，因此不管 collectionView 是单分区还是多分区，在使用 RxDataSources 的过程中，都需要返回一个 section 的数组。

② 多分区的 CollectionView

  • 如下所示，要实现如下效果：

在这里插入图片描述

  • 使用自带的 Section：
// 定义布局方式以及单元格大小
let flowLayout = UICollectionViewFlowLayout()
flowLayout.itemSize = CGSize(width: (SCREEN_WIDTH-50)/3.0, height: 70)
flowLayout.headerReferenceSize = CGSize(width: self.view.frame.width, height: 40)
 
// 创建集合视图
self.collectionView = UICollectionView(frame: self.view.frame,
                                       collectionViewLayout: flowLayout)
self.collectionView.backgroundColor = UIColor.white
 
// 创建一个重用的单元格
self.collectionView.register(MyCollectionViewCell.self,
                             forCellWithReuseIdentifier: "Cell")
// 创建一个重用的分区头
self.collectionView.register(MySectionHeader.self,
                             forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader,
                             withReuseIdentifier: "Section")
self.view.addSubview(self.collectionView!)
 

// 初始化数据
let items = Observable.just([
    SectionModel(model: "脚本语言", items: [
        "Python",
        "javascript",
        "PHP",
        ]),
    SectionModel(model: "高级语言", items: [
        "Swift",
        "C++",
        "Java",
        "C#"
        ])
    ])
 
// 创建数据源
let dataSource = RxCollectionViewSectionedReloadDataSource
    <SectionModel<String, String>>(
    configureCell: { (dataSource, collectionView, indexPath, element) in
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell",
                                        for: indexPath) as! MyCollectionViewCell
        cell.label.text = "\(element)"
        return cell},
    configureSupplementaryView: {
        (ds ,cv, kind, ip) in
        let section = cv.dequeueReusableSupplementaryView(ofKind: kind,
                    withReuseIdentifier: "Section", for: ip) as! MySectionHeader
        section.label.text = "\(ds[ip.section].model)"
        return section
})
 
// 绑定单元格数据
items
    .bind(to: collectionView.rx.items(dataSource: dataSource))
    .disposed(by: disposeBag)

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    • 
  
  • 8
    • 
  
  • 9
    • 
  
  • 10
    • 
  
  • 11
    • 
  
  • 12
    • 
  
  • 13
    • 
  
  • 14
    • 
  
  • 15
    • 
  
  • 16
    • 
  
  • 17
    • 
  
  • 18
    • 
  
  • 19
    • 
  
  • 20
    • 
  
  • 21
    • 
  
  • 22
    • 
  
  • 23
    • 
  
  • 24
    • 
  
  • 25
    • 
  
  • 26
    • 
  
  • 27
    • 
  
  • 28
    • 
  
  • 29
    • 
  
  • 30
    • 
  
  • 31
    • 
  
  • 32
    • 
  
  • 33
    • 
  
  • 34
    • 
  
  • 35
    • 
  
  • 36
    • 
  
  • 37
    • 
  
  • 38
    • 
  
  • 39
    • 
  
  • 40
    • 
  
  • 41
    • 
  
  • 42
    • 
  
  • 43
    • 
  
  • 44
    • 
  
  • 45
    • 
  
  • 46
    • 
  
  • 47
    • 
  
  • 48
    • 
  
  • 49
    • 
  
  • 50
    • 
  
  • 51
    • 
  
  • 52
    • 
  
  • 53
    • 
  
  • 54
    • 
  
  • 55
    •
  • 使用自定义的 Section：
// 定义布局方式以及单元格大小
let flowLayout = UICollectionViewFlowLayout()
flowLayout.itemSize = CGSize(width: (SCREEN_WIDTH-50)/3.0, height: 70)
flowLayout.headerReferenceSize = CGSize(width: self.view.frame.width, height: 40)
 
// 创建集合视图
self.collectionView = UICollectionView(frame: self.view.frame,
                                       collectionViewLayout: flowLayout)
self.collectionView.backgroundColor = UIColor.white
 
// 创建一个重用的单元格
self.collectionView.register(MyCollectionViewCell.self,
                             forCellWithReuseIdentifier: "Cell")
// 创建一个重用的分区头
self.collectionView.register(MySectionHeader.self,
                             forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader,
                             withReuseIdentifier: "Section")
self.view.addSubview(self.collectionView!)
 

// 初始化数据
let sections = Observable.just([
    MySection(header: "脚本语言", items: [
        "Python",
        "javascript",
        "PHP",
        ]),
    MySection(header: "高级语言", items: [
        "Swift",
        "C++",
        "Java",
        "C#"
        ])
    ])
 
// 创建数据源
let dataSource = RxCollectionViewSectionedReloadDataSource<MySection>(
    configureCell: { (dataSource, collectionView, indexPath, element) in
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell",
                                        for: indexPath) as! MyCollectionViewCell
        cell.label.text = "\(element)"
        return cell},
    configureSupplementaryView: {
        (ds ,cv, kind, ip) in
        let section = cv.dequeueReusableSupplementaryView(ofKind: kind,
                    withReuseIdentifier: "Section", for: ip) as! MySectionHeader
        section.label.text = "\(ds[ip.section].header)"
        return section
})
 
// 绑定单元格数据
sections
    .bind(to: collectionView.rx.items(dataSource: dataSource))
    .disposed(by: disposeBag)


// 自定义Section
struct MySection {
    var header: String
    var items: [Item]
}
 
extension MySection : AnimatableSectionModelType {
    typealias Item = String
     
    var identity: String {
        return header
    }
     
    init(original: MySection, items: [Item]) {
        self = original
        self.items = items
    }
}

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    • 
  
  • 8
    • 
  
  • 9
    • 
  
  • 10
    • 
  
  • 11
    • 
  
  • 12
    • 
  
  • 13
    • 
  
  • 14
    • 
  
  • 15
    • 
  
  • 16
    • 
  
  • 17
    • 
  
  • 18
    • 
  
  • 19
    • 
  
  • 20
    • 
  
  • 21
    • 
  
  • 22
    • 
  
  • 23
    • 
  
  • 24
    • 
  
  • 25
    • 
  
  • 26
    • 
  
  • 27
    • 
  
  • 28
    • 
  
  • 29
    • 
  
  • 30
    • 
  
  • 31
    • 
  
  • 32
    • 
  
  • 33
    • 
  
  • 34
    • 
  
  • 35
    • 
  
  • 36
    • 
  
  • 37
    • 
  
  • 38
    • 
  
  • 39
    • 
  
  • 40
    • 
  
  • 41
    • 
  
  • 42
    • 
  
  • 43
    • 
  
  • 44
    • 
  
  • 45
    • 
  
  • 46
    • 
  
  • 47
    • 
  
  • 48
    • 
  
  • 49
    • 
  
  • 50
    • 
  
  • 51
    • 
  
  • 52
    • 
  
  • 53
    • 
  
  • 54
    • 
  
  • 55
    • 
  
  • 56
    • 
  
  • 57
    • 
  
  • 58
    • 
  
  • 59
    • 
  
  • 60
    • 
  
  • 61
    • 
  
  • 62
    • 
  
  • 63
    • 
  
  • 64
    • 
  
  • 65
    • 
  
  • 66
    • 
  
  • 67
    • 
  
  • 68
    • 
  
  • 69
    • 
  
  • 70
    • 
  
  • 71
    • 
  
  • 72
    • 
  
  • 73
    • 
  
  • 74
    •

三、刷新集合数据

① 刷新数据

  • 如下所示：
    • 界面初始化完毕后，collectionView 默认会加载一些随机数据；
    • 点击右上角的刷新按钮，collectionView 会重新加载并显示一批新数据；
    • 为方便演示，每次获取数据不是真的去发起网络请求，而是在本地生成后延迟 2 秒返回，模拟这种异步请求的情况。

在这里插入图片描述
在这里插入图片描述

  • 示例代码：
// 定义布局方式以及单元格大小
let flowLayout = UICollectionViewFlowLayout()
flowLayout.itemSize = CGSize(width: (SCREEN_WIDTH-50)/3.0, height: 70)
flowLayout.headerReferenceSize = CGSize(width: self.view.frame.width, height: 40)
 
// 创建集合视图
self.collectionView = UICollectionView(frame: CGRect.init(x: 0, y: 88, width: SCREEN_WIDTH, height: SCREEN_HEIGHT - 88),
                                       collectionViewLayout: flowLayout)
self.collectionView.backgroundColor = UIColor.white
// 创建一个重用的单元格
self.collectionView.register(MyCollectionViewCell.self,
                             forCellWithReuseIdentifier: "Cell")
self.view.addSubview(self.collectionView!)
 
// 随机的表格数据
let randomResult = self.refreshButton.rx.tap.asObservable()
    .startWith(())
    .flatMapLatest(getRandomResult)
    .share(replay: 1)
 
// 创建数据源
let dataSource = RxCollectionViewSectionedReloadDataSource
    <SectionModel<String, Int>>(
    configureCell: { (dataSource, collectionView, indexPath, element) in
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell",
                                        for: indexPath) as! MyCollectionViewCell
        cell.label.text = "\(element)"
        return cell}
)
 
// 绑定单元格数据
randomResult
    .bind(to: collectionView.rx.items(dataSource: dataSource))
    .disposed(by: disposeBag)


// 获取随机数据
func getRandomResult() -> Observable<[SectionModel<String, Int>]> {
    print("正在请求数据......")
    let items = (0 ..< 5).map {_ in
        Int(arc4random_uniform(100000))
    }
    let observable = Observable.just([SectionModel(model: "S", items: items)])
    return observable.delay(2, scheduler: MainScheduler.instance)
}

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    • 
  
  • 8
    • 
  
  • 9
    • 
  
  • 10
    • 
  
  • 11
    • 
  
  • 12
    • 
  
  • 13
    • 
  
  • 14
    • 
  
  • 15
    • 
  
  • 16
    • 
  
  • 17
    • 
  
  • 18
    • 
  
  • 19
    • 
  
  • 20
    • 
  
  • 21
    • 
  
  • 22
    • 
  
  • 23
    • 
  
  • 24
    • 
  
  • 25
    • 
  
  • 26
    • 
  
  • 27
    • 
  
  • 28
    • 
  
  • 29
    • 
  
  • 30
    • 
  
  • 31
    • 
  
  • 32
    • 
  
  • 33
    • 
  
  • 34
    • 
  
  • 35
    • 
  
  • 36
    • 
  
  • 37
    • 
  
  • 38
    • 
  
  • 39
    • 
  
  • 40
    • 
  
  • 41
    • 
  
  • 42
    • 
  
  • 43
    • 
  
  • 44
    • 
  
  • 45
    •

② 防止集合视图多次刷新

  • flatMapLatest 的作用是：当在短时间内（上一个请求还没回来）连续点击多次“刷新”按钮，虽然仍会发起多次请求，但 collectionView 只会接收并显示最后一次请求，避免集合视图出现连续刷新的现象：
// 随机的表格数据
let randomResult = refreshButton.rx.tap.asObservable()
    .startWith(()) 
    .flatMapLatest(getRandomResult)
    .share(replay: 1)

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    •
  • 也可以对源头进行限制下，即通过 throttle 设置个阀值（比如 1 秒），如果在 1 秒内有多次点击则只取最后一次，那么自然也就只发送一次数据请求：
// 随机的表格数据
let randomResult = refreshButton.rx.tap.asObservable()
    .throttle(1, scheduler: MainScheduler.instance) // 在主线程中操作，1秒内值若多次改变，取最后一次
    .startWith(()) 
    .flatMapLatest(getRandomResult)
    .share(replay: 1)

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    •

③ 停止数据请求

  • 在实际项目中我们可能会需要对一个未完成的网络请求进行中断操作，比如切换页面或者分类时，如果上一次的请求还未完成就要将其取消掉。
  • 该功能简单说就是通过 takeUntil 操作符实现，当 takeUntil 中的 Observable 发送一个值时，便会结束对应的 Observable：
// 随机的表格数据
let randomResult = refreshButton.rx.tap.asObservable()
	.startWith(()) //加这个为了让一开始就能自动请求一次数据
	.flatMapLatest{
		self.getRandomResult().takeUntil(self.cancelButton.rx.tap)
	}
	.share(replay: 1)

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    •

四、样式修改

  • 不管屏幕尺寸如何，collectionView 每行总是固定显示 4 个单元格，即单元格的宽度随屏幕尺寸的变化而变化，而单元格的高度为宽度的 1.5 倍：

在这里插入图片描述

  • 示例代码：
// 定义布局方式
let flowLayout = UICollectionViewFlowLayout()
 
// 创建集合视图
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([
    SectionModel(model: "", items: [
        "Swift",
        "PHP",
        "Python",
        "Java",
        "C++",
        "C#"
        ])
    ])
 
// 创建数据源
let dataSource = RxCollectionViewSectionedReloadDataSource
    <SectionModel<String, String>>(
    configureCell: { (dataSource, collectionView, indexPath, element) in
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell",
                                        for: indexPath) as! MyCollectionViewCell
        cell.label.text = "\(element)"
        return cell}
)
 
// 绑定单元格数据
items
    .bind(to: collectionView.rx.items(dataSource: dataSource))
    .disposed(by: disposeBag)
 
// 设置代理
collectionView.rx.setDelegate(self)
    .disposed(by: disposeBag)


// 设置单元格尺寸
func collectionView(_ collectionView: UICollectionView,
                    layout collectionViewLayout: UICollectionViewLayout,
                    sizeForItemAt indexPath: IndexPath) -> CGSize {
	let width = collectionView.bounds.width
	let cellWidth = (width - 30) / 4                         // 每行显示4个单元格
	return CGSize(width: cellWidth, height: cellWidth * 1.5) // 单元格宽度为高度1.5倍
}

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    • 
  
  • 8
    • 
  
  • 9
    • 
  
  • 10
    • 
  
  • 11
    • 
  
  • 12
    • 
  
  • 13
    • 
  
  • 14
    • 
  
  • 15
    • 
  
  • 16
    • 
  
  • 17
    • 
  
  • 18
    • 
  
  • 19
    • 
  
  • 20
    • 
  
  • 21
    • 
  
  • 22
    • 
  
  • 23
    • 
  
  • 24
    • 
  
  • 25
    • 
  
  • 26
    • 
  
  • 27
    • 
  
  • 28
    • 
  
  • 29
    • 
  
  • 30
    • 
  
  • 31
    • 
  
  • 32
    • 
  
  • 33
    • 
  
  • 34
    • 
  
  • 35
    • 
  
  • 36
    • 
  
  • 37
    • 
  
  • 38
    • 
  
  • 39
    • 
  
  • 40
    • 
  
  • 41
    • 
  
  • 42
    • 
  
  • 43
    • 
  
  • 44
    • 
  
  • 45
    • 
  
  • 46
    • 
  
  • 47
    • 
  
  • 48
    • 
  
  • 49
    • 
  
  • 50
    • 
  
  • 51
    • 
  
  • 52
    • 
  
  • 53
    •

文章来源: blog.csdn.net，作者：Serendipity·y，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/Forever_wj/article/details/121246980

【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
应用与数据集成平台 ROMA Connect
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入