iOS实录1：UITableView构建UI界面

[这是第一篇]

导语：UITableView是iOS项目中使用相关广泛的UI组件，本文主要从构建界面方案的实现、TableViewCell之间的通信、Native动态化页面的野望（挖坑）三部分讨论了如何使用TableView构建比较常见的UI界面。

一、概述

1、问题#####

• 在iOS的开发中，有大量的UI工作，这些UI工作简言之就是在画“页面”，“页面”的复杂度有高有低，复杂度高的比如绘制直播画面(聊天列表、点赞飞花、送礼物、广告UI等)，复杂度低的比如绘制一个关于页面，一个logo和几行文本就搞定了。

• 而我们在实际工作中遇到的UI工作大部分是中等复杂度的页面，比如某某列表页、某某详情页，在绘制页面的同时，还需要响应页面上的操作。

• 其实，很多页面都是可以利用UITableView来构建出来的。

2、优势#####

采用分而治之的办法，将一个整体页面划分成若干部分，每一个部分就相当一类Cell，其实这么做是有好处的，好处如下：

• 提高部分UI组件的复用性。尤其在同一个App中，甚至一个App中的同一功能模块中，有些UI是相同的，是可以复用的。

• 支持数据驱动UI的展示，在页面数据变化的情况下，UI也能发生对应的变化。

• 在绘制同一个页面时候，有利于多人合作，每个人可以负责一个页面中不同的部分，且在开发过程中，不受其他人的工作进度影响。

3、解决方案

• 封装TableViewController，凡是想使用UITableView构建页面的Controller都需要继承该类。

• 支持UI组件响应的的处理。

• 使用通知中心或其他方案来完成Cell之间的通信。

• 支持UITableView的上拉加载和下拉刷新，一般列表页面比较需要这两个功能。

二、 构建界面方案的实现####

1、QSTableViewCell 和 QSTableViewCellModel

• QSTableViewCell是对UITableViewCell的封装，而QSTableViewCellModel是对QSTableViewCell上数据和UI响应动作的描述。

• QSTableViewCell定义了其子类需要实现的办法，如如数据更新布局，cellHeight处理，点击cell的处理等主要方法。

   #pragma mark - QSTableViewCell
  @interface QSTableViewCell : UITableViewCell
  
  #pragma mark - 子类需重写
  - (void)layoutWithModel:(id)model;
  
  + (CGFloat)cellHeightWithModel:(id)model;
  
  - (void)onTapCellAction;
  
  @end
  

• QSTableViewCellModel定义了对应Cell类的类名、展示需要的数据， 以及响应UI操作点击的动作，我们将响应UI操作的动作封装在Block中。

  #pragma mark - QSTableViewCellModel
  @interface QSTableViewCellModel : NSObject
  
  @property (nonatomic,copy)NSString  *cellClassName;
  @property (nonatomic,copy)QSTableViewCellActionBlock tapCellBlock;
  @property (nonatomic,assign)CGFloat cellHeight;
  @property (nonatomic,strong)id userInfo;
  
  @end
  

说明：cellClassName属性保存对应的Cell类的类名，可以利用反射来实现cell的创建。

2、实现UITableView代理方法

选择在TableViewController中实现UITableView的UITableViewDelegate、UITableViewDataSource的代理方法。在TableViewController中有顶一个dataSource数组，这个数组中存放的各个Cell对应的CellModel，利用cellModel中的信息，完成Cell的绘制和响应处理。以cell的创建、cell高度获取为例。

• 根据cellModel来实现heightForRowAtIndexPath代理

  - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
  
     QSTableViewCellModel *cellModel = [self.dataSource objectAtIndex:indexPath.section];
     return [self.cellFactory cellHeightForData:cellModel];
  }
  

• 根据cellModel来完成cell的创建和更新

  - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
  
       QSTableViewCellModel *cellModel = [self.dataSource objectAtIndex:indexPath.section];
       QSTableViewCell *cell = [self.cellFactory cellInstanceForData:cellModel];
       [cell layoutWithModel:cellModel];
       return cell;
    }
  

  说明：在cellForRowAtIndexPath：代理方法中实现了cell的创建、复用、数据更新，添加cell上的响应动作处理。

• QSTableViewCellFactory的职责：负责cell高度的计算、创建和复用

  //QSTableViewCellFactory的定义
  @interface QSTableViewCellFactory : NSObject
  
  - (instancetype)initWithTableView:(UITableView *)tableView;
  
  - (CGFloat)cellHeightForData:(id)data;
  
  - (QSTableViewCell *)cellInstanceForData:(id)data;
  
  @end
  

说明：self.cellFactory就是QSTableViewCellFactory对象，达到解耦的目的，使得Controller中代码更简洁。

3、上拉加载和下拉刷新

利用MJRefresh来实现TableView的上拉加载和下拉刷新。

• 设置上拉加载

  - (void)setupRefreshFooter{
  
       //上拉加载更多
      @weakify(self);
       MJRefreshAutoNormalFooter *footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{
            @strongify(self);
                [self refreshDataWithStyle:QSRefreshTableViewDataStyleLoadMore];
        }];
  
        [footer setTitle:@"已显示全部"forState:MJRefreshStateNoMoreData];
  
        footer.refreshingTitleHidden = YES;
        self.tableView.mj_footer = footer;
        [footer.stateLabel setTextColor:[UIColor lightGrayColor]];
    }
  

• 设置下拉刷新

    - (void)setupRefreshHeader{
  
        //下拉刷新
        @weakify(self);
        MJRefreshHeader *header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
           [self refreshDataWithStyle:QSRefreshTableViewDataStylePull];
        }];
        self.tableView.mj_header = header;
    }
  

