Rolling your own iPhone treeview control Part 1: Creating a tree node class

So here's a challenge I wasn't able to find any code online for -- creating a treeview control on iOS. It sounds so fundamental that you'd think somebody would've gotten around to doing it but -- no such luck.

Well, if you're looking for one, here's how I did mine.

I wanted to create a simple test case to do this, so I'm going to use the following mock tree as a guideline:

Root
>Node1
  >Node1a
    >Node1a1
  >Node1b
    >Node1b1
    >Node1b2
    >Node1b3
>Node2
  >Node2a
    >Node2a1

First let's go back to some POOCOs (Plain old Objective-C objects) - a tree structure. We need a class that holds an index, some sort of value, as well as a reference to its parent and an array or collection to hold its children nodes. Let's call this class MyTreeNode.

In its simplest MyTreeNode.h will look like this:

#import <Foundation/Foundation.h>

@interface MyTreeNode : NSObject {
    MyTreeNode *parent;
    NSMutableArray *children;
    int index;
    NSString *value;
}

@property (nonatomic, retain) MyTreeNode *parent;
@property (nonatomic, retain, readonly) NSMutableArray *children;
@property (nonatomic) int index;
@property (nonatomic, retain) NSString *value;

@end

...while the implementation on MyTreeNode.m looks like this:

#import "MyTreeNode.h"

@implementation

@synthesize parent, children;
@synthesize index, value;

@end

Now, note that the children attribute is of type NSMutableArray, which isn't strongly typed. To make it easier and to enforce some type-safety on the list, we'll add a method named addChild, with signature:

- (void)addChild:(MyTreeNode *)newChild;

and implementation:

- (void)addChild:(MyTreeNode *)newChild {
	newChild.parent = self;
	[self.children addObject:newChild];
}

The addChild method does two things: it adds a MyTreeNode object to the children attribute as expected, but it also sets the parent attribute of the child to the current object.

In the next post we'll figure out what basic iPhone UIControls we can use for implementing our treeview, and what else we'll need to do for MyTreeNode to work.