什么是模块化TableView?
举个例子
现在有需求让你修改一个类似于微博个人中心的界面,这种界面几乎所有内容都是写死的界面,虽然我估计微博的个人中心是完全动态的,但这里先假设是写死的,况且模块化也适用于动态界面
最常见的写法
普通的tableView,对应不同的cell:
建立个普通数组,把不同内容对应的模型丢进去,如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
成品:
仔细一看,这里可以做的优化不是一般的多
首先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
2018.8.28更新，聊一下解耦
上述工程其实也没有好到哪去。
其一是耦合度太高
即使以现代APP cell重用率其实很低来说，为了结构的健全度着想，一旦所有东西都揉杂在一起，修改起来会麻烦很多，毕竟实际工程会比这个复杂好十几倍，辛辛苦苦模块化后，却因为耦合太高导致白费力气了也不好
其实个人并不是那么喜欢解耦合这个过程，因为解耦合就意味着要引进一大堆的中间类来隔离view和model，引入的类越多，以后这个模块被废弃后要删除无用文件就会更加麻烦，为了解决这个问题在解耦合的时候就需要花费更多的心思去设计
抱怨结束接下来就来说一下怎么对上面的工程解耦合
首先是上文一概而过的分离cell和model，最简单的办法就是引入一个viewModel来接管cell拿到model后设置内容，以RegularCell为例（其实就是把代码挪个位置）：
- 创建一个新的viewModel：
struct RegularCellConfigurator {
static func config(cell:RegularCell ,TableNode node:TableNode ) -> () {
cell.titleLabel.text = node.title
cell.descriptionLabel.text = node.desc
cell.iconImageView.image = node.icon
}
}
- 移除TableNodeProtocol
- 把cellForRow中的cell?.node = node替换成：
if let cell = cell as? RegularCell{
RegularCellConfigurator.config(cell: cell, TableNode: node)
}
到此为止cell和node就基本分离了，剩下的无非是cell的创建和node.type是绑定的，可以把type改写成一个枚举，对node.type进行switch case来分离cell和node的绑定。
假设以后有新的地方需要用到这个cell，只需要在RegularCellConfigurator新增一个config方法即可和新的数据对接
还有就是node的复杂度，按照这个设想，目前有4种样式大概用了54行代码，假设实际项目会比这个复杂10倍，也就有可能到500行左右（当然model类不大可能这么大），可以按照内容拆分node，比如现在regular和description很像，就把两者拿出来作为node的子类或者用protocol分离开来，推荐用protocol来处理（可以少一个类），或者全部分离然后各自继承同一个protocol也行，但就会分的比较散，需要重复更多的代码，具体看规模决定，没有必要一定要分的特别细
其二优化一下node的创建方式
经过和同僚的讨论，如果把node的创建写成类似于：
addSection：{
addNode：{
}
}
的方式，调整tableview分组的时候就更加方便了
其三是我忘记聊动态化了
这个以后有机会的详细聊一下，不然写下来的篇幅比本文还长了哈哈哈
