大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

模块化TableView

什么是模块化TableView?

举个例子

现在有需求让你修改一个类似于微博个人中心的界面,这种界面几乎所有内容都是写死的界面,虽然我估计微博的个人中心是完全动态的,但这里先假设是写死的,况且模块化也适用于动态界面

最常见的写法

普通的tableView,对应不同的cell:

image

建立个普通数组,把不同内容对应的模型丢进去,如model内容:

struct TableModel_1 {

    var icon:UIImage?

    var title:String = ""

    var desc:String = ""

}

struct TableModel_2 {

    var min:Double = 0
    var max:Double = 0
    var current:Double = 0

}
struct TableModel_3 {

    var desc:String = ""

}

struct TableModel_4 {

    var icon:UIImage?

    var title:String = ""
    
    var backgroundImage:UIImage?

}

然后到cellForRow方法中获取不同的model,分开获取cell,设置cell:

if let cell = cell as? RegularCell{
    cell.titleLabel.text = node.title
    cell.descriptionLabel.text = node.desc
    cell.iconImageView.image = node.icon
}
if let cell = cell as? RangeCell{
    cell.titleLabel.text = node.title
    cell.maxLabel.text = "\(node.max)"
    cell.minLabel.text = "\(node.min)"
    cell.sliderView.value = Float(node.current)
}
if let cell = cell as? DescriptionCell{
    cell.descriptionLabel.text = node.desc
}
if let cell = cell as? BlurCell{
    cell.titleLabel.text = node.title
    cell.iconImageView.image = node.icon
    cell.backgroundImageVIew.image = node.backgroundImage
}

再到didSelectRow中根据indexPath对不同的cell点击事件做不同的处理

let pushedCtr = PushedCtr()

switch indexPath.section {
case 0:
    switch indexPath.row {
    case 0: pushedCtr.title = "2018新闻"
    case 1: pushedCtr.title = "今日温度"
    default: break
    }
case 1:
    switch indexPath.row {
    case 0: pushedCtr.title = "广告位招租"
    case 1: pushedCtr.title = "今日湿度"
    case 2: pushedCtr.title = "谷歌回归"
    default: break
    }
default:break
}

self.navigationController?.pushViewController(pushedCtr, animated: true)

有的人可能会建多个数组,然后分开存放标题和图片的内容,这一步优化这里就跳过直接写成model

成品:

image

仔细一看,这里可以做的优化不是一般的多

首先cellForRow中,设置cell的工作可以交给各自的cell处理,在获取cell后只要对cell设置model就行了

但这样子的话cell和model的耦合就太高了,一般会再建一层viewModel来实现cell的设置, 由于不是重点这里就先不做

接着model其实不用分那么多种,所有类型的数据都可以放在一起,不同的类型分开放在一起,后期需要改动也相对方便一些

struct TableNode {
    var type:Int
    
    //type == 0
    var icon:UIImage?
    var title:String = ""
    var desc:String = ""

    //type == 1
    var min:Double = 0
    var max:Double = 0
    var current:Double = 0
    //title

    //type == 2
    //desc


    //type == 3
    //title
    //icon
    var backgroundImage:UIImage?
}

偏题一下,由于ObjC类的底层实现,编译后的二进制包会保存所有类各自的信息,不像C++具有zero-cost abstraction ,编译后的类信息只有偏移量.所以创建的ObjC类越多,二进制包就会越大,虽然增加的大小一般可以忽略不计,但前期稍微注意一下可以推迟后期可能会遇到下载包达到150M的问题

既然把model合并了,可以通过访问者模式为不同类型的Cell编写不同的初始化方法区分类型,后期需要添加新的Cell值需要一行代码就知道设置什么参数,为了区分,修改后成为node

struct TableNode {
    var type:Int
    
    var icon:UIImage?
    var title:String = ""
    var desc:String = ""
    init(regularWithIcon icon:UIImage?, title:String , description:String) {
        self.type = 0
        ...
    }
    var min:Double = 0
    var max:Double = 0
    var current:Double = 0
    init(rangeWithTitle title:String , min:Double , max:Double,current:Double) {
        self.type = 1
        ...
    }

    init(description:String) {
        self.type = 2
        self.desc = description
    }

    var backgroundImage:UIImage?
    init(webWithTitle title:String , backgroundImage:UIImage , icon:UIImage) {
        self.type = 3
        ...
    }
}

规范化可以通过适配器模式给Cell创建协议,协议中只有一行属性model

protocol TableNodeProtocol {

    var node:TableNode?{get set}

}

let node = nodeList[indexPath.section][indexPath.row]
var cell = tableView.dequeueReusableCell(withIdentifier: "\(node.type)") as? (UITableViewCell & TableNodeProtocol)
cell?.node = node

可以把cell的点击事件也可以通过策略模式放到node中,到时候didSelectRow就能把操作和indexPath的绑定转型成操作和model绑定,后期怎么改都不需要在意这里

struct TableNode {

    var type:Int

    var icon:UIImage?

    var title:String = ""

    var desc:String = ""

    var selectCell:(()->())?

    init(regularWithIcon icon:UIImage?, title:String , description:String,selectCell:@escaping ()->()) {

        self.type = 0

        ...

        self.selectCell = selectCell

    }

    var min:Double = 0

    var max:Double = 0

    var current:Double = 0

    init(rangeWithTitle title:String , min:Double , max:Double,current:Double,selectCell:@escaping ()->()) {

        self.type = 1

        ...

        self.selectCell = selectCell

    }

    init(description:String,selectCell:@escaping ()->()) {

        self.type = 2

        self.desc = description

        self.selectCell = selectCell

    }

    var backgroundImage:UIImage?

    init(webWithTitle title:String , backgroundImage:UIImage , icon:UIImage,selectCell:@escaping ()->()) {

        self.type = 3

        ...

        self.selectCell = selectCell

    }
}

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    table.deselectRow(at: indexPath, animated: true)
    nodeList[indexPath.section][indexPath.row].selectCell?()
}

做完上面几步,你会发现今天的主题已经实现了,现在已经把tableView内容模块化了,不管是改动顺序也好,改动cell内容也好,改动点击cell的操作也好,都能在一个地方处理,不需要根据indexPath调整内容(或者创建一堆的枚举用于区分) ,既符合接口隔离原则,也符合迪米特法则,添加内容时只需:

subList.append(TableNode(regularWithIcon: #imageLiteral(resourceName: "news"), title: "2018新闻", description: "点击查看更多"){ [weak self] in
    let pushedCtr = PushedCtr()
    pushedCtr.title = "2018新闻"
    self?.navigationController?.pushViewController(pushedCtr, animated: true)
})

除了添加新的Cell类型,后续匹配工作都可以忽略不管

完整实现的例子可以在github上查看:

https://github.com/miku1958/ModularTable