ios - 如何避免在带有槽口的设备上的 UICollectionView 搜索栏下方出现空白？

Question

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

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

对于有缺口的设备，当搜索栏第一次显示时，搜索栏和内容之间有一个间隙。然后，当我开始搜索时，间距是正确的。如果我取消并且内容不适合屏幕(即， Collection View 是可滚动的)，那么搜索栏的大小就会出现差距。如果内容适合屏幕，则不存在这种间隙。

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

很明显，我的心智模型有问题。如何在有和没有缺口的设备上获得所需的行为，并理想地避免约束中的魔数(Magic Number)？

Answer 1

此行为是由于安全区域布局指南造成的。对于有缺口的设备，顶部约束计算与安全区域的距离(从缺口开始)。

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

screenshot of size inspector