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 ...
随机推荐
- winfrom中将panel另存为图片
private void button1_Click(object sender, EventArgs e) { Point ScrollMaxInfo = Get ...
- [python标准库]Pickle模块
Pickle-------python对象序列化 本文主要阐述以下几点: 1.pickle模块简介 2.pickle模块提供的方法 3.注意事项 4.实例解析 1.pickle模块简介 The pic ...
- Ch2. Loop Structure
Ex Input some integers and output their min, max and average values (keep three decimal places). It ...
- 使用Mingw编译wxSqlite3-3.0.5
最近在学习wxWidgets,而且官方也出了3.0版本,貌似还不错的样子,准备做个小程序来练手.中间需要用到数据库看到很多人推荐wxSqlite3就去下来看看,以下是我使用TDM-GCC 4.8.1( ...
- js中运动框架的封装
//获取非行间样式的封装 function setStyle(obj,name){ // 考虑兼容性问题 if(obj.currentStyle){//不兼容火狐和谷歌 return obj.curr ...
- java基础之集合篇
(一) 集合类位于JDK中java.util包中. 常用的集合类型分布在java.util.Collection和java.util.Map接口中. java.util.Collection=> ...
- “前”方有坑,绕道而行(一)-- H5+CSS
1. 关于 数字.英文 不换行问题: 情景:昨天测试 小程序,输入英文,没有换行,且 下方有横向滚动条: 解决:word-break: word-break:break-all; /*只对英文起作用 ...
- 10分钟轻松学会python turtle绘图
 1. 画布(canvas) 1.1 相关函数: 2. 画笔 2.1 画笔的状态 2.2 画笔的属性 2.3 绘图命令 3. 命令详解 4. 绘图举例 4.1 太阳花 4.2 绘制小蟒蛇 4.3 绘 ...
- MongoDB--数据库管理
<strong>1.mongod 启动项注释(默认不能生成路径,需手动建立)</strong><br /><span style="white-sp ...
- ecshop加入购物车效果(各个页面)
ecshop中点击加入购物车出现下图 通过以下代码改成下图效果 1.后台网店设置 购物车确定提示 选择为“提示用户,点击“确定”进购物车” 2.打开js/common.js 104行就是funct ...