美文网首页ios开发整理iOS 专题
Swift - RxSwift的使用详解36(UITableVi

Swift - RxSwift的使用详解36(UITableVi

作者: 八级大狂风AM | 来源:发表于2018-03-21 09:12 被阅读153次

    十、相关样式的修改

            有时我们可能需要调整 tableView 单元格的高度、或者修改 section 头尾视图样式等等。虽然 RxSwift 没有封装相关的方法,但我们仍然可以通过相关的代理方法来设置。

    1,修改单元格高度

    import UIKit
    import RxSwift
    import RxCocoa
    import RxDataSources
     
    class ViewController: UIViewController {
         
        var tableView:UITableView!
         
        var dataSource:RxTableViewSectionedAnimatedDataSource<MySection>?
         
        let disposeBag = DisposeBag()
         
        override func viewDidLoad() {
            super.viewDidLoad()
             
            //创建表格视图
            self.tableView = UITableView(frame: self.view.frame, style:.plain)
            //创建一个重用的单元格
            self.tableView!.register(UITableViewCell.self, forCellReuseIdentifier: "Cell")
            self.view.addSubview(self.tableView!)
             
            //初始化数据
            let sections = Observable.just([
                MySection(header: "基本控件", items: [
                    "UILable的用法",
                    "UIText的用法",
                    "UIButton的用法"
                    ]),
                MySection(header: "高级控件", items: [
                    "UITableView的用法",
                    "UICollectionViews的用法"
                    ])
                ])
             
            //创建数据源
            let dataSource = RxTableViewSectionedAnimatedDataSource<MySection>(
                //设置单元格
                configureCell: { ds, tv, ip, item in
                    let cell = tv.dequeueReusableCell(withIdentifier: "Cell")
                        ?? UITableViewCell(style: .default, reuseIdentifier: "Cell")
                    cell.textLabel?.text = "\(ip.row):\(item)"
                     
                    return cell
                },
                //设置分区头标题
                titleForHeaderInSection: { ds, index in
                    return ds.sectionModels[index].header
                }
            )
             
            self.dataSource = dataSource
             
            //绑定单元格数据
            sections
                .bind(to: tableView.rx.items(dataSource: dataSource))
                .disposed(by: disposeBag)
             
            //设置代理
            tableView.rx.setDelegate(self)
                .disposed(by: disposeBag)
        }
    }
     
    //tableView代理实现
    extension ViewController : UITableViewDelegate {
        //设置单元格高度
        func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath)
            -> CGFloat {
            guard let _ = dataSource?[indexPath],
                let _ = dataSource?[indexPath.section]
                else {
                    return 0.0
            }
         
            return 60
        }
    }
     
    //自定义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
        }
    }
    

    2,修改分组的头部和尾部

    (1)下面以修改分区头样式为例:我们让 section header 使用自定义的视图,同时修改了默认的高度。

    (2)样例代码

    import UIKit
    import RxSwift
    import RxCocoa
    import RxDataSources
     
    class ViewController: UIViewController {
         
        var tableView:UITableView!
         
        var dataSource:RxTableViewSectionedAnimatedDataSource<MySection>?
         
        let disposeBag = DisposeBag()
         
        override func viewDidLoad() {
            super.viewDidLoad()
             
            //创建表格视图
            self.tableView = UITableView(frame: self.view.frame, style:.plain)
            //创建一个重用的单元格
            self.tableView!.register(UITableViewCell.self, forCellReuseIdentifier: "Cell")
            self.view.addSubview(self.tableView!)
             
            //初始化数据
            let sections = Observable.just([
                MySection(header: "基本控件", items: [
                    "UILable的用法",
                    "UIText的用法",
                    "UIButton的用法"
                    ]),
                MySection(header: "高级控件", items: [
                    "UITableView的用法",
                    "UICollectionViews的用法"
                    ])
                ])
             
            //创建数据源
            let dataSource = RxTableViewSectionedAnimatedDataSource<MySection>(
                //设置单元格
                configureCell: { ds, tv, ip, item in
                    let cell = tv.dequeueReusableCell(withIdentifier: "Cell")
                        ?? UITableViewCell(style: .default, reuseIdentifier: "Cell")
                    cell.textLabel?.text = "\(ip.row):\(item)"
                     
                    return cell
                },
                //设置分区尾部标题
                titleForFooterInSection: { ds, index in
                    return "共有\(ds.sectionModels[index].items.count)个控件"
                }
            )
             
            self.dataSource = dataSource
             
            //绑定单元格数据
            sections
                .bind(to: tableView.rx.items(dataSource: dataSource))
                .disposed(by: disposeBag)
             
            //设置代理
            tableView.rx.setDelegate(self)
                .disposed(by: disposeBag)
        }
    }
     
    //tableView代理实现
    extension ViewController : UITableViewDelegate {
        //返回分区头部视图
        func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int)
            -> UIView? {
            let headerView = UIView()
            headerView.backgroundColor = UIColor.black
            let titleLabel = UILabel()
            titleLabel.text = self.dataSource?[section].header
            titleLabel.textColor = UIColor.white
            titleLabel.sizeToFit()
            titleLabel.center = CGPoint(x: self.view.frame.width/2, y: 20)
            headerView.addSubview(titleLabel)
            return headerView
        }
         
        //返回分区头部高度
        func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int)
            -> CGFloat {
            return 40
        }
    }
     
    //自定义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
        }
    }
    

    RxSwift使用详解系列
    原文出自:www.hangge.com转载请保留原文链接

    相关文章

      网友评论

        本文标题:Swift - RxSwift的使用详解36(UITableVi

        本文链接:https://www.haomeiwen.com/subject/nerwqftx.html