StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can manipulate the <code>contentOffset</code> yourself during the transition, which actually gives you finer-grained control than <code>UICollectionView's</code> built-in animation.</p> <p>For example, you can define your transition layout like this to interpolate between the "to" and "from" offsets. You just need to calculate the "to" offset yourself based on how you want things to end up:</p> <pre><code>@interface MyTransitionLayout : UICollectionViewTransitionLayout @property (nonatomic) CGPoint fromContentOffset; @property (nonatomic) CGPoint toContentOffset; @end #import "MyTransitionLayout.h" @implementation MyTransitionLayout - (void) setTransitionProgress:(CGFloat)transitionProgress { super.transitionProgress = transitionProgress; CGFloat f = 1 - transitionProgress; CGFloat t = transitionProgress; CGPoint offset = CGPointMake(f * self.fromContentOffset.x + t * self.toContentOffset.x, f * self.fromContentOffset.y + t * self.toContentOffset.y); self.collectionView.contentOffset = offset; } @end </code></pre> <p>One thing to note is that the <code>contentOffset</code> will be reset to the "from" value when the transition completes, but you can negate that by setting it back to the "to" offset in the completion block of <code>startInteractiveTransitionToCollectionViewLayout</code></p> <pre><code>CGPoint toContentOffset = ...; [self.collectionViewController.collectionView startInteractiveTransitionToCollectionViewLayout:layout completion:^(BOOL completed, BOOL finish) { if (finish) { self.collectionView.contentOffset = toContentOffset; } }]; </code></pre> <p><strong>UPDATE</strong></p> <p>I posted an implementation of this and a working example in a new GitHub library <a href="https://github.com/wtmoose/TLLayoutTransitioning" rel="noreferrer">TLLayoutTransitioning</a>. The example is non-interactive, intended to demonstrate improved animation over <code>setCollectionViewLayout:animated:completion</code>, but it utilizes the interactive transitioning APIs combined with the technique described above. Take a look at the <a href="https://github.com/wtmoose/TLLayoutTransitioning/blob/master/TLLayoutTransitioning/TLTransitionLayout.h" rel="noreferrer"><code>TLTransitionLayout</code> class</a> and try running the <a href="https://github.com/wtmoose/TLLayoutTransitioning/blob/master/Examples/Examples/ResizeCollectionViewController.m" rel="noreferrer">"Resize" example</a> in the Examples workspace.</p> <p>Perhaps <code>TLTransitionLayout</code> can accomplish what you need.</p> <p><strong>UPDATE 2</strong></p> <p>I added an interactive example to the TLLayoutTransitioning library. Try running the <a href="https://github.com/wtmoose/TLLayoutTransitioning/blob/master/Examples/Examples/PinchCollectionViewController.m" rel="noreferrer">"Pinch" example</a> in the Examples workspace. This one pinches the visible cells as a group. I'm working on another example that pinches an individual cell such that the cell follows your fingers during the transition while the other cells follow the default linear path.</p> <p><strong>UPDATE 3</strong></p> <p>I've recently added more content offset placement options: Minimal, Center, Top, Left, Bottom and Right. And <code>transitionToCollectionViewLayout:</code> now supports 30+ easing functions courtesy of Warren Moore's <a href="https://github.com/warrenm/AHEasing" rel="noreferrer">AHEasing library</a>.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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