Toggle showing/hiding child table cells iOS

Question

I'm trying to create a UITableview that contains STATES and CITIES. To start with, I'd like the table to display only the STATES, with each value having a downward facing disclosure arrow on the right hand side of the cell which lets the user know it has values underneath it. If the user clicks the arrow, the table would expand to show the CITIES associated with the selected STATE. The user could then either select a CITY, or click on a upward facing disclosure arrow which would then "hide" the CITIES.

I've downloaded and reviewed Apples "Table View Animations and Gestures" example. I was hoping someone might know a simpler way of accomplishing what I'm asking for.

http://developer.apple.com/library/ios/#samplecode/TableViewUpdates/Introduction/Intro.html

Answer 1

Good Job on explaining exactly what you want to do. This is how I would tackle this, I figure it would be easier to explain it without giving you meaningless code and answer any coding concerns you might have after.

I would set up the table view data source to be an array of arrays. The idea would be that every index in the array would represent a state and therefore contain a number of cities, hence ever index contains an array (array of cities). The parent array(of states) will be empty at the beginning, but the arrays(of cities) that will later fill it would be populated with the appropriate cities.

I would then set up the table view to contain sections (I a tempted to put code here, but read along). The sections would represent the cities. You can then fill out the table view with sections using (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section delegate. On the first run you can fill the actual table with one cell per section (maybe with the word "expand" or "more" and your down arrow). When the user touches that cell you can use the didselectrowatindexpath to know which section was touched (the indexpath object contains the section), now that you know which section it is, just modify the data source by adding the array of cities for that section of the array of arrays (parent array) and update the tableview.

This essentially gives your tableview an according style and feel. It is very easy to implement but requires a little bit of code. I have done this and am willing to provide the code you might need, the trickiest part would be to update the tableview in the correct way.

EDIT CODE:

I did a simple example following above explanation. The code is on Github , feel free to ask any questions about it.

Answer 2

Normally such thing is done by seguing to another view and showing more details about cell.

What you want you could achieve by actually making custom UITableViewCell which would contain UIButton with arrow image and UITableView. In case button is clicked for the first time you could reload your cell and create inner UITableView which could show cities. Another click would simply reload cell again and not return inner UITableView at all. You also need to keep selected state somewhere because you may have to reload previous cell and hide inner table in case arrow in other cell is clicked.

Answer 3

I think a better way to represent this information would be to have a UITableView containing the states with each state showing a tiny arrow pointing to the right. Then, when a user clicks on the state, load the next UITableView that shows all of the cities in that particular state. Using a UIViewController for pushing the City list will allow users to easily return to the States list.

This approach will make much more sense to iOS Users, because this is how they expect Tables to work.

There are many tutorials explaining how to use UITableView. Here is a link to a site with many UITableView tutorials. The tutorial I linked to explains pushing a UIViewController on to the stack so that there is a simple back button back to the State list.