导航栏下的 CollectionView 内容

Posted 2023-03-13

【中文标题】导航栏下的 CollectionView 内容

【英文标题】：CollectionView content under navigation bar

【发布时间】：2017-12-11 12:48:58

【问题描述】：

我希望 collectionView 的内容从屏幕的最顶部（状态栏顶部）开始，因为我有透明的导航栏，我想避免幻数，它应该与iPhone X 和其他 iPhone。

我尝试了什么？

collectionView.contentInset = UIEdgeInsets(top: -64, left: 0, bottom: 0, right: 0)

但这不是一个优雅的解决方案，对于 iPhone X 也不正确，需要增加插图

任何干净的解决方案？

面向 ios 10 和 11

【问题讨论】：

用主视图设置 UICollectionView 顶部 0。无需设置 contentInset。

【参考方案1】：

将此添加到包含UICollectionView 的UIViewController 中，以防止集合视图位于导航栏下方。例如。在viewDidLoad 方法中：

斯威夫特 4

self.edgesForExtendedLayout = UIRectEdge.bottom

您甚至可以设置edgesForExtendedLayout = [] 以防止集合视图也进入UITabBars。

【讨论】：

这个对我有用，但另外我必须使用 -64（导航栏 + 状态栏）作为使用顶部安全区域限制集合视图的值。

【参考方案2】：

对于 Swift 5 试试这个

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true

并从 IB Size Inspector 选项卡中将“content Insets”设置为“Never”。

【参考方案3】：

如果您正在使用界面生成器，这可以通过将集合视图的顶部空间约束设置为具有来自 superview 的 0 constant 和 不是 safe area 来轻松完成。

        view.addSubview(collectionView)
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        collectionView.topAnchor.constraint(equalTo: view.topAnchor, constant: 0).isActive = true
        collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0).isActive = true
        collectionView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 0).isActive = true
        collectionView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: 0).isActive = true

考虑到这种方法适用于 iOS11，但会在 iOS10 上崩溃。这是因为我仍在使用安全区域进行前导和尾随，iOS10 中没有安全区域。使用 Xcode 9 和界面生成器，您可以免费转换从安全区域到布局指南。

【讨论】：

代码可以吗？我正在使用SnapKit，但我可以使用本机代码布局系统

我从未使用过 snapkit，但使用自动布局 API 可能是这样的，我已经更新了答案

【参考方案4】：

如果您的收藏视图已经全屏，您还应该将collectionView.contentInsetAdjustmentBehavior 设置为.never

【参考方案5】：

在包含集合视图的视图控制器上添加此属性

self.edgesForExtendedLayout = []