Change background color of status bar

Question

I have a very simple web view project which just loads a website. There is a bug though, the website content is showing in the status bar if I scroll down.

I read that this is because the background color of the ViewController is set to be transparent, how can I change it to another color?

I tried it like this:

let color = UIColor.black;
self.view.backgroundColor = color

But nothing changes

Whole Code:

ViewController.swift

import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate {

    @IBOutlet var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // 1  The webView loads the url using an URLRequest object.
        let url = URL(string: "https://www.blizz-z.de/")!

        webView.load(URLRequest(url: url))

        // 2  A refresh item is added to the toolbar which will refresh the current webpage.
        let refresh = UIBarButtonItem(
            barButtonSystemItem: .refresh,
            target: webView,
            action: #selector(webView.reload)
        )

        toolbarItems = [refresh]
        navigationController?.isToolbarHidden = true
        navigationController?.isNavigationBarHidden = true

    }

    override func loadView() {
        webView = WKWebView()
        webView.navigationDelegate = self
        view = webView
        let color = UIColor.black;
        self.view.backgroundColor = color
    }

    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        title = webView.title
    }



}

I could just disable the status bar with the following code to fix the bug, but I try to keep it:

override var prefersStatusBarHidden: Bool {
    return true
}

If its a website which you are loading in the web view, and title bar is present in your website, then how you can change it in your IOS code? If this is the case not possible, you need to change it in your website code. — Asad Ali Choudhry, Jul 10 '19 at 14:21
The status bar is not from my website, it is from the iPhone. — Black, Jul 10 '19 at 14:26
The status bar is transparent. The end. If you don't want something to show behind it, don't _put_ something behind it. — matt, Jul 10 '19 at 14:39
@matt, So how should I solve the problem, it is clearly a problem of iOS or Xcode. I developed the exact same app for android and everything is working fine there. — Black, Jul 10 '19 at 14:40
Dont set the webview as the self.view. add the webview as a child view using self.view.addSubview() and set the constraint properly to omit the top status bar. Dont forget to set the clipsToBound to true for webview. — Ratul Sharker, Jul 10 '19 at 14:40
@RatulSharker, I need more details please, screenshots would be helpful — Black, Jul 11 '19 at 05:32

Shivang Pandey · Accepted Answer · 2019-07-11T11:34:15.803

1

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let height = UIScreen.main.bounds.height
        let width = UIScreen.main.bounds.width

        let webView = WKWebView(frame: CGRect(x: 0, y: 0, width: width, height: height))
        webView.load(URLRequest(url: (URL(string: "https://www.blizz-z.de/")!)))
        view.addSubview(webView)
         UIApplication.shared.statusBarView?.backgroundColor = #colorLiteral(red: 0.9529411765, green: 0.9529411765, blue: 0.9529411765, alpha: 1)
    }


}

extension UIApplication {
    var statusBarView: UIView? {
        if responds(to: Selector("statusBar")) {
            return value(forKey: "statusBar") as? UIView
        }
        return nil
    }
}

edited Jul 11 '19 at 11:34

answered Jul 10 '19 at 18:06

Shivang Pandey

178
9

I don't want to hide the status bar. – Black Jul 11 '19 at 05:23
override var prefersStatusBarHidden: Bool { return true } remove this line and add navigation controller behind this controller and set navigation color. – Shivang Pandey Jul 11 '19 at 05:28
what do you want? please share any screen. – Shivang Pandey Jul 11 '19 at 05:30
I just want to make the background color of the status bar to NOT be transparent. – Black Jul 11 '19 at 05:33
1

Get background color from html string in website and set status bar background color :- https://stackoverflow.com/a/39802582/9697632 – Shivang Pandey Jul 11 '19 at 05:35

Marwen Doukh · Answer 2 · 2019-07-10T14:38:57.043

-1

Make the webView.top constraint relative to safeArea.top constraint, and not the superview.top constraint. This allows you to make your webView under the status bar.

edited Jul 10 '19 at 14:38

answered Jul 10 '19 at 14:37

Marwen Doukh

1,946
17
26

No, you could do it from the `Storyboard` by editing the top constraint of the `webView`. – Marwen Doukh Jul 10 '19 at 14:39
The constraints are grayed out – Black Jul 10 '19 at 14:41
Could you add a screenshot of your storyboard file ? (try to show us your constraints) – Marwen Doukh Jul 10 '19 at 14:43
Here WKWebview is assigned to self.view. – Ratul Sharker Jul 10 '19 at 14:55
I don't understand how to do it, im beginner – Black Jul 11 '19 at 05:32

Change background color of status bar

2 Answers2