(858) 586 7777 | About | Testimonials | Contact
vteams vteams vteams vteams
  • How does it work?
    • Startup Process
    • Your First Day
  • Technologies
    • Hire PHP Developer
    • Hire App Developer
    • Hire JavaScript Developer
    • Hire ROR Developer
    • Hire IOS Developer
    • Hire .NET Developer
    • Hire AI Developer
    • Hire Robotics Engineer
  • Sample Budgets
  • Meet The Team
  • Experiments
  • Captain’s Log
  • Blog
vteams vteams
  • How does it work?
    • Startup Process
    • Your First Day
  • Technologies
    • Hire PHP Developer
    • Hire App Developer
    • Hire JavaScript Developer
    • Hire ROR Developer
    • Hire IOS Developer
    • Hire .NET Developer
    • Hire AI Developer
    • Hire Robotics Engineer
  • Sample Budgets
  • Meet The Team
  • Experiments
  • Captain’s Log
  • Blog
Blog
  1. vteams
  2. Blog
  3. How to build tree structure using native iOS UITableView
May 16

How to build tree structure using native iOS UITableView

  • May 16, 2014

Khawar-n-Mujtaba---iOS-UITableVIewOur client came with a requirement of ‘meetings and to-do tasks’ application for iPad. Besides the basic to-do tasks functionality, this application had a complex UI requirement:

  • The task list should be organized in a hierarchical nested list structure.
  • It should also have expand/collapse functionality with smooth sliding animation.
  • User should also be able to create new items at any position.
  • User should sort items by moving an item from original position to any other position.

JavaScript to Objective-C:

The Parent-Child list like functionality was already working in a web application. The HTML tags, <ul>, <li> provide an excellent Parent-Child relationship among visual components. With the help of jQuery plugins, it is a piece of cake to organize components in a nested list order.

Unfortunately, there was no such Parent-Child relationship available in Apple’s iOS SDK. The only component to draw a listing is UITableView but it doesn’t provide any nested list like structure.

Implementation Ideas:

  • First of all we looked for some open sources for Tree like view implementation but due following limitation it couldn’t become a solution.Limitations: Unfortunately none of them was providing functionality like; re-ordering and creating new items at specific position.
  • Another possibility was to create this structure from scratch using another component provided by Apple’s iOS SDK; i.e: UIView. The UIView component is similar to <div> element tag in HTML, but in addition the UIView component is capable of containing other child UIView components. Adding new child components is easy.Limitations: Idea of implementing above requirement from scratch was good in a sense that it was now possible to achieve our goal, but creating a list structure from scratch was time consuming when adjusting each UIView’s placement in vertical order. The UIView components are not automatically positioned when some other UIView components are added or deleted. In a vertical listing of 5 UIView components, if a new component is added at position 2, we have to make many updates in UI:
    1. Manually calculate the area of newly added item to place it at position 2 (adjusting width, height, x, y)
    2. Shift next components at position 3, 4, 5 to bottom (increase there y positions as much as the height of newly created item)
    3. Adjust overall page scrolling (so that if bottom components go out of screen they can accessed by scrolling)
    4. Same tedious calculation was needed when some item is deleted.

Solution Implemented:-

1- Maintaining Hierarchy:

After trying many possibilities, we finally decided not to re-invent the wheel. We used iOS built-in UITableView component which at least provides a single nested level list structure with automatic scroll handling. But this time instead of completely depending on this UI component, we created a data structure that keeps track of each Parent-Child relationship among data items.  Some of its responsibilities provide the following information about data items:

  • (BOOL)isRoot;
  • (BOOL)isChild;
  • (BOOL)hasChildren;
  • (int)numberOfChildren;
  • (int)indentationLevel;
  • (BOOL)isNodeFirstChild;
  • (BOOL)isNodeLastChild;
  • (MKTreeNode *)getNextSiblingForNode;
  • (MKTreeNode *)getPreviousSiblingForNode;
  • (MKTreeNode *)getFirstChildOfNode;
  • (MKTreeNode *)getLastChildOfNode;

The data structure we created provides all information that we need to display an item and compute our custom logics on it. So now we are just using single nested level UITableView component. While displaying data items on the list, we check if it is a child item, we just indent all contents in it to the right with a fixed ‘x’ offset value, giving it a look of a child item.

2- Achieving Expand/Collapse functionality:

The second part of the requirement was the expand/collapse functionality, which again UITableView doesn’t provide. For this, we got the idea from some open sources. The basic idea was to remove the child data items with sliding animation in case of collapse. When need to expand it, we just add data items with sliding animation. This was also handled by our data structure:

  • (void)addChild:(MKTreeNode *)newChild;
  • (void)addChild:(MKTreeNode *)newChild atIndex:(NSUInteger)newIndex;
  • (void)removeChild:(MKTreeNode *)child;

We managed a two dimensional temporary array, which was responsible for getting data from data structure and displaying it on screen. To maximize the adding/removing performance, we are doing remove/add operations on this two dimensional array.

3- Re-Order items/Sorting:

The requirement of re-ordering of items also becomes easy with our handy data structure. Just remove children from previous parent items, and add them in new parent. After that, re-draw the list using UITableView’s built-in method i.e.:

  • [treeTableView reloadData];

By removing the default separator lines, we got a nested list like view:

Nested list like structure

  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail

Comments are closed.

SEARCH BLOG

Categories

  • Blog (490)
  • Captain's Log (1)
  • Closure Reports (45)
  • Experiments (7)
  • How-To (56)
  • Implementation Notes (148)
  • Learn More (156)
  • LMS (8)
  • Look Inside (10)
  • Operations Log (12)
  • Programmer Notes (20)
  • R&D (14)
  • Rescue Log (4)
  • Testimonials (25)
  • Uncategorized (4)

RECENT STORIES

  • GitHub Actions- Automate your software workflows with excellence
  • Yii Framework – Accomplish Repetitive & Iterative Projects with Ease
  • A Recipe for CRM Software Development
  • Are Agile and DevOps the same?
  • The Data Scientist’s Toolset

ARCHIVES

In Short

With the vteams model, you bypass the middleman and hire your own offshore engineers - they work exclusively for you. You pay a reasonable monthly wage and get the job done without hassles, re-negotiations, feature counts or budget overruns.

Goals for 2020

  • Open development center in Australia
  • Complete and Launch the Robot
  • Structural changes to better address Clients' needs

Contact Us

Address: NEXTWERK INC.
6790 Embarcadero Ln, Ste 100,
Carlsbad, CA 92011, USA

Tel: (858) 586 7777
Email: fahad@nextwerk.com
Web: www.vteams.com

© 2020 vteams. All Rights Reserved.

Content Protection by DMCA.com