Latest 1.0.0
License MIT
Platforms ios 8.0, requires ARC

CocoaPods Compatible

FamilyTreeView is an Objective-C class that builds and displays a family tree view for iOS. It supports zooming and scrolling to explore persons in a large number.




To integrate FamilyTreeView into your Xcode project using CocoaPods, specify it in your Podfile:

platform :ios, '8.0'

target 'YourProjectName' do
   pod ‘FamilyTreeView’, '~> 1.0’

Using source files directly

1.You could directly copy and add the folder FamilyTreeView to your project.
2.Include FamilyTreeView wherever you need it with #import "FamilyTreeView.h"


Major process

    FamilyTreeView *familyTreeView = [[FamilyTreeView alloc] initWithFrame:self.view.bounds];
    familyTreeView.delegate = self;   //set self as the delegate if it needs to receive click event
    [self.view addSubview:familyTreeView];

    PersonModel *model = [[PersonModel alloc] init]; = @"Laurence Chavis";
    familyTreeView.model = model;     //the family tree will be built after setting model

    //The more intelligent way should be adopted to convert JSON to Model instead of creating models manually.
    //In demo project, class ExampleData/ExampleDataParser.m provides an example for using YYModel to convert JSON data.

Working with Xib or Storyboard(Optional)

It’s very easy to do that. Just add a UIView into XIB or Storyboard, and set the view class to FamilyTreeView. And then bind it to a property in source code like:
@property(nonatomic,weak) IBOutlet FamilyTreeView *familyTreeView;

Preparing data

The class PersonModel defines person’s information, and relations between the person and his/her mates and children. A low efficient but clear demonstration for building Laurence Chavis’s family tree:

    PersonModel *father = [[PersonModel alloc] init];
    father.personId = @"d3k4fc"; = @"Laurence Chavis";
    father.gender = male;
    father.birthday = @"1/25/1935";
    father.portraitUrl = @"";

    PersonModel *mother = [[PersonModel alloc] init];
    mother.personId = @"j8y6hd"; = @"Myra Richards";
    mother.gender = female;
    mother.birthday = @"2/12/1930";

    PersonModel *son = [[PersonModel alloc] init];
    son.personId = @"ji9ke7"; = @"Larry Chavis";
    son.gender = male;
    son.birthday = @"5/22/1952";

    mother.children = @[son];
    father.mates = @[mother];

    familyTreeView.model = father;

An efficient way to parse JSON to PersonModel is provide in Demo project:
Example data parsing


A few public properties are provided to customize the person’s view:

    self.familyTreeView.textColor = UIColor.whiteColor;
    self.familyTreeView.personViewBackgroundColor = UIColor.redColor;
    self.familyTreeView.femaleBorderColor = UIColor.yellowColor;
    self.familyTreeView.maleBorderColor = UIColor.greenColor;

Feel free to modify the source code to make it suitable for you. Alternatively, submit an issue to let me know what customization you need.

Handling event

The delegate implements follow method to handle event:

#pragma mark - FamilyTree View Delegate
- (void)personDidClick:(PersonModel *)model {
    NSLog(@"Person %@ did click",;


FamilyTreeView is released under the MIT license. See LICENSE for details.

Latest podspec

    "name": "FamilyTreeView",
    "version": "1.0.0",
    "summary": "An iOS family tree view.",
    "description": "FamilyTreeView is an Objective-C class that builds and displays a family tree.",
    "homepage": "",
    "screenshots": "",
    "license": "MIT",
    "authors": {
        "Yun Chen": "[email protected]"
    "platforms": {
        "ios": "8.0"
    "requires_arc": true,
    "source": {
        "git": "",
        "tag": "1.0.0"
    "source_files": [
    "resource_bundles": {
        "FamilyTreeView": [

Pin It on Pinterest

Share This