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

这篇文章主要介绍了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分组样式的两种方式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对html中文网网站的支持！

以上就是iOS 实现类似QQ分组样式的两种方式的详细内容，更多请关注0133技术站其它相关文章！