UIHierarchyView Objective C iOS platform

UIHierarchyView Objective C iOS platform

UIHierarchyView is an Objective C library to visualize any hierarchy tree structure.
It supports you with an api to create your tree structure and to add your custom cell views.


The Library components

  1. HierarchyScrollView
  2. TreeViewer
  3. TreeViewerDelegate

Sample code for testing

  1. Node
  2. TreeViewerViewController

When to use the Hierarchy View:

Consider yourself trying to visualize a supervision hierarchy in a company or any other tree hierarchy, and each node may have multi-children.
Here we can use this library, it supports you with a view that visualize your tree.
You can also add a custom cell view for each node.

How to use the Hierarchy View:

To use the Hierarchy View you need to

  1. Create Node class that adopts <TreeViewerDelegate>.
  2. Create your custom view for each node.
  3. Create your tree structure.
  4. Finally Initialize our Hierarchy View with the root node of the tree.

Here is the protocol that your node should adopt

[code language=”objc”]
@protocol TreeViewerDelegate

#pragma mark – view parameters:
// a custom view that user want for each node.
@property (nonatomic,strong) UIView * nodeView ;
// the weight of the node (number of leaf children).
@property (nonatomic) int weight;
// start x position of node.
@property (nonatomic) int startX;

// background of the container view of nodes
@property (nonatomic,strong) UIColor * backgroundColor ;

#pragma mark – data parameters:
// this is a unique identifier for the node
@property (nonatomic,strong) NSString *identifier;
// array of node children
@property (nonatomic,strong) NSMutableArray * children;

#pragma mark – listeners:
// here we handle tapping the view
– (void)viewTapped:(UITapGestureRecognizer *)recognizer ;



The protocol properties:

  • identifier: here you must set a unique identifier for each node.
  • children: here you must set the children nodes for each node.
  • backgroundColor: here you can set the background color for the view.
  • nodeView: a custom view for each node (below an example for a custom view).

The listeners:

  • viewTapped: here you can handle tapping any view in the tree.

Create Node class:

here is the header file of our Node.h

[code language=”objc”]
@interface Node : NSObject

-(instancetype) initWithIdentifier:(NSString *)identifier andInfo:(NSDictionary *)info;
-(instancetype) initWithChildren:(NSArray *)children andIdentifier:(NSString *) identifier andInfo:(NSDictionary *)info;


@property (nonatomic,strong) NSString *name;
@property (nonatomic,strong) NSString *position;
@property (nonatomic,strong) NSString *imageName;


as you see the Node adopts <TreeViewerDelegate>
and here we put some data properties: name, position and imageName.

here is the implementation file of our Node.m

[code language=”objc”]
@implementation Node

@synthesize weight=_weight;
@synthesize startX=_startX;
@synthesize identifier=_identifier;
@synthesize children=_children;
@synthesize nodeView=_nodeView;
@synthesize backgroundColor=_backgroundColor;

