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分组样式的两种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对找一找教程网网站的支持!
html仿qq分组,iOS 实现类似QQ分组样式的两种方式相关推荐
- android RecyclerView一步步打造分组效果、类似QQ分组、折叠菜单、分组效果(一)
第二篇文章链接: android RecyclerView一步步打造分组效果.类似QQ分组.折叠菜单.分组效果(二) 效果图: 前言 之前看到这种效果如果用recyclerview来实现没有一点思路, ...
- android RecyclerView一步步打造分组效果、类似QQ分组、折叠菜单、分组效果(二)
第一篇链接: android RecyclerView一步步打造分组效果.类似QQ分组.折叠菜单.分组效果(一) 注!已更新代码! 上一篇写了分组效果的初步实现: 这一篇就继续增加分组折叠效果和基类的 ...
- html 点击加入qq群,怎么样加入QQ群?加入QQ群两种方式介绍
怎么样加入QQ群?加入QQ群通常用于2种方式,一种是已知QQ群号,我们只需要查找添加,另外一种是自行搜索找群,下面我们分别介绍下. 最近有网友问小编:怎样加入脚本之家QQ群啊?随后小编给其发了一个QQ ...
- IOS开发基础之团购案例17-xib和UITableView两种方式实现
IOS开发基础之团购案例17-xib和UITableView两种方式实现 Design By Johnson Shanghai 实现效果 系统和Xcode版本 注意的细节 关键性的代码 // // V ...
- iOS 自定义layer的两种方式
在iOS中,你能看得见摸得着的东西基本都是UIView,比如一个按钮,一个标签,一个文本输入框,这些都是UIView: 其实UIView之所以能显示在屏幕上,完全是因为它内部的一个图层 在创建UIVi ...
- iOS WKWebView和JS交互的两种方式
2019独角兽企业重金招聘Python工程师标准>>> 本文介绍两种方式实现iOS WKWebView和JS交互 WKWebViewConfiguration注入WKScriptMe ...
- iOS的音讯通知有两种方式,Badge Notification和Alert Notification
当应用程序不处于前台运转中时,音讯通知能将某些信息及时告知用户.比方收到新音讯.收到新邮 件.程序下载已完成或者待办事项行将开端等.目前各挪动平台上抵消息通知的设计均有所差异,各有利害.这里整理了iO ...
- js操作元素:改变元素内容有两种方式: interText 和 innerHTML的区别, 常用的元素的属性操作, 仿电脑系统时间问好 ,表单元素的属性操作 ,案例:仿京东显示隐藏密码 ,样式属性操作
文章目录 操作元素 改变元素内容有两种方式: interText 和 innerHTML的区别 常用的元素的属性操作 案例:仿电脑系统时间问好 表单元素的属性操作 案例:仿京东显示隐藏密码 样式属性操 ...
- iOS 一个类似QQ的图片添加、图片浏览Demo
自己没事修改的一个小功能, 类似QQ的 添加图片和浏览图片( 基于ImagePicker.MJPhotoBrowser.SDWebImage) 功能: 1.添加图片.删除图片 2.浏览图片 3.自动换 ...
最新文章
- Spring Cloud Alibaba 消息队列:基于 RocketMQ 实现服务异步通信
- android加固多渠道,Android 多渠道打包(使用友盟统计,结合360加固宝进行多渠道打包)...
- Kali Linux 安全渗透教程第二更Linux安全渗透简介
- 面向对象第四单元小结
- [C++STL]常用查找算法
- 洛谷 P1736 创意吃鱼法
- php preg replace中文,php preg_replace函数用法
- @SuppressWarnings注解的详解
- 面试系列(三):Java反射机制
- 用puttygen工具把私钥id_rsa转换成公钥id_rsa.ppk
- hustoj 配置java_HUSTOJ增加其他语言出现RuntimeError解决办法
- 零基础如何用平面设计排版软件PS进行布局构图
- 一箭N雕:多任务深度学习实战
- IPV6网络简介及使用
- 扫描仪扫描器的功用和原理
- JavaScript if...else 语句
- Java实验报告误差分析怎么写_系统工程实验报告-031510131-郭文豪.doc
- 烽火2640路由器命令行手册-14-桥接配置命令
- Android 无法播放此视频
- 代码分析之numpy.array