登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

treeTableView 模仿QQ联系人页面,实现展开折叠效果

[复制链接]
来自: 李世铿 分类: iOS精品源码 上传时间: 2016-4-15 12:54:20

项目介绍:

文:was0107 (github)

需求
  • 模仿QQ联系人页面,实现展开折叠效果;
分析
  • 很明显QQ的联系人界面,使用的是二层树型结构进行展示,另加上展开与折叠来进行当前节点及子节点是否展示;
  • 由于是列表类型,使用UITableView来进行列表展示再好不过,
  • 在分类折叠过程中,具有折叠效果,且具有吸附效果,可以使用UITableView的Section Header进行实现;
  • 由于是树型结构,故需要定义一个根节点,由根节点延伸出各子孙节点
实现
  • 1、定义树型结构的节点,目前根节点和叶子节点共用同一个数据模型
[Objective-C] 查看源文件 复制代码
@interface MTreeNode : NSObject
@property (nonatomic, readwrite, assign) BOOL expand;  // 返回当前节点是否已经展开,默认为NO
@property (nonatomic, readonly, assign) NSInteger depth; // 返回当前节点深度,默认为0,根节点为-1
@property (nonatomic, readonly, weak) MTreeNode *parentNode; // 返回当前节点的爷节点
@property (nonatomic, readwrite, strong) id content;    // 存储当前节点的数据模型
@property (nonatomic, readwrite, strong) NSMutableArray *subNodes; // 存储当前节点的子节点集合

- (instancetype)initWithParent:(MTreeNode *) parent expand:(BOOL) expand;
+ (instancetype)initWithParent:(MTreeNode *) parent expand:(BOOL) expand;
- (void) toggle;
@end

  • 2、由以上的数据结构可知,当前节点的subNodes仅保存了当前节点的信息,对于其子孙节点信息均未能呈现,需要另外定义一个数据来进行管理,为不混淆当前节点的子节点与子孙节点,另使用Category来声明子孙节点
[Objective-C] 查看源文件 复制代码
@interface MTreeNode (ExpandNode)
@property (nonatomic, strong) NSMutableArray *expandNodes;      //存储当前节点之下展开的节点

- (NSArray *) getSubExpandNodes;
@end

  • 3、MTreeView继承UITableView,声明一个根节点,及相应的方法
[Objective-C] 查看源文件 复制代码
@interface MTreeView : UITableView

@property (nonatomic, readwrite, strong) MTreeNode *rootNode;           //根节点

@property (nonatomic, readwrite, weak) IBOutlet id<MTreeViewDelegate> treeViewDelegate;


/**
 *  返回根节点的子节点数,即深度为0的节点数
 *
 *  @parames
 *  @param  treeView
 *
 *  @return 根节点的子节点数
 *
 */
- (NSInteger) numberOfSectionsInTreeView:(MTreeView *)treeView;

/**
 *  返回深度为0的所有子孙节点数
 *
 *  @parames
 *  @param  treeView
 *  @param  section
 *
 *  @return 深度为0的所有子孙节点数
 *
 */
- (NSInteger) treeView:(MTreeView *)treeView numberOfRowsInSection:(NSInteger)section;

/**
 *  展开或者折叠当前节点
 *
 *  @parames
 *  @param  indexPath   当row为负数时,则表示展开一级节点,即对应的Section点击事件处理
 *
 *  @return
 *
 */
- (void) expandNodeAtIndexPath:(NSIndexPath *)indexPath;

/**
 *  获取指定path对应的节点
 *
 *  @parames
 *  @param  indexPath   当row为负数时,则表示获取一级节点
 *
 *  @return 对应的节点
 *
 */
- (MTreeNode *) nodeAtIndexPath:(NSIndexPath *)indexPath;

@end

首先需要弄清楚,树型结构上的各节点,在UITableView是如何进行布局的,根节点(深度为-1)管理所有数据,在界面上不呈现;0级节点(深度为0)管理一级数据,对应的是Section数据;一..N级节点(深度为1..n),对应的是`UITableViewCell`,进行呈现;`UITableViewCell`根据深度,进行UI及逻辑的控制;
  • 4、在构造树的数据时,为满足叶子节点可动态增加,及动画处理,故在此设计一个回调,供业务方进行使用;
[Objective-C] 查看源文件 复制代码
@protocol MTreeViewDelegate <NSObject>

@optional

/**
 *  即将展开/关闭子节点,此代理可以动态加载子节点
 *
 *  @parames
 *  @param  treeView
 *  @param  indexPath
 *
 */
- (void) treeView:(MTreeView *)treeView willexpandNodeAtIndexPath:(NSIndexPath *)indexPath;


/**
 *  已经展开/关闭子节点,此代理可以于此进行动画效果的设置
 *
 *  @parames
 *  @param  treeView
 *  @param  indexPath
 *
 */
- (void) treeView:(MTreeView *)treeView didexpandNodeAtIndexPath:(NSIndexPath *)indexPath;

@end

测试
提供三种测试情况,一为随机组织数据,二为QQ联系人界面,三为沙盒文件查看,其中前两者数据为静态数据,沙盒数据由点击查看进行数据的动态生成,且仅生成一次。效果请参照下图
使用
  • 1、此项目依赖SDK最低版本为7.0;
  • 2、在工程中引入MTreeViewFramework.framework即可使用;




相关源码推荐:

我来说两句
*滑动验证:
所有评论(332)
时候不早了 2016-4-15 13:08:30
楼主威武啊,Code4App有你更给力!
回复
lijian0119 2016-4-15 13:32:02
楼主威武啊,Code4App有你更给力!
回复
oqec0397 2016-4-15 13:50:59
楼主威武啊,Code4App有你更给力!
回复
code_john 2016-4-15 14:02:38
很给力,Code4App有你更精彩!
回复
eybw0728 2016-4-15 14:08:07
楼主用心了,内容非常精彩。
回复
huyanpeng_ios 2016-4-15 14:11:56
学习学习!
回复
oqec0397 2016-4-15 14:16:10
很给力,Code4App有你更精彩!
回复
雨影2012 2016-4-15 14:24:33
感谢分享,Code4App有你更精彩
回复
mmli0323 2016-4-15 14:55:25
学习学习!
回复
提取码:  下载次数:467 状态:已购或VIP 售价:0(原价:5)金钱 下载权限:初级码农 
8123 0 467
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,742864542

如何获得代码达人称号?

代码贡献英雄榜
用户名 下载数
通过邮件订阅最新 Code4App 信息
上一条 /4 下一条
联系我们
关闭
合作电话:
13802416937
Email:
435399051@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| 广东互联网违法和不良信息举报中心|中国互联网举报中心|Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

快速回复 返回顶部 返回列表