16

Can someone please give me a hint on how to recreate the scrolling effect used in the UltraVisual iPhone app? Here's a gif to illustrate the effect:

enter image description here

The first "cell" is full height while the other displayed cells are regular sized. While the user scrolls up, the first cell slowly animates to the regular height, while the next one slowly gets bigger. Do they use an UITableView? Or an UIScrollView? I have no idea how it's made...

Eugene Prokoshev
  • 494
  • 9
  • 19
Dănuț Mihai Florian
  • 2,945
  • 2
  • 23
  • 42
  • @daniesy Can you please let me know how you achieve the same animation. I want the same behavior without overlapping of images. – Gaurang Makwana May 28 '16 at 07:47

2 Answers2

35

Ha, you made my day! I actually wrote that view :)

This is actually very straightforward. This view uses UICollectionView with a custom UICollectionViewLayout.

The general principle is this. I make up a 'drag interval' – that is the required distance to drag between each cell. This value is arbitrary but affects how much the user has to drag to switch cells. The total height of the collection view is the 'drag interval' * the number of items in the view. Then I set the layout to automatically paginate to the nearest drag interval (which gives it the snapping behavior). This is very similar to how coverflow works. From this you can calculate the index of the 'top cell' by dividing the contentOffset.y by the height.

With the 'top cell' index you can generate the frames for each cell pretty easily. The top cell's frame is { 0, contentOffset.y, 320, 176 }, and from there you can calculate the next cells frame and so forth.

Then the last trick is calculating the interpolation of the page index. This is basically the decimal part of the current cell index. This will give a number between 0 and 1 that can be used to calculate the interpolation between the top frame and the frame below.

Every 'prepareLayout' calculates the frames of the cells on screen, and then in layoutAttributesForElementsInRect:, generate all the layoutAttributes based on the generated frames.

Using this trick you can create all sorts of complicated layouts. UICollectionView can be a powerful beast, but definitely takes a bit to wrap your head around it.

Andy Poes
  • 1,552
  • 14
  • 19
  • 2
    You made the best app ever on the iPhone :D i really love it. Thank you :D – Dănuț Mihai Florian Nov 27 '13 at 20:58
  • Any chance you publish the view code on github? I'd like to use it as well :-) – gils Dec 30 '13 at 09:10
  • 1
    Curious did you use UIDynamicAnimator at all? – Codezy Feb 08 '14 at 00:02
  • @Codezy No-need for UIDynamics. Its a relatively straightforward implementation of a collection layout. – Andy Poes Mar 05 '14 at 22:41
  • 1
    Yeah got it after asking that, learned alot, thanks for the pointers! – Codezy Mar 07 '14 at 03:01
  • Thanks for the pointers. Managed to reproduce a similar effect on Android with some work. Couldn't have done it without your post. Thanks again. – Vaiden Jun 01 '14 at 00:26
  • @AndyPoes, how can I add sections headers to this kind of collection view? – gaussblurinc Jun 09 '14 at 14:57
  • @gaussblurinc Not sure what you mean by section headers. – Andy Poes Jun 10 '14 at 15:13
  • @AndyPoes, I mean this element: UICollectionElementKindSectionHeader – gaussblurinc Jun 11 '14 at 12:24
  • @AndyPoes, so, you generate all frames in prepareForLayout, not in layoutAttributesInRect? – gaussblurinc Jun 17 '14 at 15:59
  • You can implement section headers the same way you implement cells. Not sure what you're asking specifically. If you're asking how you implement section headers inside collection view thats a separate issue. As far as prepareLayout vs layoutAttributesInRect, I pre-generate all the rects so I know for certain which rects are in the "viewable area". That makes it easy to grab only the rect's I need for the collection view cell rendering. – Andy Poes Jun 17 '14 at 17:07
  • 3
    Yeah if you wouldn't mind posting that code on Github, that'd be fantastic. I'd love to see how you do it – barndog Aug 25 '14 at 02:16
  • @Vaiden would you like to share some code on how you did? – drisse Oct 15 '14 at 10:47
  • This seems to have broken in iOS 10 Swift 3.0, does anyone know why?! – Famic Tech Sep 25 '16 at 03:11
  • @FamicTech You might check out What's New in UICollectionView for iOS 10. https://developer.apple.com/videos/play/wwdc2016/219/ UICollectionViewCells are now generated further in advance than before. This changes the behavior of custom layouts. – Andy Poes Sep 26 '16 at 18:43
  • Has anyone implemented the ability for a user to click on a cell to navigate to a detailed view (based on the cell they selected) and then they can dismiss the detailed view to return back to the collection view. I am having an issue of when I dismiss the detailed view, the scrolling of the collection view is not working as desired!? – iosforme Jun 21 '17 at 01:40
