Custom Collection View Layout like Chanel app

Question

I'm trying to do a custom layout like the Chanel app you can find the app in the Appstore. https://itunes.apple.com/us/app/chanel-fashion/id409934435?mt=8

I know they are using an UICollectionView, but no clue how to start. The interaction feels like a tableview mixed with a paginated scroll. When you scroll the elements grow, and the first element position itself at the top.

Answer 1

1. Start with dragging & positioning just one UIView. See UIGestureRecognizer docs and look for existing examples of movable views. You'll need an UIPanGestureRecognizer to move the view.
2. Resize the view depending on its Y position.
3. Create & position an image inside that view depending on the view size using a couple autolayout constraints.

Note that Chanel app has different constants for these constraints. With a minimum view height, one image's top is 80% height, for another image it's 90% height. Make sure you can manipulate constraints from code (I think it's a good idea to create everything from code there, XIBs are not very flexible).

4. Make the view "anchoring" to certain points (e.g. top = -75%, 0%, 75%, 90% from what I see in the Chanel app) when you stop moving it. Just find the nearest one and animate the view to it.
5. Once you did it with 1 view, move all your work to an NSView subclass (if it's not yet there) and create a collection of these views.

You can create UICollectionView, but I'd rather do it with a simple NSArray: I actually don't see a reason to use UICollectionView here; it's a very simple structure. Anyway, you write your own gesture recognizer (don't you? I can't see another way) - so what's the point to use UICollectionView? If you want to expand the app functionality some day, UICollectionView will unlikely help you with that. Well, it's my hypothetical approach, you can find another one while working on that.

6. Position other views while you're moving an "active" view. Do it by hand, without any UIScrollViews.
7. Write a function that reflects the Y position of the "neighbor" views while you moving one. It should "slow down" to the bottom of screen.