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
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.
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.
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.
Related
Has anyone found a really good way to handle this case in UI? We have a tableview with a list of items (long list). Each item is a row and it can be either "selected" or it can be drilled into to see it's children. What we have in our design (which looks confusing to users because they are used to selecting entire cell and not specific buttons on it) is 2 buttons on the cell (checkmark button and arrow button). Has anyone found a better way of solving this from design perspective?
Thank you very much. (Current design attached below)
I believe this question belongs to the UX Stack Exchange site so I'm flagging it
That being said, have a look at Detail Disclosure Buttons. From the HIG:
When a Detail Disclosure button is present in a table row, tapping the button shows additional information. Tapping elsewhere selects the row or results in app-defined behavior.
I'm trying to find the right UI pattern for connecting a list of items in a UITableView to a choice of destinations. In a UITableView I have a list of food items. I want the user to be able to select one of them and then either see a list of ingredients or to see nutritional information for that food item.
The best approach I can think of is to use a Tab Bar Controller where the first view is the list of ingredients. If the user has selected one food item, depending on which other tab they tap on they go to either the ingredients or nutritional information for that specific food item. But that doesn't seem like an appropriate use of a Tab Bar Controller, which typically shows different views that are not so directly related.
Another UI approach I can think of is to expose disclosure indicators for the food item cells and somehow make a long-press on the selected UITableView row display a pop-up menu that allows the user to select the desired destination. But A) it won't be obvious to a user that a long-press gesture will do something, B) it's not clear what a simple short press should do (and it would be non-intuitive for it to do nothing), and C) I'm not sure how to implement the pop-up choice in this case anyway. So my conclusion is there must be a better way.
How can this be done in a way that is consistent with iOS UI conventions?
The solution I settled on was to have UITableView that displays the list of food items, where selecting one of the items segues to another UITableView with three sections:
A 'label' view with a summary of the item that was selected. In my case it includes an UIImage of the food. The point is to show the user which item the selected.
A section showing the ingredients
A section showing the nutritional information
The benefit of this approach is that it also works well in a splitViewController.
I'm trying to create an app where multiple lists can be switched between using a button. Does anyone have any advice on the best way to do this, preferably using storyboard (my Swift skills leave a lot to be desired)? Right now I only have one list (a TableView) which is contained in a Container View, along with two other regular Views, one at the top and one at the bottom of the Container View, with the TableView in the middle. I want to have a button in the top regular View that switches between multiple TableViews. I want the number of TableViews to be dynamic, starting with one, but then the user can add additional tables as they need. Any advice on how to set this up would be greatly appreciated! Is it even possible to create a prototype TableView? Is that the way to go here? I've found a couple of Answers on Stack Overflow regarding multiple tables on a single screen, but these lists wouldn't be on a single screen, they would only be viewable one at a time: if you want to see the second list, you have to press the "Next List" button (in the View at the top of the Container View), and the first list disappears and is replaced with the second. Thanks everybody!
Don't change table views, change datasources. Use a single table view as you have it, and one array for each mode that the table is in (call those arrayA and arrayB). Another array-type variable -- call it theModel -- should be set to point to A or B.
The datasource methods will answer the count of theModel, and get values for the cells from theModel. When the user presses the button...
self.theModel = (self.theModel== self.arrayA)? self.arrayB : self.arrayA
self.tableView.reloadData()
// everywhere else, use theModel as the datasource
So I stumbled upon a rather inconvenient 'feature' of the iOS SDK last night, and I wanted to share my finding and solution with you guys. Also to get input, should there be a better solution.
Scenario
I had a table view set up with two sections, on for favorite items another for all other items. Tapping a row in the table view would toggle whether the item is marked as favorite; tapping a row in the favorite items section, would remove it from favorites, while tapping a row in the all other items section would add this item to the favorites.
When the state of favorite is toggled, I use moveRowAtIndexPath:toIndexPath: to do a nice little animation and move the row from favorites section to all others section.
Problem
So, the problem occured because, not only should the user be able to toggle favorite state, also all of the items in the favorites section should be rearrangeable. Thus I wanted to display a rearrange control in each row of the favorite items section.
However, a cell isn't redrawn when invoking moveRowAtIndexPath:toIndexPath: and fromIndexPath and toIndexPath are both in the visible area. This means that the rearrange control is not displayed when adding a new row to the favorite items section.
Solution
After looking through page-after-page in the documentation, thread on StackOverflow and trying out various stuff, I finally found a solution.
Immediately after calling moveRowAtIndexPath:toIndexPath: I also invoke the following lines:
[cell setEditing:NO]
[cell setEditing:YES]
Which would cause that one cell to understand that it's restriction for rearrangement has changed, thus show/hide the rearrange control appropriately.
I find this solution to be very hacky, so I'd be happy to hear about better solutions. But at least, a solution is out here now, for other people to enjoy.
I am using a standard grouped style UITableView that returns a custom header view for one of it's sections (using the tableView's delegate method viewForHeaderInSection:). The view that is returned for the section header contains a control. It displays an image and is a control so it can tapped to let the user change the image. My desired UI is similar to the photo for a contact in the Apple Contacts app (a floating imageView-like control in a grouped style table).
The problem I'd like to solve is that touches on the tableView section header go straight to the control. I'd like the table to get a chance to determine if the touch is actually the beginning of a scroll gesture. If not, then the table can pass the event to the section header view for processing.
This is how all the rows in the table behave since I have "delaysContentTouches" for the table on. I suspect the problem is because the section header view is not in the table's view hierarchy. So everything is probably working per spec. just not the way I want.
I want the section header view to behave regarding touches just like rows do (table gets first chance to process).
BTW I am not placing this control in a table row (which would solve the problem) because I want the rounded rect grouped style for all table rows, but not for this one UI element. This control is in the center of my table (header for section 1) which is why I want drags on it to scroll the table.
OK, so apparently this is simulator issue only. On a device my tableView gets the first chance at the event. So I guess I need to listen to the Apple mantra of "always test on an actual device" before posting to StackOverflow. Sorry friends... may my error be helpful to others who, like me, probably spend too much time in the simulator.