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 引用Css样式的四种方式
不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...
- 原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- python 中增加css样式的三种方式
增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 【javascript】原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- javascript总结40:DOM中操作样式的两种方式
1 DOM中操作样式的两种方式 1 通过元素的style属性 注意: 通过style属性设置样式时,css中要写单位的属性,在js代码中也要加单位 //html <div id="bo ...
- 我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权
如果说,原生态就是美,那么,我们就没有必要穿衣打扮. 网页是什么? 说白了,网页就是一堆[html标签]有序的搭配,让[CSS属性值]整整容,请[Javascript语言]处理一下事件. 一个人的整容 ...
- Android ExpandableListView BaseExpandableListAdapter (类似QQ分组列表)
分组列表视图(ExpandableListView) 和ListView不同的是它是一个两级的滚动列表视图,每一个组可以展开,显示一些子项,类似于QQ列表,这些项目来至于ExpandableListA ...
- CSS控制样式的三种方式优先级对比验证
入职已经一个月了,自此后,就好久没有写过博客了,在此先跟关注我的博友们说声抱歉.今天,在公司的一个培训作业的驱动以及伟哥那句“再不写博客就开除你”的监督下,我终于重拾旧爱,再次登录博客园,继续与大家分 ...
- IOS xib生成界面和代码生成界面两种方式混合
应用程序代理类 WKAppDelegate.m // // WKAppDelegate.m // HelloWorld // // Created by easy5 on 13-9-18. // Co ...
随机推荐
- C#码农的大数据之路 - 使用C#编写MR作业
系列目录 写在前面 从Hadoop出现至今,大数据几乎就是Java平台专属一般.虽然Hadoop或Spark也提供了接口可以与其他语言一起使用,但作为基于JVM运行的框架,Java系语言有着天生优势. ...
- 资深小白带你走进OS Memory
图片来源:http://www.tomshardware.com/ 序言: Memory(内存)是一台计算机组成的重要部分,也是最基础的一部分.其它基础组件有主板.CPU.磁盘.显卡(可独立可集成)等 ...
- Java常用类之【八种基本数据类型】
一.装箱和拆箱 装箱:将基本数据类型包装为对应的包装类对象 拆箱:将包装类对象转换成对应的基本数据类型 JDK5.0中为基本数据类型提供了自动装箱(boxing).拆箱(unboxing)功能 二.八 ...
- spring-boot开发:使用内嵌容器进行快速开发及测试
一.简述一下spring-boot微框架 1.spring-boot微框架是什么? 大家都知道,在使用spring框架进行应用开发时需要很多*.xml的初始化配置文件,而springBoot就是用来简 ...
- 给Linux系统/网络管理员准备的Nmap命令的29个实用范例
我将用两个不同的部分来涵盖大部分NMAP的使用方法,这是nmap关键的第一部分.在下面的设置中,我使用两台已关闭防火墙的服务器来测试Nmap命令的工作情况. 192.168.0.100 – serve ...
- python通过excel对数据库插入数据
1.需要有两个包文件xlrd及MySQLdb(其他数据库可以另外找) 2.读取excel文件信息 book = xlrd.open_workbook(文件地址) 3.建立MySQL链接 databas ...
- 关于Eclipse+SVN 开发配置
入职快一个月,学的比较慢,但学的东西很多,受益匪浅.有时候真正意义上,感受到:代码使我快乐,我爱编程. 好久没有开笔,不知道说些什么,也不知道应该说什么. 但总觉得有些东西,很想说出来,不用理会他人的 ...
- 动态读取文件持续显示在UI上
private void DisplayLogInfo(FileInfo _LastFile) { if (_LastFile != null) { StreamReader sr = null; t ...
- [USACO07NOV]电话线Telephone Wire
[USACO07NOV]电话线Telephone Wire 时间限制: 1 Sec 内存限制: 128 MB 题目描述 电信公司要更换某个城市的网线.新网线架设在原有的 N(2 <= N &l ...
- 关于Iscroll.js 的滑动和Angular.js路由冲突问题
Iscroll主要应用于app移动端开发. 主要代码: window.onload=function(){ var myIscroll=new IScroll(".headerNav&quo ...