ios - 像 Chanel 应用程序一样自定义 Collection View 布局

Question

我正在尝试做一个像 Chanel 应用程序那样的自定义布局，您可以在 Appstore 中找到该应用程序。 https://itunes.apple.com/us/app/chanel-fashion/id409934435?mt=8

我知道他们正在使用 UICollectionView，但不知道如何开始。交互感觉就像混合了分页滚动的表格 View 。当您滚动元素时，元素会增长，第一个元素将自身定位在顶部。

Answer 1

1. 从拖动和定位一个开始 UIView .参见 UIGestureRecognizer docs并寻找现有的 examples的可移动 View 。你需要一个 UIPanGestureRecognizer移动 View 。
2. 根据 Y 调整 View 大小位置。
3. 根据 View 大小使用几个自动布局约束在该 View 中创建和定位图像。

请注意，Chanel 应用程序针对这些约束具有不同的常量。对于最小 View 高度，一个图像的顶部是 80% 高度，对于另一个图像它是 90% 高度。确保您可以从代码中操作约束(我认为从那里的代码创建所有内容是个好主意，XIB 不是很灵活)。

1. 当您停止移动 View 时，将 View “锚定”到某些点(例如，顶部 = -75%、0%、75%、90%，与我在 Chanel 应用程序中看到的相比)。只需找到最近的一个并为它设置动画 View 即可。
2. 完成 1 个 View 后，将所有工作移至 NSView子类化(如果尚不存在)并创建这些 View 的集合。

您可以创建 UICollectionView , 但我宁愿用一个简单的 NSArray 来做:我实际上没有看到使用 UICollectionView 的理由这里;这是一个非常简单的结构。无论如何，您编写自己的手势识别器(不是吗？我看不出另一种方式)-那么使用 UICollectionView 有什么意义呢？ ？如果有一天你想扩展应用程序功能，UICollectionView不太可能帮助你。好吧，这是我假设的方法，您可以在研究该方法时找到另一种方法。

1. 在移动“事件” View 时定位其他 View 。手工完成，没有任何UIScrollView s.
2. 编写一个函数，在移动 View 时反射(reflect)“相邻” View 的 Y 位置。它应该“减速”到屏幕底部。