top bar overlapping in unsafe area

Question

my top bar works fine in all other iPhones except iPhoneX due to safe area introduction.The top bar starts in unsafe area itself.The top bar is a custom UI.It looks as below:

The code is as follows:

    //Top Bar
    let topBar = UIView(frame:CGRect(x: 0,y: 0, width: width, height: 60))
    topBar.backgroundColor = UIColor.white
    topBar.layer.shadowColor = UIColor.gray.cgColor
    topBar.layer.shadowOffset = CGSize(width: 0, height: 3)
    topBar.layer.shadowOpacity = 1
    topBar.layer.masksToBounds = false
    topBar.layer.shadowRadius = 8.0;

    self.view.addSubview(topBar)

How do I fix this.I want view to start from safe area.And I don't want to use UINavigationBar.Thanks.

if you create an own custom navigation bar, you need to respect the safe area's guides – the system will not do it for you automatically unless you use the standard navigation-bars or tool-bars. — holex, Nov 15 '17 at 09:42
@holex: I understand it.Can you suggest a way in which it can be done? — Geethanjali Reddy, Nov 15 '17 at 11:39
I'd start on the [*iPhone X HIG*](https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/) page then all related tutorials and videos are available from this page in favour of the devs. you can find brilliant explanation and a collection of how it is supposed to be done. — holex, Nov 15 '17 at 11:42

Lumialxk · Accepted Answer · 2017-11-16T02:14:35.010

Use Auto-Layout and layout guide to build your UI. For example, use SnapKit.

let topBar = UIView(frame:CGRect(x: 0,y: 0, width: width, height: 60))
topBar.snp.makeConstraints { make in

    make.top.equalTo(self.view.safeAreaLayoutGuide.snp.top)

    make.leading.trailing.equalToSuperview()
}

Update

Re-write with original api.

let topBar = UIView(frame:CGRect(x: 0,y: 0, width: 30, height: 60))
self.view.addSubview(topBar)
let top = NSLayoutConstraint.init(item: topBar, attribute: .top, relatedBy: .equal, toItem: self.view.safeAreaLayoutGuide, attribute: .top, multiplier: 1.0, constant: 0.0)
let leading = NSLayoutConstraint.init(item: topBar, attribute: .leading, relatedBy: .equal, toItem: self.view, attribute: .leading, multiplier: 1.0, constant: 0.0)
let trailing = NSLayoutConstraint.init(item: topBar, attribute: .trailing, relatedBy: .equal, toItem: self.view, attribute: .trailing, multiplier: 1.0, constant: 0.0)
let height = NSLayoutConstraint.init(item: topBar, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 50.0)
topBar.addConstraints([top, leading, trailing, height])

Im sorry, I'm new to swift, can you suggest a way to do it without using snapKit, Like using general Layout constraints. — Geethanjali Reddy, Nov 15 '17 at 10:32

score 0 · Answer 2 · answered Nov 16 '17 at 02:19

And I don't want to use UINavigationBar

It doesn't matter what you want. You need to anyway. You have violated the interface guidelines and now you're in trouble because of it. Do what Apple wants you to do. UINavigationBar has the ability to stretch automatically up behind the "notch" when it is configured correctly. The same for UIToolbar at the bottom. You need to use these.

top bar overlapping in unsafe area

2 Answers2

Update