CODEWITHSUNDEEP
iosswiftios11xcode9safearealayoutguide
thibaut noah
thibaut noah

Reputation: 1514

How to set unsafe area background color for ios 11

Creating some new view controllers with xcode 9 so now I have a few safe areas to deal with.

I am currently trying to do something fullproof, meaning keeping the unsafe area as it is (since I always display the status bar) and having the background color extending to the fullscreen (to keep a similar behaviour to what I used to have).

On an additional note, this also affect page controls since when you have some the system will put them in the bottom unsafe area which will also be displayed in black.

I cannot find a way for the background color to extend behind the unsafe area though. Any thoughts?

Upvotes: 17

Views: 22263

Answers (5)

leaf2301
leaf2301

Reputation: 1

For those who are still looking up this question. My simplest solution is to create an uiview and constraint it

    private let containerView: UIView = {
    let view = UIView()
    view.translatesAutoresizingMaskIntoConstraints = false
    view.backgroundColor = //Your background color you want present
    return view
}()

Then constraints it in this way. Set bottomSafeArea(or topSafeArea)

        containerView.topAnchor.constraint(equalTo: view.topAnchor),
        containerView.leftAnchor.constraint(equalTo: view.leftAnchor),
        containerView.rightAnchor.constraint(equalTo: view.rightAnchor),
        containerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),

and finally set color to it

containerView.backgroundColor = //Color you want to set

Upvotes: 0

whitney13625
whitney13625

Reputation: 591

Recently I was solving a problem similar to this. The difference is that in my view the top unsafe areas has to be filled while the bottom ones doesn't. Another difference is that my background view is actually in a scrollView, which make the constraints setting more complex.

I tried the "statusBar" solution mentioned above, however I guess the view hierarchy had be changed since iOS 13, thus this would result to crash.

Finally I came out with this solution that solves the problem:

Firstly add Status Bar Bg View at the very top of the view controller view, align its top, leading, and trailing to safe area's top, leading, and trailing (statusBarBgView in the code). At the same time, set the original fill background (bgView)'s top constrains to Status Bar Bg View's bottom.

Then in viewDidLoad(), call the following method:

private func fillSafeAreaIfNeeded() {
    if let _ = UIApplication.shared.keyWindow?.safeAreaInsets.top {
        statusBarBgView.translatesAutoresizingMaskIntoConstraints = false
        statusBarBgView.topAnchor.constraint(equalTo: view!.topAnchor).isActive = true // This line fills up status bar
        bgView.topAnchor.constraint(equalTo: statusBarBgView!.bottomAnchor).isActive = true
    }
    else {
        statusBarBgView.frame = CGRect.zero
    }
}

Note that by constraining bgView's topAnchor with statusBarBgView's bottomAnchor, the gap between both view could be avoided while scrolling.

Upvotes: 0

Marco Canino
Marco Canino

Reputation: 9

    if #available(iOS 13.0, *) {
        let navBarAppearance = UINavigationBarAppearance()
        navBarAppearance.configureWithTransparentBackground()
        navBarAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
        navBarAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
        navBarAppearance.backgroundColor = .black
        navigationController?.navigationBar.standardAppearance = navBarAppearance
        navigationController?.navigationBar.scrollEdgeAppearance = navBarAppearance
    }

Upvotes: -1

Krunal
Krunal

Reputation: 79776

It looks like a hacky trick but you may try this:
You can set background color for status bar during application launch or during viewDidLoad of your view controller. Here it works for me, in following ways.

extension UIApplication {

    var statusBarView: UIView? {
        return value(forKey: "statusBar") as? UIView
    }

}

// Set it from your view controller if you've view controller based statusbar
class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        UIApplication.shared.statusBarView?.backgroundColor = UIColor.green
    }

}

or

// Set upon application launch, if you've application based status bar
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        UIApplication.shared.statusBarView?.backgroundColor = UIColor.green
        return true
    }
}



Here is result:

enter image description here

Upvotes: 21

pesch
pesch

Reputation: 1996

You have to apply different constraints. Your background color should extend beyond the safe area all the way to the superview. So your constraints need to be set to the superview for your background color but to the safe area for your ui view (buttons, tableViews and the like)

Upvotes: 10

Related Questions