Swift开发TreeTableView

jopen 9年前

 

TreeTableViewWithSwift是用Swift编写的树形结构显示的TableView控件。

TreeTableViewWithSwift 的由来

在开发企业通讯录的时候需要层级展示。之前开发Android的时候有做过类似的功能,也是通过一些开源的内容进行改造利用。此次,在做ios的 同类产品时,调研发现树形结构的控件并不是很多,虽然也有但大多看起来都比较负责,而且都是用OC编写的。介于我的项目是Swift开发的,并且 TreeTableView貌似没有人用Swift编写过(也可能是我没找到)。所以打算自己动手写一个,从而丰衣足食。

TreeTableViewWithSwift 简介

开发环境:Swift 2.0,XCode版本:7.0.1,ios 9.0

代码: GitHub代码

1、运行效果

Swift开发TreeTableView

2、关键代码的解读

TreeTableViewWithSwift其实是对tableview的扩展。在此之前需要先创建一个TreeNode类用于存储我们的数据

publicclassTreeNode {

staticletNODE_TYPE_G: Int =0//表示该节点不是叶子节点

staticletNODE_TYPE_N: Int =1//表示节点为叶子节点

vartype: Int?

vardesc: String?//对于多种类型的内容,需要确定其内容

varid: String?

varpId: String?

varname: String?

varlevel: Int?

varisExpand: Bool = false

varicon: String?

varchildren: [TreeNode] = []

varparent: TreeNode?

init(desc: String?, id:String? , pId: String? , name: String?) {

self.desc= desc

self.id= id

self.pId= pId

self.name= name

}

//是否为根节点

funcisRoot() -> Bool{

returnparent == nil

}

//判断父节点是否打开

funcisParentExpand() -> Bool {

ifparent == nil {

returnfalse

}

return(parent?.isExpand)!

}

//是否是叶子节点

funcisLeaf() -> Bool {

returnchildren.count==0

}

//获取level,用于设置节点内容偏左的距离

funcgetLevel() -> Int {

returnparent == nil ?0: (parent?.getLevel())!+1

}

//设置展开

funcsetExpand(isExpand: Bool) {

self.isExpand= isExpand

if!isExpand {

for(vari=0;i

children[i].setExpand(isExpand)

}

}

}

}

这里需要讲解一下,id和pId分别对于当前Node的ID标示和其父节点ID标示。节点直接建立关系它们是很关键的属性。children是一 个TreeNode的数组,用来存放当前节点的直接子节点。通过children和parent两个属性,就可以很快的找到当前节点的关系节点。

为了能够操作我们的TreeNode数据,我还创建了一个TreeNodeHelper类。

classTreeNodeHelper {

//单例模式

classvarsharedInstance: TreeNodeHelper {

structStatic {

staticvarinstance: TreeNodeHelper?

staticvartoken: dispatch_once_t =0

}

dispatch_once(&Static.token) {//该函数意味着代码仅会被运行一次,而且此运行是线程同步

Static.instance= TreeNodeHelper()

}

returnStatic.instance!

}

TreeNodeHelper是一个单例模式的工具类。通过TreeNodeHelper.sharedInstance就能获取类实例

//传入普通节点,转换成排序后的Node

funcgetSortedNodes(groups: NSMutableArray, defaultExpandLevel: Int) -> [TreeNode] {

varresult: [TreeNode] = []

varnodes = convetData2Node(groups)

varrootNodes = getRootNodes(nodes)

foriteminrootNodes{

addNode(&result, node: item, defaultExpandLeval: defaultExpandLevel, currentLevel:1)

}

returnresult

}

getSortedNodes是TreeNode的入口方法。调用该方法的时候需要传入一个Array类型的数据集。这个数据集可以是任何你想用 来构建树形结构的内容。在这里我虽然只传入了一个groups参数,但其实可以根据需要重构这个方法,传入多个类似groups的参数。例如,当我们需要 做企业通讯录的时候,企业通讯录的数据中存在部门集合和用户集合。部门之间有层级关系,用户又属于某个部门。我们可以将部门和用户都转换成 TreeNode元数据。这样修改方法可以修改为:

func getSortedNodes(groups: NSMutableArray, users: NSMutableArray, defaultExpandLevel: Int) -> [TreeNode]

是不是感觉很有意思呢?

//过滤出所有可见节点

funcfilterVisibleNode(nodes: [TreeNode]) -> [TreeNode] {

varresult: [TreeNode] = []

foriteminnodes {

ifitem.isRoot() || item.isParentExpand() {

setNodeIcon(item)

result.append(item)

}

}

returnresult

}

//将数据转换成书节点

funcconvetData2Node(groups: NSMutableArray) -> [TreeNode] {

varnodes: [TreeNode] = []

varnode: TreeNode

vardesc: String?

varid: String?

varpId: String?

varlabel: String?

vartype: Int?

foritemingroups {

desc = item["description"]as? String

id = item["id"]as? String

pId = item["pid"]as? String

label = item["name"]as? String

node = TreeNode(desc: desc, id: id, pId: pId, name: label)

nodes.append(node)

}

/**

*设置Node间,父子关系;让每两个节点都比较一次,即可设置其中的关系

*/

varn: TreeNode

varm: TreeNode

for(vari=0; i

n = nodes[i]

for(varj=i+1; j

m = nodes[j]

ifm.pId== n.id{

n.children.append(m)

m.parent= n

}elseifn.pId== m.id{

m.children.append(n)

n.parent= m

}

}

}

foriteminnodes {

setNodeIcon(item)

}

returnnodes

}

convetData2Node方法将数据转换成TreeNode,同时也构建了TreeNode之间的关系。

//获取根节点集

funcgetRootNodes(nodes: [TreeNode]) -> [TreeNode] {

varroot: [TreeNode] = []

foriteminnodes {

ifitem.isRoot() {

root.append(item)

}

}

returnroot

}

//把一个节点的所有子节点都挂上去

funcaddNode(inoutnodes: [TreeNode], node: TreeNode, defaultExpandLeval: Int, currentLevel: Int) {

nodes.append(node)

ifdefaultExpandLeval >= currentLevel {

node.setExpand(true)

}

ifnode.isLeaf() {

return

}

for(vari=0; i

addNode(&nodes, node: node.children[i], defaultExpandLeval: defaultExpandLeval, currentLevel: currentLevel+1)

}

}

//设置节点图标

funcsetNodeIcon(node: TreeNode) {

ifnode.children.count>0{

node.type= TreeNode.NODE_TYPE_G

ifnode.isExpand{

//设置icon为向下的箭头

node.icon="tree_ex.png"

}elseif!node.isExpand{

//设置icon为向右的箭头

node.icon="tree_ec.png"

}

}else{

node.type= TreeNode.NODE_TYPE_N

}

}

}