• 结束刷新

  - (void)endRefreshingWithMoreData:(BOOL)hasMoreData{
  
      if (self.needPullRefresh) {
          [self.tableView.mj_header endRefreshing];
      }
  
      if (self.needPullToLoadMore) {
          if (hasMoreData) {
              [self.tableView.mj_footer endRefreshing];
          }else{
              [self.tableView.mj_footer endRefreshingWithNoMoreData];
          }
      }
  }
  

总结： 使用UITableView构建页面，Controller继承自定义的TableViewController，使用Cell来定义视图，CellModel来定义视图上的内容和动作，然后将CellModel放入TableViewController的dataSource数组中，即可。

三、TableViewCell之间的通信####

在使用TableView组织页面的时候，有个非常值得考虑的问题，那就是TableViewCellCell之间的的通信。

1、概述#####

• 采用分而治之的思路，将一个大的视图拆分成若干个TableViewCell。而在业务上，这几个TableViewCell视图是相互关联的。如点击某子视图，另一个子视图的数据展示发生变化。这就导致了需要选择方案去实现部分TableViewCell之间的通信。

• 早期方案是选用了通知中心；

• 通知中心不仅可以在不同的UITableViewCell之间传递数据的，还降低了代码耦合。但是这也导致了TableViewCell中大量存在注册观察，移除观察这样的代码（移除的工作还非常重要）。最关键的是，通知中心传递的参数不可以灵活地使用model对象。

• 后期方案是QSMessageCenter，这是从业务出发，实现的通知中心的替换方案。

• QSMessageCenter主要实现了不同对象之间的数据传递；传递的参数可以是任何的对象,包括数据model，数组,字典等；注册后不需要手动移除； 使用简单和代码耦合低。

2、通信方案的使用#####

通信方案使用了QSMessageCenter，主要使用步骤如下：

• 在观察者中注册，指定receiverKey

  [self registerMessageReceiverWithKey:receiverKey];
  

• 发送消息，指定receiverKey，当注册方法和发送消息中的receiverKey相同，才可以把消息发送给观察者

  [self sendMessage:message messageId:messageId receiverKey:receiverKey];
  

• 在观察者类中实现qsReceiveMessage:messageId:方法

  - (void)qsReceiveMessage:(id)message messageId:(NSString *)msgId{
      //可以根据msgId去做不同处理
  }
  

说明：QSMessageCenter的具体详情参考iOS实录7：iOS通知中心的替换方案

四、Demo展示####

• 根据方案，定义两类Cell和CellModel,可以实现如下的列表页。

列表页效果图.png

• 根据方案，复用列表页的一类Cell和CellModel，新增一类Cell和CellModel,可以实现如下的详情页。

详情页效果图

总结：这样的方案，为实现列表页、详情页省去了大量的时间，开发者只需要集中精力做好Cell的绘制、CellModel的定义即可。

五、Native动态化页面的野望（挖坑）

H5页面有个很大的优点，就是可以不用发版就可以更新页面内容；如果可以利用TableView实现动态化的Native页面，岂不是很完美的事情。然后，现实的需求和业务比较复杂多变，实现这样的方案，投入和产出比是多少，能不能达到目标，都不好判断。但是针对某些特性的场景，实现页面的动态化数据更新还是可以的。

1、数据描述界面的各个组成#####

使用的是JSON格式数据，由后台返回，如下所示（部分JSON数据）：

{
   "body" :[{
      "type": 0, 
       "content": "http://xxxxxxxxxxxxxxxxxxxxx.jpg",
       "target":"appName://previewSingleImage"
    },
    {
        "type": 1, 
        "content": "H5页面有个很大的优点，就是可以不用发版就可以更新页面内容；如果可以利用TableView实现动态化的Native页面，岂不是很完美的事情....",
        "target":"appName://lookAllContent"
    },
    {
        "type": 2, 
        "content": "http://xxxxxxxxxxxxxxxxx.mp4",
        "target":"appName://playInFullScreen"
    }
    //其他略
  ]
//其他略
}

说明1：type定义的是内容的类型，如0是图片，1是文本，2是视频；content定义的是内容；tagert定义的是点击内容的行为；tagert值的是App中自己定义的协议，如appName://previewSingleImage表明点击图片Cell预览全图，appName://playInFullScreen是点击视频Cell，全屏播放视频。

2、动态化UI方案#####

有两种方案可以选：

1）在Native实现盛装不同数据类型的容器Cell，和Cell的响应处理行为。

说明：该方案没有深入下去，因为TableView处理的视图比较简单，而且还给后台带来比较大的负担（本来后台开发资源就紧张），后期考虑使用CollectionView来实现特定场景下较复杂的动态化界面。

2）将数据和展示需求拼接成H5代码，然后由WebView渲染出来，结合JS和WebViewJavascriptBridge处理Cell的响应处理行为。

说明：该方案是目前采纳的方法，一定程度上实现了页面的动态化，比直接加载H5页面快很多。但是也仅仅是适用于某些固定展示行为的模块，如文章详情页等。

3、 总结#####

• 目前的想法和设计都不完善，适用范围有限。

• 在简书看到一篇博文，作者讲了他使用实现动态化电商Native页面的思路。感兴趣可以去看看iOS页面动态化，怎么样用JSON数据的原生页面摆脱低效的H5页面，来动态更新app页面样式

End

• 源码：QSUseTableViewDemo

• 我是一个iOS开发程序猿，至今（2017年7月）正式做iOS开发已有1年多点的光景。iOS实(践)录系列是自己的一点开发心得。这个系列是17年4月1日开始写的，不仅是总结自己开发中经验，也是对自己的鞭策。