iPhone X上的横向UICollectionView [英] UICollectionView in landscape on iPhone X

问题描述

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

I'我很惊讶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默认没有提供启用它的东西。

解决方案

虽然Nathan对于多功能性是正确的UICollectionView有各种布局，我主要关注的是默认情况，其中一个使用UICollectionViewFlowLayout。

结果，iOS 11增加了一个 sectionInsetReference property to UICollectionViewFlowLayout 。关于它的

然后转到景观，细胞被插入，使得它们完全在安全区域内：

...但是，目前存在一个错误，当之后旋转回到肖像时，视图已经进入如果左/右safeAreaInsets设置为横向值，它继续表现为：

我已经提交了雷达（ rdar：// 34491993 ）关于这个问题。

When iPhone X is used landscape, you're supposed to check safeAreaInsets to make suitably large gutters on the left and right. UITableView has the new insetsContentViewsToSafeArea property (default true) to automatically keep cell contents in the safe area.

I'm surprised that UICollectionView seems to not have anything similar. I'd expect that for a vertically-scrolling collection view, the left and right sides would be inset to the safe area when in landscape (and conversely, a horizontally-scrolling collection view would be inset if needed in portrait).

The simplest way to ensure this behaviour seems to be to add to the collection view controller:

- (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;
}

... assuming contentInset.left/right are normally zero.

(NOTE: yes, for a UICollectionViewController, that needs to be self.view.safeAreaInsets; at the time this is called, the change to safeAreaInsets has oddly not yet propagated to self.collectionView)

Am I missing something? That boilerplate is simple enough, but it's effectively necessary now for every collection view that touches a screen edge. It seems really odd that Apple didn't provide something to enable this by default.

解决方案

While Nathan is correct about the versatility of UICollectionView with various layouts, I was mainly concerned about the "default" case where one is using UICollectionViewFlowLayout.

Turns out, iOS 11 has added a sectionInsetReference property to UICollectionViewFlowLayout. The official documentation on it currently lacks a description, however the headers describe it as

The reference boundary that the section insets will be defined as relative to. Defaults to .fromContentInset.

NOTE: Content inset will always be respected at a minimum. For example, if the sectionInsetReference equals .fromSafeArea, but the adjusted content inset is greater that the combination of the safe area and section insets, then section content will be aligned with the content inset instead.

The possible values are

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

and setting it to .fromSafeArea produces the desired results, i.e., when initially in portrait orientation:

then when rotating to landscape, the cells are inset such that they are entirely within the safe area:

... HOWEVER, there's currently a bug, and when rotating back to portrait after the view has been in landscape, it continues to act as if the left/right safeAreaInsets are set to the landscape values:

I've filed a radar (rdar://34491993) regarding this issue.

这篇关于iPhone X上的横向UICollectionView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！