Collection tree view

Question

I am looking for creating a visual representation of a tree data structure in iOS . The data stored in the node tree is an image and label, and node can contain up to 6 children.

I currently have a collection view with a custom layout, where I programmatically compute the x and y of each node when I cross my home tree.

This solution works, but simple. As I create more functionality, I expect it to fall apart.

I considered creating an image after the tree was built, and just using the image, but I plan to implement some kind of branching / crashing on the branches. I also need a way to zoom in and out throughout the tree, which doesn't seem very easy when browsing through collections.

Is there a better solution?

Answer 1

How to use only simple views inside a UIScrollView?

That way you could:

• Controlling the expansion and collapse of each node.
• Zoom in and out for a general or detailed view.
• Scrolling in the case of huge tree structures.

Here I created an example project using UIView s: https://github.com/crisisGriega/swift-simple-tree-drawer

It was a quick development, so there are many things that can be improved, for example, how to draw lines (connectors) between nodes. Also in this example, nodes are added to the UIView instead of the UIScrollView . But you can click on the nodes to show / hide your children.

Answer 2

Consider using SpriteKit instead of using UIKit components. It is not easy to create a dynamic tree-like layout using the UICollectionView , since you can see its definition of the data source, this does not mean to simulate the data of the tree, but the data of a flat list. If the data model is fundamentally different, things get harder.

With SpriteKit your node objects can be mapped to an SKSpriteNode object. The layout of the child nodes is controlled by their parent node. You can use the physics engine to automatically position nodes, as well as with the added benefit that you can avoid when overlapping with minimal effect. Last but not least, scaling and scrolling are supported in the SpriteKit field.