思路


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

先看下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分组样式的几种方式的更多相关文章

  1. HTML 引用Css样式的四种方式

    不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...

  2. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  3. python 中增加css样式的三种方式

    增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  4. 【javascript】原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  5. javascript总结40:DOM中操作样式的两种方式

    1 DOM中操作样式的两种方式 1 通过元素的style属性 注意: 通过style属性设置样式时,css中要写单位的属性,在js代码中也要加单位 //html <div id="bo ...

  6. 我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权

    如果说,原生态就是美,那么,我们就没有必要穿衣打扮. 网页是什么? 说白了,网页就是一堆[html标签]有序的搭配,让[CSS属性值]整整容,请[Javascript语言]处理一下事件. 一个人的整容 ...

  7. Android ExpandableListView BaseExpandableListAdapter (类似QQ分组列表)

    分组列表视图(ExpandableListView) 和ListView不同的是它是一个两级的滚动列表视图,每一个组可以展开,显示一些子项,类似于QQ列表,这些项目来至于ExpandableListA ...

  8. CSS控制样式的三种方式优先级对比验证

    入职已经一个月了,自此后,就好久没有写过博客了,在此先跟关注我的博友们说声抱歉.今天,在公司的一个培训作业的驱动以及伟哥那句“再不写博客就开除你”的监督下,我终于重拾旧爱,再次登录博客园,继续与大家分 ...

  9. IOS xib生成界面和代码生成界面两种方式混合

    应用程序代理类 WKAppDelegate.m // // WKAppDelegate.m // HelloWorld // // Created by easy5 on 13-9-18. // Co ...

随机推荐

  1. winfrom中将panel另存为图片

    private void button1_Click(object sender, EventArgs e)        {            Point ScrollMaxInfo = Get ...

  2. [python标准库]Pickle模块

    Pickle-------python对象序列化 本文主要阐述以下几点: 1.pickle模块简介 2.pickle模块提供的方法 3.注意事项 4.实例解析 1.pickle模块简介 The pic ...

  3. Ch2. Loop Structure

    Ex Input some integers and output their min, max and average values (keep three decimal places). It ...

  4. 使用Mingw编译wxSqlite3-3.0.5

    最近在学习wxWidgets,而且官方也出了3.0版本,貌似还不错的样子,准备做个小程序来练手.中间需要用到数据库看到很多人推荐wxSqlite3就去下来看看,以下是我使用TDM-GCC 4.8.1( ...

  5. js中运动框架的封装

    //获取非行间样式的封装 function setStyle(obj,name){ // 考虑兼容性问题 if(obj.currentStyle){//不兼容火狐和谷歌 return obj.curr ...

  6. java基础之集合篇

    (一) 集合类位于JDK中java.util包中. 常用的集合类型分布在java.util.Collection和java.util.Map接口中. java.util.Collection=> ...

  7. “前”方有坑,绕道而行(一)-- H5+CSS

    1. 关于  数字.英文 不换行问题: 情景:昨天测试 小程序,输入英文,没有换行,且 下方有横向滚动条: 解决:word-break: word-break:break-all; /*只对英文起作用 ...

  8. 10分钟轻松学会python turtle绘图

     1. 画布(canvas) 1.1 相关函数: 2. 画笔 2.1 画笔的状态 2.2 画笔的属性 2.3 绘图命令 3. 命令详解 4. 绘图举例 4.1 太阳花 4.2 绘制小蟒蛇 4.3 绘 ...

  9. MongoDB--数据库管理

    <strong>1.mongod 启动项注释(默认不能生成路径,需手动建立)</strong><br /><span style="white-sp ...

  10. ecshop加入购物车效果(各个页面)

    ecshop中点击加入购物车出现下图 通过以下代码改成下图效果 1.后台网店设置 购物车确定提示  选择为“提示用户,点击“确定”进购物车” 2.打开js/common.js  104行就是funct ...