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分组样式的两种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
赞 (0)