iPhone X 上的横向 UICollectionView

Question

当 iPhone X 横向使用时，您应该检查 safeAreaInsets 以在左侧和右侧制作适当大的排水沟。 UITableView 具有新的insetsContentViewsToSafeArea 属性（默认为 true），可以自动将单元格内容保存在安全区域中。

我很惊讶 UICollectionView 似乎没有类似的东西。我希望对于垂直滚动的集合视图，在横向时，左侧和右侧将插入到安全区域（相反，如果需要纵向，水平滚动的集合视图将被插入）。

确保这种行为的最简单方法似乎是添加到集合视图控制器中：

- (void)viewSafeAreaInsetsDidChange {
    [super viewSafeAreaInsetsDidChange];
    UIEdgeInsets contentInset = self.collectionView.contentInset;
    contentInset.left = self.view.safeAreaInsets.left;
    contentInset.right = self.view.safeAreaInsets.right;
    self.collectionView.contentInset = contentInset;
}

...假设 contentInset.left/right 通常为零。

（注意：是的，对于 UICollectionViewController，它必须是 self.view.safeAreaInsets；在调用它时，对 safeAreaInsets 的更改奇怪地尚未传播到 self.collectionView）

我错过了什么吗？该样板文件很简单，但现在对于接触屏幕边缘的每个 集合视图来说，它实际上是必需的。 Apple 没有提供默认启用此功能的功能，这似乎真的很奇怪。

Answer 1

有同样的问题。这对我有用：

override func viewDidLoad() {
    if #available(iOS 11.0, *) {
        collectionView?.contentInsetAdjustmentBehavior = .always
    }
}

.always 枚举案例的 documentation 表示：

始终在内容调整中包含安全区域插图。

此解决方案在手机旋转的情况下也能正常工作。

Answer 2

虽然 Nathan 关于 UICollectionView 与各种布局的多功能性是正确的，但我主要关心的是使用 UICollectionViewFlowLayout 的“默认”情况。

原来，iOS 11 为 UICollectionViewFlowLayout 添加了一个 sectionInsetReference 属性。它上面的official documentation 目前缺少描述，但是标题将其描述为

节插入的参考边界将被定义为相对于。默认为.fromContentInset。

注意：将始终至少尊重内容插图。例如，如果sectionInsetReference 等于.fromSafeArea，但调整后的inset 大于安全区域和section inset 的组合，则section 内容将与content inset 对齐。

可能的值是

@available(iOS 11.0, *)
public enum UICollectionViewFlowLayoutSectionInsetReference : Int {
    case fromContentInset
    case fromSafeArea
    case fromLayoutMargins
}

并将其设置为 .fromSafeArea 会产生所需的结果，即最初处于纵向时：

然后当旋转到横向时，单元格会被插入，以使它们完全在安全区域内：

...但是，目前存在一个错误，当视图旋转回纵向时， 视图一直处于横向状态，它继续表现得好像左/右 safeAreaInsets 设置为横向价值观：

我已就此问题提交了一份雷达 (rdar://34491993)。

Answer 3

感谢上面的帮助。对于我的 UICollectionViewController 子类，我在 viewDidLoad() (Swift 3) 中添加了以下内容：

if let flowLayout = collectionView?.collectionViewLayout as? UICollectionViewFlowLayout {
    if #available(iOS 11.0, *) {
        flowLayout.sectionInsetReference = .fromSafeArea
    }
}

Answer 4

请记住，上述解决方案不能解决您的集合单元格视图（以及受限于其单元格的前缘或后缘的子视图）对于集合视图边界是全宽并且未设置为服从的情况

strong>安全区域布局指南。

注意：@petrsyn 的答案使标题从侧面插入，这是大多数人可能不想要的，@Wes Campaigne 的答案对于全角单元格实际上并不能正常工作，其中子视图附加到单元格的前缘或后缘。

必须将 Xib 和 Storyboard 文件设置为使用安全区域布局指南，然后使用自动布局来放置与安全区域相关的约束或执行代码类似。

Answer 5

UICollectionView 旨在灵活用于各种布局。最常见的布局是具有多行和多列的网格，但也可以使用 UICollectionView 创建非网格布局。

另一方面，UITableView 专为全角单元格设计。

因此，UITableView 将内置对处理安全区域插入的支持是有道理的，因为表格视图布局总是会受到它的影响。因为UICollectionView 使用自定义布局，所以在每个实现的基础上解决这些问题而不是试图提供一种万能的解决方案是有意义的。

Answer 6

如果您以编程方式将集合视图添加为主视图的子视图 - 那么您可以在 viewDidLoad 方法中执行此操作：

collectionView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(collectionView)

NSLayoutConstraint.activate([
        collectionView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
        collectionView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
        collectionView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
        collectionView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor)
])