title: UICollectionView for Springboard like folders
body: <p>I am trying to achieve the following effect:</p>
  
  <p>A <code>UICollectionView</code> displays a grid of cells for a parent type of object, e. g. a photo album. When I tap one of these items, I would like to scroll that element to the top of the screen and open a Springboard like folder from it. Inside that folders area, another collection should be shown, consisting of the detail items, i. e. the individual photos of that album. Tapping in the remaining "parent" view closes the folder again. See this schema:</p>
  
  <p><img src="https://i.stack.imgur.com/DvLjE.png" alt="enter image description here"></p>
  
  <p>What I have done so far is a regular collection view for the albums. When I select one, it scrolls to selected item to the top and then uses <a href="https://github.com/jwilling/JWFolders" rel="noreferrer"><code>JWFolders</code></a> to open an empty folder at that place. Once that is shown, I trigger the surrounding <code>UINavigationController</code> to push my 2nd view controller with the detail items. That one is layed out so it appears to the user as if it were still the same view.</p>
  
  <p>There are several problems with this approach, and I would like to know how to do this better:</p>
  
  <ol>
  <li><p>JWFolders takes a screenshot and animated two halves of it up/downwards to achieve the opening effect. This is ok, but pretty slow on an iPad3, because it moves a lot of pixels and the iPad3's GPU is not quite up to the task. </p></li>
  <li><p>The 2nd view needs to be pixel-perfect to match on top of the first one. This is likely to break accidentally.</p></li>
  <li><p>I am limited as to what animations are possible for the view controller transition. The default <code>UINavigationController</code>'s push from the right is not fitting. I override that to do a cross-dissolve, but still it is far from ideal.</p></li>
  </ol>
  
  <p>I would like to get pointers as to how to approach this problem in a maintainable manner that does not require to much creative hacking against what the frameworks are designed to do. I might be missing something obvious here, so pointers to examples or general advice are appreciated.</p>
  
  <p><strong>Update:</strong></p>
  
  <p>I changed the approach a bit. Now I use a container view controller that has two embedded collection view controllers. One for the "Album" and one for the "Photos" part at the bottom. Using a <code>UIImageView</code> in the middle between the two I can get the triangle pointing upward done. This is also nice from a maintenance point of view, because it makes maintenance easier with the two collections being handled completely separately.</p>
  
  <p>The app uses Auto Layout, so I can change the amount of space each of the two embedded views takes by modifying the constraints. This is way faster than the screenshot based approach with JWFolders and works nicely on an iPad3 as well. </p>
  
  <p>This <em>almost</em> gets me where I want to be. The one thing that remains is to get the opening animation right. I would like to simultaneously scroll the Albums collection, so that the tapped item goes to the top and expand the photos collection with the triangle pointing at the Album cell.</p>
  
  <p>Can I somehow "connect" the lower view to that cell via layout constraints, so that the <code>scrollToItemAtIndexPath:atScrollPosition:animated:</code> call drags the lower view open?</p>