问题
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.
回答1:
- Start with dragging & positioning just one
UIView
. SeeUIGestureRecognizer
docs and look for existing examples of movable views. You'll need anUIPanGestureRecognizer
to move the view. - Resize the view depending on its
Y
position. - 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).
- 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.
- 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.
- Position other views while you're moving an "active" view. Do it by hand, without any
UIScrollView
s. - 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.
来源:https://stackoverflow.com/questions/36160228/custom-collection-view-layout-like-chanel-app