创建Shazam类型UI ios Swift

Question

我正在尝试重新创建我在多个应用程序中看到的UIView，主要是Shazam。屏幕的上半部分有一些交互式按钮，下半部分看起来像一个带有自定义单元格的tableView。当下半部分被平移/向上滑动时，tableView会以很快的速度滚动上半部分，就像滚动视图一样。

我已经研究和实验了几天了。我已经接近了，但还不够。

我的最后一种方法是在视图中包含一个tableView。当视图被平移时，视图将移动到手指移动到的任何位置，但之后将不会有任何速度。此外，当tableView被平移/向下滑动时，它不会将整个视图向下移动。

在此之前，我尝试了一款占据了整个屏幕的scrollView。这给出了想要的效果，但是按钮是不可点击的，并且您可以在按钮区域滚动视图，这并不是我们所希望的。

它是利用了ScrollViews，还是使用了某种程度上类似ScrollView的tableView。

这是我希望重新创建的Shazam UI/UX :顶部有交互式按钮，并且不滚动。下半部分显示内容，当滚动时，覆盖了上半部分。

​

​

下面是我到目前为止尝试过的:这个是平移视图，它可以工作，但没有速度，tableView不会将视图向下滚动。

​

​

任何关于我在这里可以采取的方向的想法都非常感谢。我正在使用Swift。

干杯

Answer 1

这类事情最好使用集合视图和自定义布局来完成-您可以让某些项目将布局属性设置为视图的绝对属性，而将其他项目的布局属性设置为相对于滚动内容偏移。

在WWDC2014的Advanced User Interfaces with Collection Views演讲中，有一个关于这项技术和其他技术的很好的讨论(如果是漫游的话)。

Answer 2

这实际上比乍看起来要简单。下面是如何实现这一点的方法：

1. 创建一个UIViewController (而不是一些按钮)到屏幕的顶部区域。
2. 添加一个跨越整个视图控制器视图的表视图。确保表视图位于前一个step.
3. Configure中添加的按钮的顶部，表视图的顶部单元格是透明的(通过将其背景颜色设置为Clear)。将表视图上的背景色也设置为Clear。这样，除非向上滚动表格，否则它不会遮挡屏幕顶部的元素。
4. 因为表格视图现在是透明的，所以您需要显式设置表格单元格的背景色，而不是顶部的one.
5. Profit!