– (void)viewTapped:(UITapGestureRecognizer *)recognizer {

-(instancetype) initWithIdentifier:(NSString *)identifier andInfo:(NSDictionary *)info{
self=[super init];
self.name=[info objectForKey:@”Name”];
self.imageName=[info objectForKey:@”ImageName”];
self.position=[info objectForKey:@”Position”];

self.children=[[NSMutableArray alloc]init];
return self;
-(instancetype) initWithChildren:(NSArray *)children andIdentifier:(NSString *) identifier andInfo:(NSDictionary *)info{
self=[super init];
self.name=[info objectForKey:@”Name”];
self.imageName=[info objectForKey:@”ImageName”];
self.position=[info objectForKey:@”Position”];

self.children=[[NSMutableArray alloc]initWithCapacity:children.count];
for(id child in children){
if([child isKindOfClass:[Node class]])
[self.children addObject:child];
return self;

as you see we synthesize the protocol properties to use it
and here we have the viewTapped listener and an initialization methods for the node with Info.

Create your custom view:

In your ViewController where you will use our HierarchyView, you can create any custom view (for each node) and pass it to your id<TreeViewerDelegate> and this view will be the node view.
we created a custom view in the storyboard and used it as our cell custom view.
here we create a view that has image in the left and 2 labels in the right.
Consider the node is an employee node and the image is the employee image, the upper label is his name and the lower label is his position.

[code language=”objc”]
@interface CustomNodeView ()

@property (strong,nonatomic) IBOutlet UIImageView *nodeImageView;
@property (strong,nonatomic) IBOutlet UIImageView *employeeImageView;
@property (strong,nonatomic) IBOutlet UILabel *titleLabel;
@property (strong,nonatomic) IBOutlet UILabel *positionLabel;


@implementation CustomNodeView

-(void)createViewWithNode :(Node *) node{
UIImage *image;
if([node.position isEqual:@”Co-founder & CEO”])
image=[UIImage imageNamed:@”5″];
else if([node.position isEqual:@”Android Developer”])
image=[UIImage imageNamed:@”1″];
else if([node.position isEqual:@”Team Leader”])
image=[UIImage imageNamed:@”3″];
else if([node.position isEqual:@”Co-founder”])
image=[UIImage imageNamed:@”4″];
else if([node.position isEqual:@”iOS Developer”])
image=[UIImage imageNamed:@”6″];
image=[UIImage imageNamed:@”2″];
self.nodeImageView.image = image;

UIImage *nodeImage=[UIImage imageNamed:node.imageName];
self.employeeImageView.image =nodeImage;

self.employeeImageView.layer.cornerRadius = self.employeeImageView.frame.size.width / 2.f;
self.employeeImageView.layer.masksToBounds = YES;



– (id)initWithFrame:(CGRect)frame
self = [super initWithFrame:frame];
if (self) {

return self;


Create your Tree structure:

You can create your own tree structure
here we have 9 nodes and we added children like in the example
then we assign the node view with the pre-created custom view.

[code language=”objc”]
-(id<TreeViewerDelegate>) setup{
// Our Tree structure is in plist file.
NSURL *employeesFile = [[NSBundle mainBundle] URLForResource:@”EmployeesTree” withExtension:@”plist”];
NSDictionary *rootInfo = [NSDictionary dictionaryWithContentsOfURL:employeesFile];

//traverse the tree from plist and create node.
int count=0;
NSMutableArray *visited=[[NSMutableArray alloc]init];
// a queue to insert visited nodes in.

Node * root= [[Node alloc] initWithIdentifier:[[NSString alloc]initWithFormat:@”i_%d”,count] andInfo:rootInfo];
NSMutableArray *queue=[[NSMutableArray alloc]init];
NSMutableArray *nodeQueue=[[NSMutableArray alloc]init];
NSMutableArray *nodes=[[NSMutableArray alloc]init];

[nodeQueue addObject:root];
[queue addObject:rootInfo];
[visited addObject:rootInfo];

NSDictionary *nodeInfo=[queue objectAtIndex:0];
Node *parent=[nodeQueue objectAtIndex:0];
[nodes addObject:parent];
[queue removeObjectAtIndex:0];
[nodeQueue removeObjectAtIndex:0];
for(id childInfo in [nodeInfo objectForKey:@”Children”]){
if(![visited containsObject:childInfo]){
Node * node= [[Node alloc] initWithIdentifier:[[NSString alloc]initWithFormat:@”i_%d”,count] andInfo:childInfo];
[parent.children addObject:node];
[nodeQueue addObject:node];
[queue addObject:childInfo];
[visited addObject:childInfo];

UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@”Main_iPhone” bundle:nil];

for (int i=0;i<[nodes count];i++) {
UIViewController *vc = [storyboard instantiateViewControllerWithIdentifier:@”CustomViewConroller”];
CustomNodeView * customView = (CustomNodeView *)[vc.view viewWithTag:25];
[customView createViewWithNode:((Node *)nodes[i])];
((Node *)nodes[i]).nodeView = customView;

return root;


Create our Hierarchy view:

Here we initialize our HierarchyScrollView with root node.

[code language=”objc”]
– (void)viewDidLoad
[super viewDidLoad];
id root = [self setup];

HierarchyScrollView *view =[[HierarchyScrollView alloc]initWithFrame:self.view.bounds andWithRoot:root];
[self.view addSubview:view];


About The Author


No Comments

Leave a Reply