iOS 实现类似QQ分组样式的两种方式
时间：2021-06-08 07:47:19 | 栏目：iOS代码 | 点击：次
思路
思路很简单，对模型数据操作或则控制界面显示
先看下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];
}];
总结