iPhone X-我们应该如何处理表格节标题上方的空间?通过内容显示 [英] iPhone X - How are we supposed to handle the space above table section headers? It's showing through the content

问题描述

我有一个包含多个节的表格视图，每个节都有节标题.如您所知，节标题随tableview一起移动.因此，如果有多个部分，则当前部分的标题将停留在表视图的顶部，而该部分的内容将滚动到标题下.

I have a tableview with multiple sections and section headers for each section. As you know, section header moves with the tableview. So if there are more than one sections, the current section's header sticks to the top of the tableview while the content of that section scrolls under the header.

我试图弄清楚它应该如何适应iPhone X，因为标题上方的空间正通过内容显示出来，正如您在此屏幕快照中所注意到的那样.我查看了Apple如何适应iPhone X缺口的观点，但他们的所有示例均在顶部显示了搜索栏视图，因此他们从未真正面对过此问题.

I am trying to figure out on how it's supposed to get adapted for the iPhone X as the space above the header is showing through the content as you notice in this screenshot. I looked at the Apple view on how to adapt for the iPhone X notch but all their examples had a search bar view on top so they never really faced this issue.

推荐答案

这就是我最终要做的事情.

Here's what I ended up doing.

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

I added a new UIView (notchFIxView) with UIVisualEffectView inside. I placed it at the very top of the view controller. This is the topmost view outside all the tableview. I pinned the top, left and right constraints to the superview (NOT the safe area).

我将此视图的底部固定在安全区域的顶部.

I pinned the bottom of this view to the top of the Safe Area.

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

I added UIScrollViewDelegate protocol to the interface and following macros for iPhoneX detection:

#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中对其进行了初始化:

I added a BOOL checkIfNotch; variable to my interface and initialize it in the viewDidLoad:

checkIfNotch = IS_IPHONE_X;

然后，notchFIxView的最终显示/隐藏如下:

Then the final showing/hiding of the notchFIxView happens as follows:

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

在此之后，它看起来好多了:

After this, it looks much nicer:

这篇关于iPhone X-我们应该如何处理表格节标题上方的空间?通过内容显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！