Set background color for top safe area only in iOS 11

Question

I'm new to Swift. I have set my top bar programmatically.It works fine for all versions except for iOS version 11.

I want to change the background color of the safe area in iPhone X. Presently I have just added the following code to hide the status bar.

 override var prefersStatusBarHidden: Bool {
    return true
}

I have created top bar using code:

//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;
    //ImageView - Back Button
    let backBtn = UIButton(frame:CGRect(x: 25, y: 18, width: 18, height: 34))
    let backBtnImage = UIImage(named: "back_button") as UIImage?
    backBtn.setImage(backBtnImage, for: .normal)
    backBtn.layer.masksToBounds = true
    backBtn.addTarget(self,action:#selector(backButtonClicked),
                      for:.touchUpInside)
    //Label - Title
    let titleLabel = UILabel(frame:CGRect(x: width * 0.3, y: 13, width: width * 0.55, height: 40))
    titleLabel.text = "Favorites"
    titleLabel.contentMode = UIViewContentMode.center
    //include all in view
    topBar.addSubview(titleLabel)
    topBar.addSubview(backBtn)

    containerView.addSubview(topBar)

Is there a way in which i can do it without using UINavigationBar or setting status bar.

use default navigationbar, it is the easiest and efficient way — Devang Tandel, Nov 13 '17 at 08:39
Use default navigation contorller...Read this https://stackoverflow.com/questions/46344381/ios-11-layout-guidance-about-safe-area-for-iphone-x safeAreaLayoutGuide is property of UIView — karthikeyan, Nov 13 '17 at 08:54
Im sorry im new to swift. Can u suggest a way it has to done. — Geethanjali Reddy, Nov 13 '17 at 09:39
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/158840/discussion-between-karthikeyan-and-geethanjali-reddy). — karthikeyan, Nov 13 '17 at 09:40
@Geethanjali Reddy : please refer this https://stackoverflow.com/questions/46542109/how-to-set-unsafe-area-background-color-for-ios-11 — Vishnu, Nov 13 '17 at 09:57
@iosdeveloper: Thanks.But it does not seem to solve the issue. I dont want status bar to be shown. — Geethanjali Reddy, Nov 13 '17 at 10:11

score 1 · Answer 1 · answered Dec 20 '17 at 10:55

Hi you can also try this one , need to add a view with same background which you set in your header view and add to container parent view . please refer below code

//Top Bar


    let safeAreaView = UIView(frame:CGrect(x: 0,y: 0, width: width, height: 40))
    safeAreaView.backgroundColor = UIColor.white
    self.view.addSubview(safeAreaView)

    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;
    //ImageView - Back Button
    let backBtn = UIButton(frame:CGRect(x: 25, y: 18, width: 18, height: 34))
    let backBtnImage = UIImage(named: "back_button") as UIImage?
    backBtn.setImage(backBtnImage, for: .normal)
    backBtn.layer.masksToBounds = true
    backBtn.addTarget(self,action:#selector(backButtonClicked),
                      for:.touchUpInside)
    //Label - Title
    let titleLabel = UILabel(frame:CGRect(x: width * 0.3, y: 13, width: width * 0.55, height: 40))
    titleLabel.text = "Favorites"
    titleLabel.contentMode = UIViewContentMode.center
    //include all in view
    topBar.addSubview(titleLabel)
    topBar.addSubview(backBtn)

    containerView.addSubview(topBar)

Set background color for top safe area only in iOS 11

1 Answers1