返回 导航

Swift

hangge.com

Swift - RxSwift的使用详解35(UITableView的使用6:不同类型的单元格混用)

作者:hangge | 2018-03-19 08:10
    在之前的文章中,同一个 tableView 里的单元格类型都是一样的。但有时我们需要在一个 tableView 里显示多种类型的数据,这就要求 tableView 可以根据当前行的数据自动使用不同类型的 cell。下面通过样例演示这个功能如何实现。

九、同一个 tableView 中使用不同类型的 cell 

1,效果图

(1)tableView 绑定的数据源中一共有 2section,每个 section 里分别有 3 条数据需要显示。
(2)每个 cell 会根据数据类型的不同,自动选择相应的显示方式:“文字+图片”或“文字+开关按钮”。

2,StroyBoard 设置

(1)首先拖入一个 tableView,设置好相关约束,并与代码中做 @IBOutlet 关联。

(2)将 tableView 的单元格数量设置为 2

(3)将第一个单元格的 identifier 设置成“titleImageCell”。

接着在该单元格中添加一个 Label ImageView,并设置好相关约束。同时将它们的 Tag 分别设置为 1 2

(4)将第二个单元格的 identifier 设置成“titleSwitchCell”。

接着在该单元格中添加一个Label Switch,并设置好相关约束。同时将它们的 Tag 分别设置为 1 2

3,样例代码

import UIKit
import RxSwift
import RxCocoa
import RxDataSources

class ViewController: UIViewController {
    
    @IBOutlet weak var tableView: UITableView!
    
    let disposeBag = DisposeBag()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //初始化数据
        let sections = Observable.just([
            MySection(header: "我是第一个分区", items: [
                .TitleImageSectionItem(title: "图片数据1", image: UIImage(named: "php")!),
                .TitleImageSectionItem(title: "图片数据2", image: UIImage(named: "react")!),
                .TitleSwitchSectionItem(title: "开关数据1", enabled: true)
                ]),
            MySection(header: "我是第二个分区", items: [
                .TitleSwitchSectionItem(title: "开关数据2", enabled: false),
                .TitleSwitchSectionItem(title: "开关数据3", enabled: false),
                .TitleImageSectionItem(title: "图片数据3", image: UIImage(named: "swift")!)
                ])
            ])
        
        //创建数据源
        let dataSource = RxTableViewSectionedReloadDataSource<MySection>(
            //设置单元格
            configureCell: { dataSource, tableView, indexPath, item in
                switch dataSource[indexPath] {
                case let .TitleImageSectionItem(title, image):
                    let cell = tableView.dequeueReusableCell(withIdentifier: "titleImageCell",
                                                             for: indexPath)
                    (cell.viewWithTag(1) as! UILabel).text = title
                    (cell.viewWithTag(2) as! UIImageView).image = image
                    return cell
                    
                case let .TitleSwitchSectionItem(title, enabled):
                    let cell = tableView.dequeueReusableCell(withIdentifier: "titleSwitchCell",
                                                             for: indexPath)
                    (cell.viewWithTag(1) as! UILabel).text = title
                    (cell.viewWithTag(2) as! UISwitch).isOn = enabled
                    return cell
                }
            },
            //设置分区头标题
            titleForHeaderInSection: { ds, index in
                return ds.sectionModels[index].header
            }
        )
        
        //绑定单元格数据
        sections
            .bind(to: tableView.rx.items(dataSource: dataSource))
            .disposed(by: disposeBag)
    }
}

//单元格类型
enum SectionItem {
    case TitleImageSectionItem(title: String, image: UIImage)
    case TitleSwitchSectionItem(title: String, enabled: Bool)
}

//自定义Section
struct MySection {
    var header: String
    var items: [SectionItem]
}

extension MySection : SectionModelType {
    typealias Item = SectionItem
    
    init(original: MySection, items: [Item]) {
        self = original
        self.items = items
    }
}
评论

全部评论(0)

回到顶部