ios - UITableView 和 UINavigationBar 自定义混淆。关于如何完成的任何建议？

Question

这是我想要构建的 AirBnB 应用程序的一部分。

这是我需要建议的 3 个问题。

1. 如何让 UITableView 上的单元格像 [更多过滤器] 按钮一样工作？该按钮看起来就像一个始终位于顶部的 UITableView 单元格。然而，它在超出范围之前消失了。 这还是tableViewCell吗？

2. View [到达 |离开]。 UITableView 上的这个 View 是什么？当 tableView 一直滚动到顶部时，它与 [MORE FILTERS] 按钮无缝连接，使其看起来像是一个 View 。但是当 tableView 开始滚动时，可以看到 [MORE FILTERS] 按钮在它逐渐消失时滑过它。

   

3. 什么是 [SHOW FILTERS] 按钮？它是 UINavigationItem titleView 属性还是一些单独的 View ？当表格向上滚动时，可以看到它以淡入淡出的方式将自身附加到 UINavigationBar。起初我以为它只是一个 UINavigationBarItem，但我不知道如何在栏的标题 下添加项目。关于这是什么或如何实现的任何澄清？

我已经看了Apple's Example on customized UINavigationBar ，但它没有提供任何线索来完成此操作。任何帮助表示赞赏

Answer 1

就像你一样，当我遇到像这样的具有很酷的UI效果和动画的应用程序时，我想分析一下，如果可能的话尝试自己做同样的效果，这样我也可以得到创新作为知识。

我们先来分析一下，届时你可能会找到所有的答案。我只是画了一张图，显示了屏幕的 UI 层次结构，当然这个层次结构是基于我的分析，我不能保证层次结构是 100% 正确的。

我会在这里做一些解释。从上到下:
1. Navigation Bar(Red) ，只是一个不透明的导航栏，没什么特别的；
2. Show Filters View(Purple)是锚定到 Navigation Bar(Red) 底部的 View , 并在屏幕启动时隐藏。 请注意，此 View 不是 Arrives & Departs View(Blue) 的 subview 。它被直接添加到 View Controller 的 Root View 。这意味着 Purple和 Blue是 sibling ；
3.Arrives & Departs View(Blue) ，没什么特别的；
4. More Filters View(Green) ， 没什么特别的; 5. Table View(Orange) ，没什么特别的；
所以根据我的分析，Purple , Blue , Green和 Orange都是 sibling 。

现在让我们继续介绍精美的 UI 效果和动画。这里的技巧是你需要观察 TableView 的 contentOffset 的变化。 (我建议在 ScrollView 的委托(delegate)中执行此操作 - scrollViewDidScroll)，并相应地移动、隐藏或显示 View 。分为四个阶段:
1. 初始阶段，如上图。
2. Blue开始淡出，Green随着手指移动向上移动，Orange增加它的高度。 (紫色仍然在同一位置并隐藏，我只是将其从图中删除以使其更清晰)；

1. Blue完全淡出，Green开始淡出并且Purple开始淡入。Orange仍在做同样的事情——增加它的高度；

1. Green完全淡出，Purple完全淡入和Orange增加其高度以填满屏幕，然后锚定到 Purple 的底部.