像香奈儿应用程序一样的自定义集合视图布局 [英] Custom Collection View Layout like Chanel app

问题描述

我正在尝试做一个像Chanel应用程序这样的自定义布局，您可以在Appstore中找到该应用程序.

解决方案

1. 首先拖动&仅定位一个 UIView .请参见 UIGestureRecognizer 文档和寻找现有的示例.您需要 UIPanGestureRecognizer 才能移动视图.
2. 根据视图的 Y 位置调整视图大小.
3. 创建并创建使用几个自动布局约束，根据视图大小在视图内放置图像.

请注意，Chanel应用程序针对这些约束具有不同的常量.在最小视图高度的情况下，一张图像的顶部高度为80％，另一张图像的高度为90％.确保可以从代码中操作约束(我认为从那里的代码创建所有内容都是一个好主意，XIB不太灵活).

4. 在停止移动视图时，将其锚定"到某些点(例如，从Chanel应用程序中看到的角度来看，top = -75％，0％，75％，90％).只需找到最近的一个，并为其添加动画效果即可.
5. 使用1个视图完成操作后，将所有工作移至 NSView 子类(如果尚不存在)并创建这些视图的集合.

您可以创建 UICollectionView ，但是我宁愿使用简单的 NSArray 来做到这一点:实际上，我看不出使用 UICollectionView 的理由代码>此处；这是一个非常简单的结构.无论如何，您都编写了自己的手势识别器(不是吗?我看不到另一种方式)-那么使用 UICollectionView 有什么意义呢?如果您想在某天扩展应用功能， UICollectionView 不太可能为您提供帮助.好吧，这是我的假设方法，在进行此工作时您可以找到另一种方法.

6. 在移动活动"视图时定位其他视图.无需任何 UIScrollView s即可手动完成.
7. 编写一个函数，该函数可在您移动一个视图时反映相邻"视图的Y位置.它应该减速"到屏幕底部.

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

这篇关于像香奈儿应用程序一样的自定义集合视图布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！