Animate View Collapse while Scrolling Another View

Hi all,

Would anyone have an example of how to properly animate the collapsing/expanding of one view while another, separate scroll view is being scrolled?

In essence, the top portion of the scene has some summary information while the bottom, scrolling portion has a bunch of details. When the user starts to scroll the details upward, I would like to start shrinking the top summary view so that it only shows a minimal amount of information while expanding the bottom detail view upward. When the user starts to scroll the detail downward, the top summary view should expand while the scrolling detail view shrinks.

Of course, this collapsing/expanding should be interactive so that if the user starts to scroll the detail upward but then scrolls back downward without taking their finger off the screen the both views will ‘track’ that movement.

[This is all being implemented in Swift 2+ and I’ve already implemented the upper view’s collapsing/expanding animation nicely (using the great ideas in the iOS Animations by Tutorials book) but am currently simulating the scroll dragging using a button to toggle the collapse/expand state.]

Thanks in advance for any suggestions.


What you want to do sounds a bit tricky. I think you are going to need to define some points in your scrollView at which the upper view triggers to become completely open/completely closed. If you want the upper view to commence an animated open whenever you enter the scroll region where the view should be open then you will need to animate a change to the constant on the view’s constraint, probably its height constraint, giving it a value that opens the view. If you are closing, you do the same thing but with the right constant to effect a close.
The information you need to decide whether to open or close will come from the UIScrollViewDelegate, scrollViewDidScroll: method. Look at the scrollview property contentOffset to see what point the scrollview is currently at. You’ll also need to maintain a state variable for your top view telling you when it is open or closed or opening or closing - you don’t want to modify the constraint’s constant by some value multiple times, and you can examine its state to prevent that. If you see that you are in a position where the view should be open then if it opening or open you can do nothing. If it is closed then you can start it opening with an animation block. If it is closing then you need to reverse the animation. To do that, removeAllAnimations to stop the animation, look at the current value of the constraint and then change that value to where you want the view to be (open or closed) inside a new animation block.