iOS: Displaying Nested Hierarchical Data with Swift

iOS: Displaying Nested Hierarchical Data with Swift

One of the limitations, or struggles, of iOS development is that we can’t move at the same pace as web releases. If you have some content you want added you either have to push out a new update, or, like I’ll show here shortly, find some sort of mechanism to handle dynamic data coming from an external source. What we’ll go through is a great way of displaying hierarchical data with the help of self referencing storyboard scenes, a navigation controller and a single network call. This sort of structure is great for FAQ pages, help sections or even settings pages to an app.

iOS-8-Battery-Usage

The network call

The point of this exercise is to be able to remotely update content within our app and yet not just dump it into a WebView. So we’ll need a network call in our ViewController.swift. It’s super simple, on ViewDidLoad we just fire off the request, when it’s done the completion handler calls back and all is well:

So far our data looks like this:

You can see there are children and titles. It’s a nested data structure with some arrays and some dictionaries. Each children component is considered a level. Let’s now setup our storyboard to handle this type of data.

Self Referencing Storyboards

We’ll drag on a UITableView and hook it up to its outlet and UIViewController for the datasource. Set the protocol to be the UITableViewDataSource, UITableViewDelegate and the two required delegate methods so it all checks out.

Drag on a custom UITableViewCell to the UITableView. You will need to set the reuseIdentifer of the cell so that we can use that asset. Next click on the segue and give it an identifier like “showNextPage”.

Now the secret sauce, create another cell, label it FakeCell, or whatever, the new generic cell highlighted, go over to the connection inspector and drag “Selection” in the triggered segues over to the same UIViewController we’re on, select show as the transition type. This basically sets up a segue on the scene so we can call the segue on it self in code.

Screen Shot 2015-03-23 at 10.54.35 am

Next generate a new UITableViewCell class so we can have a custom outlet to hook up a label we’ll drop in there. Make the new class then hook up the label to the outlet:

Your storyboard should now look like:

Screen Shot 2015-03-23 at 10.46.37 am

Checklist:

  1. Add a UITableView
  2. Hook up the datasource and outlets
  3. Add in a custom UITableViewCell to be used for presentation and set it’s triggered segue of “Selection” to be that of the UIViewController
  4. Add in a custom Fake UITableViewCell
  5. Add a label to the cell and hook up the outlet for the label
  6. Ensure you have specified the ReuseIdentifer for the cell

Getting Data In

Now that we have the table setup and hooked up we should go about filling in the datasource delegate methods for the UITableView:

Also our delegate method for when a cell has been tapped:

And updating the viewDidLoad method so that the tableView data is reloaded:

Setting the data for the next screen

All that is left is to pass on the data!

This will check we’re on the right segue, then look at the selected row we tapped on, and grab the child data to pass onto the next instance of our VC. Pretty simple? Well. Fire up the app, you’ll notice that we’re always hitting the root level data. Our viewDidLoad method is getting in the way and firing off a network task again, so lets fix it:

Great!

But How Do I go Back?

We will need to embed our VC in a NavigationController. Go back to your storyboard then click on the ViewController and go to “Editor -> Embed In -> Navigation Controller”. Now fire up the app. This actually broke my segue on the VC from the tableCell, so reattach that.

But what about showing content?

In your:

You can test if the row has any children or not. If it does not then you can segue off to another VC, easily set up in your storyboard and then go about setting the segue identifier and setting content in prepareForSegue. Nifty hey? Just ensure that you take out the:

Otherwise that may drive you mad.

Yeah… I’m Lost

Don’t worry, you can grab the final product here:
https://github.com/voidet/InfiniteNestedData

Posted by voidet

Categorised under ios
Bookmark the permalink or leave a trackback.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

or