Custom Collection View Layout like Chanel app

微笑、不失礼 提交于 2020-12-12 15:05:56

问题


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:


  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).

  1. 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.
  2. 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.

  1. Position other views while you're moving an "active" view. Do it by hand, without any UIScrollViews.
  2. 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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!