iPhone X - 我们应该如何处理表格部分标题上方的空间？它通过内容显示

Posted 2023-03-12

【中文标题】iPhone X - 我们应该如何处理表格部分标题上方的空间？它通过内容显示

【英文标题】：iPhone X - How are we supposed to handle the space above table section headers? It's showing through the content

【发布时间】：2017-09-26 05:10:27

【问题描述】：

我有一个表格视图，其中包含多个部分和每个部分的部分标题。如您所知，节标题随表格视图移动。因此，如果有多个部分，则当前部分的标题会粘在 tableview 的顶部，而该部分的内容会在标题下滚动。

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

【问题讨论】：

如果应用程序正在显示状态栏。默认情况下会解决此问题。

@rptwsthi 不是真的，只有当我在顶部显示一个无用的导航栏并卡住时，这个问题才会得到解决。但这基本上意味着我在浪费屏幕空间。

可以显示状态栏。

好久没玩UIKit了，不过没有安全区域限制

【参考方案1】：

这就是我最终做的事情。

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

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

我在接口中添加了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 的最终显示/隐藏发生如下：

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

在这之后，它看起来好多了：

【讨论】：

残暴。 看起来如何不是重点。有一个正确的方法可以做到这一点，它很简单，它根本不需要代码，但你不愿意这样做。

@matt 抱歉，我不明白我的方式有什么问题？当 tableview 根本不滚动时，您的答案如何？什么时候达到顶峰？可以分享一下截图吗？

你的“方式”有什么问题，它只是一堆临时的hacky twiddling。有一种不需要代码的简单正确方法，这也是 Apple 打算让你做的事情——这就是他们给你安全区的原因。那么为什么不这样做呢？

如果我理解正确，您所说的“正确”的方式是让 tableview 顶部从安全区域而不是 superview 顶部开始。如果我这样做，那么缺口周围的整个区域都是黑色的，这是 Apple 在他们的指导方针中不鼓励的。还是我还是误解了你的方式？

您已经违反了没有导航栏的表格视图控制器的准则。您会注意到 Apple 的应用程序都没有这样做。

【参考方案2】：

正如您在此屏幕截图中看到的那样，标题上方的空间通过内容显示

区分两件事：主视图（在凹槽后面延伸）和表格视图。将表格视图的顶部固定到安全区域的顶部。在 iPhone X 上，仅在 iPhone X 上，安全区的顶部会从主视图的顶部向下，安全区的底部会从底部向上的主视图，防止您的表格视图在凹口后面上升或在指示器后面下降。

在此屏幕截图中，有几个单元格在 A 标题上方滚动，但您看不到它们。并且表格视图的底部没有虚拟主页指示器。

这只是给表格视图控制器一个带有黑色背景的父视图控制器的问题。您可以在代码中执行此操作，也可以在情节提要中完全不使用代码进行配置。

【讨论】：

我想你误解了截图。您在节标题后面看到的视图是已向上滚动的表格视图单元格。 “Ice”是单元格之一，就像“Beach”、“Galaxy”等一样。没有主视图，只有带有部分标题的表格视图。

我想你误解了我的回答。我告诉你，解决方案是你需要两个视图，一个表视图，但它后面有一个主视图。

当表格视图完全不滚动时，您的答案看起来如何？当它处于最顶端时。可以分享一下截图吗？

看起来一样，但最上面的单元格是阿拉巴马州；然后是阿拉斯加，然后是亚利桑那（这些都在屏幕截图的标题上方滚动）。

我要找的是你把整个缺口区域都用黑色隐藏了吗？

【参考方案3】：

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

https://github.com/HarshilShah/NotchKit

【讨论】：

来自该页面：“P.S.：这主要是作为一个玩笑，当时我正在讨论处理 iPhone X 的不同方法。Apple 更新的 iPhone X 人机界面指南明确指出：不要” t 掩盖或特别注意关键显示功能。不要试图通过在屏幕顶部和底部放置黑条来隐藏设备的圆角、传感器外壳或访问主屏幕的指示器。我不确定如果违反 HIG 经常被用作拒绝的理由，但我不会打赌。”