我该如何构建这个视图呢？

Question

我很难找到构建此设计的最佳方法。

顶视图具有最小高度，并在达到此高度时变粘。底部视图托管一个具有三个视图的分页控制器。这些视图中的每一个都托管具有垂直滚动的集合视图或表视图。

我真的不知道如何处理这个问题。整个视图是否可滚动，我应该阻止在第二个视图上滚动，直到顶视图达到它的粘性高度？或者这些视图中的每一个都是单独的uitableviews，而寻呼控制器只是一个单元格？我是否应该使用分页控制器，还是应该使用启用分页的scrollview？ （后者有点粗略的互动）

谢谢！

Answer 1

今年看看WWDC的Advanced User Interfaces using Collection View。此视图与iTunes Connect应用程序界面非常相似。整个会话视频解释了他们如何创建该界面。

我使用了类似的方法在Emojicate应用程序中创建键盘。

我认为我所做的实际上是假的粘性标题。所以像这样......

1. 仅使用一个集合视图。
2. 创建一个＆＃34;分段数据源＆＃34;包含三个数据源。 （参见WWDC关于此的视频）
3. 更改分段控件后，通过更改其布局和（如果需要）dataSource来更新集合视图。
4. 使整个顶部区域成为集合视图上的标题。
5. 当集合视图滚动到某个点（当您想粘贴标题时）时，请使用第二个视图作为压缩标题，并使其在屏幕顶部显示。这根本没有附加到集合视图。

当分段控件发生更改时，您可以通过更改＆＃34;选定的数据源＆＃34;来更新集合视图。数据源还可以包含将更新它的UICollectionViewLayout。

基本上，您正在讨论的tableview只是一个集合视图，其中单元格宽度等于屏幕宽度。即伪造桌面视图。

粘性标题根本不粘。当它开始离开屏幕时，你可以在那里放一个假的标题。

它需要一个重复的（ish）视图，并考虑如何构建数据，但我认为这比拥有多个集合视图和页面控制器和东西更容易，资源更少。

如果您希望我更详细地了解它，请告诉我，但这是一个复杂的主题。先观看视频。

Answer 2

我会将此部分设为导航栏。应该比较容易。只需使用barButtonItem自定义后退按钮，并在titleView中执行几个标签。

我会将下一部分作为表视图。

tableView有2个部分。第一部分没有节标题，第二节没有任何单元格，只有节标题。

本节中的第一个也是唯一一个单元格：

其余的将是第二部分标题的视图：

这为您提供了所需的粘性，因为即使您滚过它，节标题也会保留在那里，因为集合只有2个部分，控件将始终保持在顶部。

我认为收集/表格分页部分是最难的部分，我不清楚它是如何完成的。但我认为它可能是一个ContainerView。容器视图的每个视图都可以是tableview或collectionview。您必须添加一些代码来处理containerview相对于第二个节头的移动（可能是一个自动布局约束，它将容器视图附加到您在上面实现的第一个表视图的底部）。

我不认为在scrollview中使用你的表/集合是一个很好的实现。我想我甚至在文档中读到开发人员应该远离它（但我可能会错误地记住它）。

Answer 3

我会：

• 包含三个子视图的“标题视图”：

  • 固定高度的顶部和底部视图（它们在任何尺寸下都可见）。

  • 随着超级视图增长/缩小而出现/消失的中间视图。

• 滚动视图（表或集合视图是子类），部分覆盖标题视图，顶部插入设置足以显示基础标题视图（以同样方式拉动刷新意见揭晓。）

  • 可以将分页按钮设置为表/集合视图节标题视图。

最后跟踪滚动视图的滚动位置，以便手动调整标题视图高度。

---

另一种看待此解决方案的方法。

• 两个完全分开的部分，标题视图和表格视图。

  1. 一个简单的标题视图（蓝色），用于调整其子视图的高度变化。更精确的是当它收缩时隐藏它的中间子视图（浅蓝色）。
  2. a）部分覆盖“接口”构建器但 b）中的标题视图的表视图具有顶部插入，以避免将标题视图隐藏在实际设备（tableView.contentInset = UIEdgeInsetsMake(60.0f, 0.0f, 0.0f, 0.0f);）中。

• 当桌面视图向上/向下滚动时，通过调整页眉视图高度来“连接”这两个部分。