如何避免带有缺口的设备上 UICollectionView 搜索栏下方的空白？

Posted 2023-02-23

【中文标题】如何避免带有缺口的设备上 UICollectionView 搜索栏下方的空白？

【英文标题】：How can I avoid gaps below a UICollectionView search bar on devices with notches?

【发布时间】：2019-02-14 22:42:01

【问题描述】：

我有一个UICollectionView，其中包含我想在透明导航栏下方滚动的内容。我还有一个UIView，其中包含一个UISearchBar，用户可以通过点击导航栏上的按钮来切换：

如上图所示，这适用于没有缺口的设备。我通过将内容插入顶部设置为searchController.searchBar.frame.size.height 并将内容偏移顶部设置为-collectionView.contentInset.top - (navigationController?.navigationBar.frame.size.height ?? 0) - UIApplication.shared.statusBarFrame.size.height) 来实现这一点。

对于带有凹口的设备，首次显示搜索栏时，搜索栏与内容之间存在间隙。然后，当我开始搜索时，间距是正确的。如果我取消并且内容不适合屏幕（即集合视图是可滚动的），则搜索栏的大小会出现间隙。如果内容确实适合屏幕，则没有这样的差距。

约束在情节提要中设置。我能找到获得我想要的行为的唯一方法是将集合视图顶部限制到顶部布局指南底部 - 64 这当然不理想。

很明显，我的心智模型有问题。如何在有和没有凹槽的设备上获得所需的行为，并在理想情况下避免约束中的幻数？

【参考方案1】：

这种行为是由于安全区域布局指南。对于有缺口的设备，顶部约束计算与安全区域的距离（从缺口开始）。

要解决这个问题，请转到情节提要 -> 选择 CollectionView -> 选择顶部约束。您将在 Size 检查器上看到一些与约束相关的选项。将第二项更改为 SuperView 而不是 Safe Area。

screenshot of size inspector

【讨论】：

谢谢你，@Bhaumik！这确实解决了我的问题和我在景观中遇到的其他问题——我喜欢一个简单的解决方案。我只是想知道为什么我没有注意到这一点！

我很高兴它帮助了你@HélèneMartin！