剩下的代码难度不大,很容易理解。需要多说一句的TreeNode.NODE\_TYPE\_G和TreeNode.NODE\_TYPE\_N是用来告诉TreeNode当前的节点的类型。正如上面提到的企业通讯录,这个两个type就可以用来区分node数据。

TreeTableView我的重头戏来了。它继承了UITableView,UITableViewDataSource,UITableViewDelegate。

functableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

//通过nib自定义tableviewcell

letnib = UINib(nibName:"TreeNodeTableViewCell", bundle: nil)

tableView.registerNib(nib, forCellReuseIdentifier: NODE_CELL_ID)

varcell = tableView.dequeueReusableCellWithIdentifier(NODE_CELL_ID)as! TreeNodeTableViewCell

varnode: TreeNode = mNodes![indexPath.row]

//cell缩进

cell.background.bounds.origin.x = -20.0* CGFloat(node.getLevel())

//代码修改nodeIMG---UIImageView的显示模式.

ifnode.type== TreeNode.NODE_TYPE_G{

cell.nodeIMG.contentMode= UIViewContentMode.Center

cell.nodeIMG.image= UIImage(named: node.icon!)

}else{

cell.nodeIMG.image= nil

}

cell.nodeName.text= node.name

cell.nodeDesc.text= node.desc

returncell

}

tableView:cellForRowAtIndexPath方法中,我们使用了UINib,因为我通过自定义TableViewCell,来填充tableview。这里也使用了cell的复用机制。

下面我们来看控制树形结构展开的关键代码

func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {

var parentNode = mNodes![indexPath.row]

var startPosition = indexPath.row+1

var endPosition = startPosition

if parentNode.isLeaf() {//点击的节点为叶子节点

// do something

} else {

expandOrCollapse(&endPosition, node: parentNode)

mNodes = TreeNodeHelper.sharedInstance.filterVisibleNode(mAllNodes!) //更新可见节点

//修正indexpath

var indexPathArray :[NSIndexPath] = []

var tempIndexPath: NSIndexPath?

for (var i = startPosition; i < endPosition ; i++) {

tempIndexPath = NSIndexPath(forRow: i, inSection: 0)

indexPathArray.append(tempIndexPath!)

}

//插入和删除节点的动画

if parentNode.isExpand {

self.insertRowsAtIndexPaths(indexPathArray, withRowAnimation: UITableViewRowAnimation.None)

} else {

self.deleteRowsAtIndexPaths(indexPathArray, withRowAnimation: UITableViewRowAnimation.None)

}

//更新被选组节点

self.reloadRowsAtIndexPaths([indexPath], withRowAnimation: UITableViewRowAnimation.None)

}

}

//展开或者关闭某个节点

func expandOrCollapse(inout count: Int, node: TreeNode) {

if node.isExpand { //如果当前节点是开着的,需要关闭节点下的所有子节点

closedChildNode(&count,node: node)

} else { //如果节点是关着的,打开当前节点即可

count += node.children.count

node.setExpand(true)

}

}

//关闭某个节点和该节点的所有子节点

func closedChildNode(inout count:Int, node: TreeNode) {

if node.isLeaf() {

return

}

if node.isExpand {

node.isExpand = false

for item in node.children { //关闭子节点

count++ //计算子节点数加一

closedChildNode(&count, node: item)

}

}

}

我们点击某一个非叶子节点的时候,将该节点的子节点添加到我们的tableView中,并给它们加上动画。这就是我们需要的树形展开视图。首先我 们要计算出该节点的子节点数(在关闭节点的时候,还需要计算对应的子节点的子节点的展开节点数),然后获取这些子节点的集合,通过tableview的 insertRowsAtIndexPaths和deleteRowsAtIndexPaths方法进行插入节点和删除节点。

tableview:didSelectRowAtIndexPath还算好理解,关键是expandOrCollapse和closedChildNode方法。

expandOrCollapse的作用是打开或者关闭点击节点。当操作为打开一个节点的时候,只需要设置该节点为展开,并且计算其子节点数就可 以。而关闭一个节点就相对麻烦。因为我们要计算子节点是否是打开的,如果子节点是打开的,那么子节点的子节点的数也要计算进去。可能这里听起来有点绕口, 建议运行程序后看着实例进行理解。

3、鸣谢

借鉴的资料有:

* [swift可展开可收缩的表视图](http://www.jianshu.com/p/706dcc4ccb2f)

* [Android打造任意层级树形控件考验你的数据结构和设计](http://blog.csdn.net/lmj623565791/article/details/40212367)

有兴趣的朋友也可以参考以上两篇blog。