10

It's very cool! We made a fairly simple to use control like this that can be found here:

https://github.com/RobotsAndPencils/RPSlidingMenu

Codezy
  • 5,340
  • 7
  • 35
  • 47
  • 1
    I just searching this for android.:( – Shadow Mar 17 '14 at 14:24
  • Is there a way to remove the white space at the bottom? – m177312 Mar 19 '14 at 14:35
  • 1
    Not sure what you mean by white space. It scrolls up to the last cell. You can set the background to clearColor or whatever color you like. Does that answer your question? – Codezy Mar 20 '14 at 03:27
  • @Codezy I am able to get the CGGetMaxY(collectionView.frame). However, this is not as same as the point where the content ends (visible content). Each time i scroll one cell up, the space between the collection view frame and the content increases, which exposes the background of the collection view. I want to add another collection view at the end of the sliding menu without any space in between (without revealing the collection view background.) Is there a way to remove this space? – m177312 Mar 20 '14 at 14:58
  • 2
    @m177312 yeah for sure, I added it as an issue here https://github.com/RobotsAndPencils/RPSlidingMenu/issues/6 and I will look into it in the very near future. – Codezy Mar 20 '14 at 15:04
  • @m177312 Do you have an example project you could link to so I could see the problem you are having? – Codezy Mar 25 '14 at 15:23
  • @Codezy I have posted the sample project. Here, I have two collection views. One contains the RPSliding animation and the other is a normal one. When I come to the end of the SPSliding collection view, you can be the gray space (the collectionview background). This gray space increases each time a cell is scrolled up. How can i solve this? https://github.com/karapurakesh/RPSlidingDemo_New – m177312 Mar 27 '14 at 11:47
  • @Codezy There also seems to be a flikkering issue as explained in the following link http://stackoverflow.com/questions/13492037/targetcontentoffsetforproposedcontentoffsetwithscrollingvelocity-without-subcla . Could u add the solution provided by DarthMike ? – m177312 Apr 07 '14 at 04:43
  • 3
    @m177312 flickering is fixed. As soon as they merge in the podspec you should be good to go: https://github.com/CocoaPods/Specs/pull/10303 – Codezy Apr 09 '14 at 05:03
  • @Codezy Has there some progress been made on the extra space issue? (issue 6 on github). I have linked an example project with this issue github.com/karapurakesh/RPSlidingDemo_New – m177312 Apr 16 '14 at 06:33
  • @m177312 Please carry on conversation here https://github.com/RobotsAndPencils/RPSlidingMenu/issues/6 (better place than a Q/A site ;) – Codezy Apr 16 '14 at 20:09
  • will this issue of empty space of last row has been fixed or not https://github.com/RobotsAndPencils/RPSlidingMenu/issues/6 – Marios Jun 14 '14 at 07:30
  • If your project does not use storyboards, make sure to examine that the proper init is present in RPSlidingMenuViewController. For example, if you're using a xib file to set up your collection view, it needs an initWithNibName where you set the same height and scroll-to-collapse properties. It's really awesome that you posted this! – kris Jul 03 '14 at 08:50
  • @kris I'm having some issues to implement this framework in a non-storyboard project, I keep getting *** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: '-[UICollectionViewController loadView] loaded the "CollectionViewController" nib but didn't get a UICollectionView.' – Jasper Aug 26 '14 at 15:48
  • @JasperPol hmmmm sounds like something's wrong with how the UICollectionView for your controller is hooked up to the one in your xib file. I'd double check that the connection is there. After than try posting the question directly. In fact this post sounds a lot like your problem: http://stackoverflow.com/questions/20064699/uicollectionview-controller-issue. Good luck! – kris Aug 27 '14 at 01:02
  • @kris Connection is present, I haven't been able to use this framework without using storyboards. I posted an Issue to the github page but haven't received an update on that. Would it be possible for you to create a sample project of this framework without storyboards (or even .xib for that matter) if it doesn't eat up too much of your time? I would appreciate it a lot! – Jasper Aug 29 '14 at 15:25
  • Hi @JasperPol, unfortunately I won't have time anytime soon. Try posting the problem as it's own question on stack overflow. – kris Aug 30 '14 at 12:34
  • This seems to have broken in iOS 10 Swift 3.0, does anyone know why? – Famic Tech Sep 25 '16 at 03:10
  • We will look at addressing the iOS 10 issue soon. That being said, pull requests are welcome :) – Codezy Sep 26 '16 at 01:12
  • How would I go about if i wanted the featured cell to be the last entry in the collectionview vs the first!? – iosforme Jun 20 '17 at 02:47