iOS 实现类似QQ分组样式的两种方式

思路

思路很简单，对模型数据操作或则控制界面显示

先看下json部分数据

"chapterdtolist": [{
      "token": null,
      "id": 1295,
      "chaptername": "第一章",
      "parentid": 0,
      "chapterlevel": 0,
      "attachmenturl": "",
      "description": null,
      "startdatetimestamp": null,
      "enddatetimestamp": null,
      "startdate": 1490889600000,
      "enddate": 1491062400000,
      "browsecount": 0,
      "workid": null,
      "chapterstatus": 3,
      "hadread": 0,
      "subchapterlist": [{
        "token": null,
        "id": 1296,
        "chaptername": "第一节",
        "parentid": 1295,
        "chapterlevel": 1,
        "attachmenturl": "",
        "description": null,
        "startdatetimestamp": null,
        "enddatetimestamp": null,
        "startdate": null,
        "enddate": null,
        "browsecount": 0,
        "workid": null,
        "chapterstatus": null,
        "hadread": 0,
        "subchapterlist": [],
        "classuserreadinfo": []
      },

这种数据对应的一般都是个tableview， 然后根据章节分开，最终界面如下：

分析

这里采用uitableviewstyleplain样式，chapterdtolist对应章，subchapterlist对应节。章的话我们使用headerview来做，节的话我们使用cell来做。然后只需要给headerview添加一个点击手势，点击的时候给对应的模型添加标识，从而去控制章节的收合。

方法一：

对模型数组进行操作，我们可以将返回的json数据转化为两个模型数组chapterlistarray和tempchapterlistarray，通过控制subchapterlist的count来实现。界面的模型数据统一使用tempchapterlistarray，展开与合并就等价于是否将“章数组“中的”节数组“赋值为nil

- (nsinteger)tableview:(uitableview *)tableview numberofrowsinsection:(nsinteger)section {
  yjtonlinetaskdetailmodel *onlinetaskdetailmodel = self.tempchapterlistarray[section];
  return onlinetaskdetailmodel.subchapterlist.count;
}
- (uiview *)tableview:(uitableview *)tableview viewforheaderinsection:(nsinteger)section {
  yjtonlinechapetercell *headerview = [tableview dequeuereusablecellwithidentifier:onlinechapetercell];
  yjtonlinetaskdetailmodel *onlinetaskdetailmodel = self.chapterlistarray[section];
  headerview.backgroundcolor = [uicolor whitecolor];
  headerview.onlinetaskdetailmodel = onlinetaskdetailmodel;
  if (section == 0) {
    headerview.tipslableheight.constant = 30;
  }else {
    headerview.tipslableheight.constant = 0;
  }
  [headerview whentapwithblock:^{
    onlinetaskdetailmodel.isselected = !onlinetaskdetailmodel.isselected;
    yjtonlinetaskdetailmodel *detailmodel = self.tempchapterlistarray[section];
    if (detailmodel.subchapterlist == nil) {
      detailmodel.subchapterlist = onlinetaskdetailmodel.subchapterlist;
    }else {
      detailmodel.subchapterlist = nil;
    }
    [self.tableview reloaddata];
  }];
  return headerview;
}

方法二：

上面的方法是通过控制模型数组来实现的，我们也可以采用控制界面的显示，从而达到我们的要求。既然我们在点击headview的时候已经标记过对应的模型数据是否展开，那么我们完全可以通过控制界面对应分组的个数来实现。当然也可以通过控制rowheight来到达效果。相比之下，该方法简单明了些。

- (nsinteger)tableview:(uitableview *)tableview numberofrowsinsection:(nsinteger)section {
  yjtonlinetaskdetailmodel *onlinetaskdetailmodel = self.chapterlistarray[section];
  return onlinetaskdetailmodel.isselected ? onlinetaskdetailmodel.subchapterlist.count : 0;
}
 [headerview whentapwithblock:^{
    onlinetaskdetailmodel.isselected = !onlinetaskdetailmodel.isselected;
    [self.tableview reloaddata];
  }];

总结

以上所述是小编给大家介绍的ios 实现类似qq分组样式的两种方式，希望对大家有所帮助