Note that there are some explanatory texts on larger screens.

plurals
  1. POAnimate UITableViewCell ContentView to fade upon entering Edit Mode
    text
    copied!<p>I've noticed this functionality in the iPhone Mail.app and SMS.app apps, but I'm unsure how to implement it myself.</p> <p>In a standard UITableView, when a user taps the 'Edit' button and the deletion buttons move into position, as the content views are sliding to the right, they perform a quick fade transition where they are replaced by thinner versions of themselves (to account for the space the deletion button is taking up).</p> <p>I initially thought this was done by calling the following method when editing mode is enabled:</p> <pre><code>[self.tableView reloadRowsAtIndexPaths: [tableView indexPathsForVisibleRows] withRowAnimation: UITableViewRowAnimationFade]; </code></pre> <p>However this cannot be right as it also fade transitions the delete button itself as well as any accessory views the cell has (suffice it to say, it looks quite odd).</p> <p>I was wondering, how would it be possible to force the content view to redraw itself, and to then fade the new drawn version over the old one when the table enters edit mode?</p> <p>UPDATE: Thanks to Caleb's answer, this is the final block of code that allowed me to get what I was after:</p> <p>My final solution was to subclass UITableViewCell and then apply the following code to the setEditing accessor:</p> <pre><code>-(void) setEditing: (BOOL)editing animated: (BOOL)animated { [super setEditing: editing animated: animated]; CATransition *animation = [CATransition animation]; animation.duration = 0.2f; animation.type = kCATransitionFade; //redraw the subviews (and animate) for( UIView *subview in self.contentView.subviews ) { [subview.layer addAnimation: animation forKey: @"editingFade"]; [subview setNeedsDisplay]; } } </code></pre> <p>I probably should just clarify as well. Since performance is of utmost importance, everything inside my cell's contentView is being rendered through CG (ie drawRect:), so I can't control any elements being drawn in there specifically.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload