如何避免在带有槽口的设备上的 UICollectionView 搜索栏下方出现空白?
How can I avoid gaps below a UICollectionView search bar on devices with notches?
我有一个 UICollectionView
,其中包含我想在透明导航栏下方滚动的内容。我还有一个 UIView
,其中包含一个 UISearchBar
,用户可以通过点击导航栏上的按钮来切换:
如上图所示,这适用于没有缺口的设备。我通过将内容插入顶部设置为 searchController.searchBar.frame.size.height
并将内容偏移顶部设置为 -collectionView.contentInset.top - (navigationController?.navigationBar.frame.size.height ?? 0) - UIApplication.shared.statusBarFrame.size.height)
.
来实现此目的
对于有缺口的设备,当搜索栏首次显示时,搜索栏和内容之间存在间隙。然后,当我开始搜索时,间距是正确的。如果我取消并且内容不适合屏幕(即,集合视图是可滚动的),那么搜索栏的大小就会出现差距。如果内容适合屏幕,则没有这种差距。
故事板中设置了约束。我能找到获得我想要的行为的唯一方法是将集合视图顶部限制到顶部布局指南底部 - 64 这当然不理想。
很明显,我的心智模型有问题。如何在有和没有缺口的设备上获得所需的行为,并理想地避免约束中的幻数?
此行为是由于安全区域布局指南造成的。对于有缺口的设备,顶部约束计算与安全区域的距离(从缺口开始)。
要解决这个问题,请转到故事板 -> select CollectionView -> select 顶部约束。您将看到一些与大小检查器约束相关的选项。将第二项更改为 SuperView 而不是 Safe Area.
screenshot of size inspector
我有一个 UICollectionView
,其中包含我想在透明导航栏下方滚动的内容。我还有一个 UIView
,其中包含一个 UISearchBar
,用户可以通过点击导航栏上的按钮来切换:
如上图所示,这适用于没有缺口的设备。我通过将内容插入顶部设置为 searchController.searchBar.frame.size.height
并将内容偏移顶部设置为 -collectionView.contentInset.top - (navigationController?.navigationBar.frame.size.height ?? 0) - UIApplication.shared.statusBarFrame.size.height)
.
对于有缺口的设备,当搜索栏首次显示时,搜索栏和内容之间存在间隙。然后,当我开始搜索时,间距是正确的。如果我取消并且内容不适合屏幕(即,集合视图是可滚动的),那么搜索栏的大小就会出现差距。如果内容适合屏幕,则没有这种差距。
故事板中设置了约束。我能找到获得我想要的行为的唯一方法是将集合视图顶部限制到顶部布局指南底部 - 64 这当然不理想。
很明显,我的心智模型有问题。如何在有和没有缺口的设备上获得所需的行为,并理想地避免约束中的幻数?
此行为是由于安全区域布局指南造成的。对于有缺口的设备,顶部约束计算与安全区域的距离(从缺口开始)。
要解决这个问题,请转到故事板 -> select CollectionView -> select 顶部约束。您将看到一些与大小检查器约束相关的选项。将第二项更改为 SuperView 而不是 Safe Area.
screenshot of size inspector