多个可变cell复杂界面的优化

Posted by zfx5130 on March 13, 2017
示例图如下

效果图2

分析

在日常开发中,会遇到例如上面图面的界面(多个模块,且内容不固定)绘制,刚开始我遇到这样的界面是这样实现的:

  • 顶部多图放在tableviewHeadView里面。
  • 价格,产品名称,描述,条码等放在一个Cell里面。
  • 广告轮播等用tableViewFooterView里面

这样效果可以实现的,但是存在很多问题,例如:

  • 当需求变动,需要不断的添加和删除不需要的描述,例如条形码,广告图是否隐藏等,这些我们就需要不断的去修改cell中view的约束来调整界面视图状态。
  • 因为界面约束的调整需要根据请求到的数据去渲染,这就存在一个问题,当进入详情页时,这时候页面就要显示成为初始状态,而初始状态很多数据是不需要展示的。例如:条形码需要等数据请求到后,才根据需求去展示。这样就导致我们需要考虑初始状态和展示数据状态两种状态。闲的十分繁琐。
总结

上述方式有以下问题:

  • 界面cell中内容过多,通过约束变动来显示,有点繁琐冗余。
  • 需要初始状态和数据请求完两种状态渲染,繁琐。
  • 需要额外的计算高度,来更新HeadViewFooterView
新方法

这种方式是在无意间看到别人分享的,看别让的实现方式,确实相比较原来方式,思路更加清晰,扩展性强,逻辑简单。具体思路如下:

  • 创建多个Cell,把每一个可变的内容模块单独的拿出来作为一个cell,例如:价格模块、产品描述、条码等。
  • 所有Cell共有一个baseCell,共有部分利用起来。
  • 创建Model,没个cell对应一个Model,例如没个cell对应的数据内容、高度、Identifier等。
  • 创建数组,添加没个cell对应的没个Model,然后根据数组去展示渲染数据。
优缺点

1、缺点:

  • 代码冗余高。

2、优点:

  • 逻辑简单,易于调整,方便管理,迭代性高。
ps

Demo下载地址