iPhone X失去了我的底部工具栏。 如何将视图设置为安全的布局区域？

Question

I use a wk webview and my own tool bar on my app. I have set the constraints for the top of my webview to the **safe layout area ** as described in a https://medium.com/@hassanahmedkhan/playing-it-safe-with-safe-area-layout-guide-b3f09bdc71fe and the following image:

My iphone X image looks like the following with extra white space on the top and the bottom and I am missing my bottom tool bar. ** Please note the black area is simply blocked out so as not to show location. It is the typical google map. **

I want it to look like (NOTE: the bottom bar, and the proper fit - no white space as on the iphone x version.)

My code that sets the size of the web frame (top portion) looks like this IS there a way to set my view into the safe layout area/frame itself?

Again, I do set the constraints to the safe layout area as described in the above hyper link. What do I need to do to correct for the iphone x version? (NOTE: when I say correct I mean

1. remove top white space
2. remove bottom white space

3. have MY tool bar as show in the iphone 7 version on the bottom

   Thank you.

Answer 1

I got my tool bar to show up. I still have extra white space, yuk! If someone has any ideas on how to fix, it would be greatly appreciated.

I changed my code to this:

   // Iphone x does not show tool bar and has extra padding so need to change
UIWindow *mainWindow = [[[UIApplication sharedApplication] delegate] window];

    CGFloat top = 0 ;
    CGFloat bottom = 0 ;
    bool iphoneX = NO;
    if (@available(iOS 11.0, *)) {
        top = mainWindow.safeAreaInsets.top ;
        bottom = mainWindow.safeAreaInsets.bottom ;
        if (top > 0.0) { //only have on iphonex where not zero
            iphoneX = YES;
        }
    }
    if (iphoneX)
    {
        rightSizeFrame.size.height = mainWindow.frame.size.height - top - bottom ;// notice subtracting the tool bar height instead of top and bottom did not work! - ( 1*TOOLBAR_HEIGHT) ; // need the bottom to see the tool bar not sure why
        rightSizeFrame.origin.y = 0 ; // no top whitespace
    }


    // will this set the right size aand POSITION
    [[ self webView] setFrame:rightSizeFrame] ;

    // then stick the new webView8 into the frame
    _webView8 = [[WKWebView alloc] initWithFrame:self.webView.frame
                                  configuration:configuration];

I needed the height to have both the bottom and the top removed from the window frame in order for my tool bar to show. Unfortunately, like the image in my first post - I still have extra white space on top and beneath the web view. And now I have gray space at the bottom of the tool bar. It looks terrible but at least is functional. Does anyone have any ideas why the extra white and gray space? I am actually surprised that I have received no answers. Am I missing something obvious?