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