Search code examples
iosswiftwebviewstatusbar

how to set background colour to transparent, so as to show carrier information, time and battery status

I am using WKWebView to open webpages in my Swift 3+ app. i am NOT using storyboard or XIB.

When my webview loads, it hides the carrier information, cellular network signal strength indicators (dots), WiFi/4G connectivity indicator, time, and battery status due to a black background colour (set by default)

I want to show my webview below that top status bar. I obtained the statusbar's height using UIApplication.shared.statusBarFrame.height (expected it to be 20, and confirmed so)

How can i make both appear well? (with white background/transparency) such that users can see statusbar information on top and then webview as expected.

Controller.swift:

import UIKit
import WebKit

class MyWebViewController: UIViewController, WKNavigationDelegate {
    var urlString:String? = nil
    let myWebView = WKWebView(frame:CGRect(x: 0, y: 32+UIApplication.shared.statusBarFrame.height, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height-32-UIApplication.shared.statusBarFrame.height))
    let button = UIButton(frame: CGRect(x:UIScreen.main.bounds.width - 100,y:50,width:50,height:50))
    let navpath = UITextView(frame:CGRect(x: 0, y: UIApplication.shared.statusBarFrame.height, width: UIScreen.main.bounds.width, height: 32))

    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.isOpaque=true
        self.view.backgroundColor = UIColor.clear
        print("status bar height : \(UIApplication.shared.statusBarFrame.height)")
        button.backgroundColor = UIColor.red
        button.setTitle("close", for: .normal)
        myWebView.navigationDelegate = self
        myWebView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        myWebView.load(NSURLRequest(url: targetUrl as URL) as URLRequest)
        view.addSubview(myWebView)
        button.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        navpath.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        view.addSubview(navpath)
        myWebView.addSubview(button)
    }
    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        //print(navigationAction.navigationType)
        let navReq = navigationAction.request
        let targetUrl = navReq?.url
        let link = targetUrl?.absoluteString
        print("targetURL : \(targetUrl)\n link : \(link)")
        navpath.text=link
        //self.myWebView.load(navReq)
        decisionHandler(.allow)
    }
}

on rotation, the green battery indicator goes hidden. i'd like to fix that as well. the navpath (addressbar textholder) and button (close) also get misplaced, i think i need autolayout/constraintmanager or something.

current samples loading duckduckgo:

portrait

portrait

landscape

landscape

additionally, let me know if UITextView is a good choice for showing address bar (URL of webpage), or i should use UILabel or something else, probably better, navigationBar? but, i guess that would require storyboard/xib.

Solution

  • You can set the preferredStatusBarStyle for your view: https://developer.apple.com/reference/uikit/uiviewcontroller/1621416-preferredstatusbarstyle

    In your ViewController:

    override var preferredStatusBarStyle: UIStatusBarStyle {
    return .lightContent
}

    If different views have different statusbar styles, you can update it using setNeedsStatusBarAppearanceUpdate(), eg. in viewDidAppear.

    https://developer.apple.com/reference/uikit/uiviewcontroller/1621354-setneedsstatusbarappearanceupdat