Search code examples
xcodeuiwebviewios11iphone-x

UIWebView show overlapping status bar in ios-11, iPhone-X, Xcode-9

I'm loading a web with UIWebView, everything works fine except that the iphoneX is cut off the bar where I put an "OK" button and a label with a title.

    // webView
    var webView: WKWebView!
override func viewDidLoad() {
    super.viewDidLoad()
    let myURL = URL(string: "https://google.com")
    let myRequest = URLRequest(url: myURL!)

    webView = WKWebView(frame: CGRect( x: 0, y: 60, width: self.view.frame.width, height: self.view.frame.height - 60 ), configuration: WKWebViewConfiguration() )

    //webView.backgroundColor = UIColor.blue
    self.view.addSubview(webView)

    webView.load(myRequest)
    self.webView.allowsBackForwardNavigationGestures = true

    //hide navegation bar
    self.navigationController?.setNavigationBarHidden(true, animated: true)

    // add cornerRadius to view
    navegador.layer.cornerRadius = 10

    //add observer to get estimated progress value
    self.webView.addObserver(self, forKeyPath: "estimatedProgress", options: .new, context: nil)



    }

Any suggestions to solve this impasse.

View image

Solution

  • The height of the StatusBar in the iPhoneX is higher than in the other devices, it is necessary to calculate this height and use this value for the WebView coordinates.

    1. Add a view to place the OK button:

    @IBOutlet weak var myTopBar: UIView!

    1. Calculate height of statusBar:

    //Get height status bar let statusBarHeight = UIApplication.shared.statusBarFrame.height
    // to see correctly on all device models the new height will be: let heightTotal = self.myTopBar.frame.height + statusBarHeight

    3: In the webView, use this height:

    webView = WKWebView(frame: CGRect( x: 0, y: heightTotal, width: self.view.frame.width, height: self.view.frame.height - heightTotal), configuration: WKWebViewConfiguration() )