有没有办法在 iOS 中使用表格视图设计类似 Tinder/Twitter-self-profile 的标题效果？

Posted 2023-03-12

【中文标题】有没有办法在 iOS 中使用表格视图设计类似 Tinder/Twitter-self-profile 的标题效果？

【英文标题】：Is there a way to design Tinder/Twitter-self-profile-like header effect with table view in iOS?

【发布时间】：2014-11-09 01:56:35

【问题描述】：

我正在尝试设计类似于在 Tinder 和 Twitter 自己的个人资料视图中看到的内容。 Tinder 上有一个模糊的背景，在用户自己的个人资料图片后面，向下滑动时，视图会变大并变模糊，最终到达用户的个人资料视图（在 Twitter 上，它开始清晰，随着变大而模糊，导致Twitter 帐户选择视图）。我最近在许多应用程序上看到了这种特殊效果，我也想将它包含在我的应用程序中。该效果/手势有名称吗？有没有一种简单的方法可以用标准的表格视图来实现它，还是我应该开始硬编码？

【问题讨论】：

我建议你发一张图片来展示一下效果，这样会更容易理解。

【参考方案1】：

作为练习，我尝试在以下项目中重现 twitter 个人资料标题效果： https://github.com/BillCarsonFr/twitterprofilepage

【讨论】：

你知道如何实现这样一个带有UIPageViewController 的粘性标题吗？我的意思是你使用的 UITableView 已经有 headerView 和粘性 sectionHeader。

您的意思是 PageViewController 而不是表格视图？页面视图控制器的方向是什么？我不确定这应该如何移动，你有这种效果的例子吗？

我的意思是段控件需要更改标题下方的页面，就像在这个例子中一样有可滚动的UITableView，但我正在寻找一个带有粘性滚动标题的一般ViewController包含一个SegmentControl，它会更改标题下方的内容。难以解释。因此，例如 twitter 应用程序具有“推文”、“照片”这三个部分......但是它们如何在不更改标题的情况下更改内容视图/控制器。我认为他们不仅仅是在交换tableView 单元格，它们还有其他内容和布局，例如PageViewController。

如果它只是“推文”和“最喜欢的”，我会说它只是更改数据源并记住切换时的 contentOffset。但“照片”可能是 collectionView 而不是 tableView。但是既然tableview和collectionview这么接近，可能就只有这个了吧？

嗨，Daniel，您应该看看 WWDC 2014 developer.apple.com/videos/wwdc/2014 的“带有集合视图的高级用户界面”演讲。他们在谈论“全局标题”，这是一个很好的资源，有可用的示例代码。

【参考方案2】：

基本设计有各种名称，例如Parallax、Sticky Header 或Stretchy Header。

您正在寻找的特定效果是视差模糊。

在 GitHub 上有一些实现。这里有两个来自a quick search：

TwitterCover 是一个清晰的图像，随着标题的增长而模糊。

ParallaxBlur 是一个模糊的图像，随着标题的增长变得更加清晰。

【讨论】：

这正是我所需要的。谢谢，不知道效果的名字很难找到它:)

【参考方案3】：

一种简单的方法是将两个主要对象放在视图控制器上。一个是 UIViw，另一个是 UIScrollView（也是 UIScrollView 子类）。您可以将 UIView 放在 UIScrollView 上以掩盖滚动视图的标题部分。更改内容偏移量滚动视图（尤其是在使用tableview时很重要，否则视图会覆盖单元格）。另一件事是调用-（void）scrollviewdidscroll函数。在这个函数中做一些数学计算，主要是用滚动视图做视差效果。内容偏移量.y。这是一篇介绍这个的文章—— IMPLEMENTING THE TWITTER ios APP UI (UPDATE: SWIFT 3)