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.
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.
If you see the screenshot below, its a view from iOS Files app which lets you select tags for a file.
I want to make a similar Tableview which lets user either select existing items or add new items. But I also want the add textfield to be a search field. That is, when the user starts typing there, he also gets search results from the existing items.
The way I am planning to implement this is...
Two table views.
One has a static cell to 'Add' and is not vertically scrollable.
Right underneath is the second table view with existing itmes, which is vertically scrollable.
when the user taps and starts typing in the textfield, there is a search side by side, in the second table view and the user can select an item from it as well.
When there are no matching results, an add button is highlighted and the user can add a new entry.
I want to know what is the best way one can implement such behaviour?
Also,
(In terms of UI Design)
Should one make use of the UISearchBar instead of a textfield?
Or, is it better to simply use the UISearchController?
In my app I have a grouped UITableView with 2 sections. I have to sort the elements of the second section. What'is the best user interaction to achieve it?
Sorting involves reloading of the table,But if you want to sort second section alone Seperate button to sort the ssection is a preferrable choicea nad can be included in the header section of tableview.
If you want the whole table to sort you can act more innovative like gestures or button press or even shake gesture.
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.
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.