I have a basic tableview with section headers that contains cells. A cell either has a checkmark visible or not. When the user selects the cell, it toggles the checkmark, and if all items in that section has the checkmark visible, additionally the section header is greyed out.
I trigger the UI update in tableView:didSelectRowAtIndexPath: by first updating the model and then call reloadSections:withRowAnimation:UITableViewRowAnimationAutomatic on the relevant section.
The problem is that when animating the change (duration about 0.3 s), the user cannot select another row until the animation is done. It is a common usage scenario, wanting to check a number of items in batch. I also absolutely want to animate the change.
The documentation states that one can configure a UIAnimation using UIViewAnimationOptionAllowUserInteraction to remedy this, but since I'm not using a manual UIAnimation but only calling UITableViewRowAnimationAutomatic, I don't know how to accomplish this.
Is there a way to allow the user to select (and initiate animations) on other cells while such an animation/reload is ongoing?
Note
It's tricky to get a custom section header to redraw/animate, the only way I managed to do it is by first reloading the affected section, and then immediately reloading the table – the latter to hide a flicker that appears otherwise.
If I only reload the single affected row, there is not animation on the section header – it just changes.
I ended up disregarding that the section header does not animate, the user experience is more severely affected by not being able to quickly toggle several items in the list.
Related
I have a UITableView-based in-game shop.
Every cell has a "BUY" button which is mostly enabled and can be switched to "BOUGHT" if the item is a one-time purchase or can be disabled if there are not enough money.
Right now what I do is calling reloadData every time buy button is being pressed in order to update visible cells and the current cell itself. (I have to update all cells, because after purchase it is possible that there wont be enough money for visible item cells).
But it causes weird animation glitches, like when I click on one cell's buy button and animation finishes on another one.
I think this happens due to reusability of cells. So what I want to know is how to reload data in the whole table view without harming native animation.
The only thing I can think of is not to use reusable cells and cache them all, but I dont think this is a good programming practice.
First, make sure that your view layer and model layer are separate. There should be some non-view object that knows about each item; we'll call it Item.
Now, create an ItemCell (you probably have one already). That's your reusable cell. Hand it the Item. It should configure itself based on the data in there.
Use KVO, delegation, or notifications to let the cell observe its item. When the Item changes its status, the cell should update its own button.
When your cell is reused, you'll pass a new item to it. It should stop observing the previous one, and start observing the new one (and of course reconfigure itself to match the current status).
By separating the views (which are reusable and transitory) from the model (which is stable and long-lived), you get the performance benefits of cell reuse with correct animations and no need to call reloadData.
You could have a reloadCell method in the cell class and loop through the table's visibleCells and update their UI that way. That way they are not recreated (or re-used), they just have their relevant UI pieces that could have changed due to the new data updated.
I have a small UITableView with static cells, one of which contains a UISwitch. I reload the table when the switch's state changes, since it's state affects the rest of the table and the table is quite small. Unfortunately, the switch flickers when redrawn. Specifically, when I move the switch from off to on, it shows on, then goes from some halfway state to on again when the table is reloaded. Has anyone experienced this or have a suggestion as to how to overcome it?
When you reload the tableview, it rebuilds all its cells.
Depending on the exact code building those cells, this kind of behaviour can be noticed.
I would recommend not calling the reload method, but instead, figuring out which rows need to be refreshed and calling reloadRowsAtIndexPaths:withRowAnimation:. This will lead to much better animation behaviour;
Additionnaly, if some cells needs to be added or deleted, you can figure out whose positions those are and use deleteRowsAtIndexPaths:withRowAnimation: or insertRowsAtIndexPaths:withRowAnimation:
Here's the documentation on managing cell insertion and deletion
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.
Maybe I'm missing something obvious, but I'm have a hard time programmatically setting the row selection in a tableView. The goal is to simply have a tableView open with a row already selected. The problem appears to be that I have to wait until the tableView is fully loaded before I can modify the selection.
I've read various strategies such as calling reloadData for the tableView in the viewController's viewWillAppear method, then immediately calling selectRowAtIndexPath for the target row. But when I do that, I get a range exception because the tableView has zero rows at that point. The UITableViewDelegate methods (numberOfRowsInSection, etc.) don't appear to be called immediately in response to reloadData (which makes sense if the table rows are drawn "lazily").
The only way I've been able to get this to work is to call selectRowAtIndexPath after a short delay, but then you can see the tableView scroll the selected row into view.
Surely, there's a better way of doing this?
Well, you can use another strategy. You can create a hidden table view, configure how you want and than show to user. Use the tableview.hidden = YES.