什么是模块化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上查看: