How to create a UITableView with multi-level extensible folding rows?

Question

I need to create a table view (iPad application) that can show and collapse rows at different levels:

- Client 1 - Category 1 - Info 1 - Info 2 - Category 2 - Info 1 - Info 2 - Category 3 - Info 1 - Info 2 - Client 2 - Category 1 - Info 1 - Info 2 

etc.

If a user clicks on a client line, all lines associated with the client (categories and information under this client) should expand / collapse. On the other hand, if they use a certain category only for this category, it should expand / contract.

So, I plan to have nested NSMutableDictionaries for storing data that I can access using dynamic keys (for example, dynamic client names), but I'm not sure if this approach will really work to solve the actual problem (make collapsible parts). Also, I'm not sure what to use only the lines and make them look like the heading sections or to use the actual sections, because as far as I know, I cannot make subsections to achieve three levels of nesting.

Any ideas? I saw examples of projects with extensible strings, but I'm still confused.

Help!

Answer 1

The GitHub TLIndexPathTools library is very suitable for this kind of thing. To demonstrate, I put together a simple component builder to view the tree . It supports any depth of the tree, using cells at each level. Try to start the Outline project.

The tree component is incomplete, but hopefully this should be a good start.

Answer 2

I think nested dictionaries would be inconvenient for – tableView:cellForRowAtIndexPath:

Here's the lazy solution:

Use NSMutableArray and UITableView with rows masked to look like sections. The objects in the array will have a property called NSMutableArray child types. When expanding the parent element, clear the child array and insert it after the parent. When collapsing, continue to move objects to child objects until they reach an element with the same level as the parent.

Then for animation: – insertRowsAtIndexPaths:withRowAnimation: or – deleteRowsAtIndexPaths:withRowAnimation: Either the UITableViewRowAnimationTop or the UITableViewRowAnimationFade will look good.