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

Question

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.

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.

Answer 1

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

Distinguish two things: the main view, which stretches up behind the notch, and the table view. Pin the top of the table view to the top of the safe area. On the iPhone X, and only on the iPhone X, the top of the safe area will be way down from the top of the main view, and the bottom of the safe area will be up from the bottom of the main view, keeping your table view from getting up behind the notch or down behind the indicator.

In this screen shot, there are several cells scrolled above the A header, but you don't see them. And the bottom of the table view stays clear of the virtual home indicator.

It's just a matter of giving the table view controller a parent view controller with a black background. You can do that in code, or you can configure it entirely without code in the storyboard.

Answer 2

If you are interested then you can have a look at this github page which gives you the ability to solve this notch issue:

https://github.com/HarshilShah/NotchKit

Answer 3

Here's what I ended up doing.

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.

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)

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

checkIfNotch = IS_IPHONE_X;

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: