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.
Related
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.
So I have a table in the accordion style. When a row is clicked, five radio buttons are displayed. Then, users should be able to click on those buttons. It successfully displays the buttons, but when the buttons are clicked, instead of highlighting the selected button, it shrinks the row itself. I think this is probably because I implemented each set of the label part and the option part as a single row, just in different UIViews. I believe clicking on the view that contains buttons is overridden by clicking on the row(label + options). Its really hard to explain, but I think a solution could be restricting selectrow action of the table to only certain portion of the row.
Is there a way I could achieve this? If I cannnot, is there other ways to implement the accordion table to be used as I described?
I am having a really hard time trying to explain this. If you have any questions, please let me know.
table
As per my understanding you van give a try to below steps:
Disable the row selection so that you can avoid row selection. Usecell.selectionStyle = .none
Secondly for your button in row set the IBAction in controller class and in Storyboard connect those actions to specific buttons.
I am building an app that uses a side menu, within that side menu is a UITableView displaying some text. When you click on one of those, it takes you to another ViewController. I searched the internet for it but didn't find something useful. My question is: how to make a "submenu" inside the tableview, so that when you click on it, it needs to dropdown and show more options.
I don't have any idea how to do this, so a little help would be really appreciated!
Thanks
You may use sections for building a submenu structure. You can overwrite viewForHeaderInSection for each section for which you don't want to display the section header and return an empty UIView object with a size of (0.0, 0.0) or even null. (I never tried returning null/nil myself.)
For each menu on the highest level you have exactly one corresponding section and each of them has just one row. They may or may not have header views.
For the menu that you want to display as submenu you set the header view of the related section accordingly and then have one row for each item of the submenu.
Unfortunately this allows for a 2-level menu heirachry only. But on the upside everything you need is already sort of build-in into cocoa touch.
Perhaps this could possibly help you achieve what you are looking for:
Expandable Sections UITableView IndexPath SWIFT
You may have to have a good look through the code but it should set you on the right track.
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.