iPhone X - 我们应该如何处理 table 部分 headers 上面的 space？它通过内容显示

Question

我有一个包含多个部分和每个部分的部分 headers 的表格视图。如您所知，header 部分随 tableview 一起移动。因此，如果有多个部分，当前部分的 header 会粘在表格视图的顶部，而该部分的内容会滚动到 header.

下方

我想弄清楚它应该如何适应 iPhone X，因为 header 上方的 space 正在通过内容显示，正如您在此注意到的截屏。我查看了有关如何适应 iPhone X 缺口的 Apple 视图，但他们所有的示例在顶部都有一个搜索栏视图，因此他们从未真正遇到过这个问题。

Answer 1

如果您有兴趣，可以看看这个 github 页面，它可以让您解决这个缺口问题：

https://github.com/HarshilShah/NotchKit

Answer 2

as the space above the header is showing through the content as you notice in this screenshot

区分两件事：在槽口后面向上延伸的主视图和 table 视图。将 table 视图的顶部固定到安全区域的顶部。在 iPhone X 上，only 在 iPhone X 上，安全区的顶部将远离主视图的顶部，并且安全区域的底部将从主视图的底部向上，使您的 table 视图不会上升到槽口后面或下降到指示器后面。

在此屏幕截图中，有几个单元格在 A header 上方滚动，但您看不到它们。 table 视图的底部远离虚拟主页指示器。

只需给 table 视图控制器一个 parent 黑色背景的视图控制器即可。您可以在代码中执行此操作，也可以在情节提要中完全不使用代码来配置它。

Answer 3

这是我最后做的。

我添加了一个新的 UIView (notchFIxView)，其中包含 UIVisualEffectView。我把它放在视图控制器的最顶部。这是所有表视图之外的最顶层视图。我将顶部、左侧和右侧的约束固定到超级视图（不是安全区域）。

我将此视图的底部固定到安全区域的顶部。

我在接口中添加了 UIScrollViewDelegate 协议和以下用于 iPhoneX 检测的宏：

#define IS_IPHONE (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
#define SCREEN_WIDTH ([[UIScreen mainScreen] bounds].size.width)
#define SCREEN_HEIGHT ([[UIScreen mainScreen] bounds].size.height)
#define SCREEN_MAX_LENGTH (MAX(SCREEN_WIDTH, SCREEN_HEIGHT))
#define IS_IPHONE_X (IS_IPHONE && SCREEN_MAX_LENGTH == 812.0)

我在我的界面中添加了一个BOOL checkIfNotch;变量并在viewDidLoad中初始化它：

checkIfNotch = IS_IPHONE_X;

然后 notchFIxView 的最终 showing/hiding 发生如下：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    if (checkIfNotch) {
        static CGFloat lastY = 0;

        CGFloat currentY = scrollView.contentOffset.y;

        if ((lastY <= tableheaderviewHeight) && (currentY > tableheaderviewHeight)) {
            NSLog(@" ******* Header view just disappeared");

            self.notchFIxView.hidden=NO;
            [UIView animateWithDuration:0.3 animations:^{
                self.notchFIxView.alpha=1;
            } completion:^(BOOL finished) {

            }];

        }

        if ((lastY > tableheaderviewHeight) && (currentY <= tableheaderviewHeight)) {
            NSLog(@" ******* Header view just appeared");

            [UIView animateWithDuration:0.3 animations:^{
                self.notchFIxView.alpha=0;
            } completion:^(BOOL finished) {
                self.notchFIxView.hidden=YES;
            }];
        }

        lastY = currentY;
    }
}

经过这个，看起来好多了：

iPhone X - 我们应该如何处理 table 部分 headers 上面的 space？它通过内容显示

iPhone X - How are we supposed to handle the space above table section headers? It's showing through the content

ios

objective-c

iphone

uitableview

iphone-x