Translucent Status Bar with No Navigation Bar

6
votes

Goal: To have a table view scroll so that it shows semitransparent under the status bar while not displaying a navigation bar.

Right now, I have my tableView set to the top anchor (so technically underneath the status bar). This sets the status bar to a solid looking color as you scroll up on the table view. I've set the navigationAppearance's barTintColor and translucent to YES with no luck.

Any ideas? The view is instantiated in a storyboard

2
swiftuinavigationbar
I can't tell what you mean. Maybe attach a picture of what you currently have? – Daniel Legler
I'll use Apple Music as an example. If you scroll up on the Library tab, you can see the text "Library" opaquely while it is underneath the status bar. I want to do exactly that @DanielLegler – CatLord
can you update with screenshot of your problem or possibly some code you have tried? – Joe

2 Answers

10
votes

Your question is hard to guess without any code.I believe you trying to achieve a translucent status bar when tableview content scroll like you mentioned in Apple Music app.

Try below code inside your viewdidLoad method.

Step 1: To hide navigation bar. If your controller embedded with navigationController.

navigationController?.navigationBar.isHidden = true

Step 2: Place a statusBar size UIView to your controller to act as a translucent status Bar with adjusting alpha value.

 let statusBarView = UIView(frame: CGRect(x:0, y:0, width:view.frame.size.width, height: UIApplication.shared.statusBarFrame.height))
 statusBarView.backgroundColor=UIColor.white 
 statusBarView.alpha = 0.8 // set any value between 0 to 1
 view.addSubview(statusBarView)

Above code will produce the following output.Let me know the code works for you.

enter image description here

For more information how to set tableView frame and contentView take a look at my answer in the following link.

Update:

Improved Answer:

You can use UIBlurEffectView to achieve better translucent effect.

    let statusBarView = UIView(frame: CGRect(x:0, y:0, width:view.frame.size.width, height: UIApplication.shared.statusBarFrame.height))
    let blurEffect = UIBlurEffect(style: .extraLight) // Set any style you want(.light or .dark) to achieve different effect.
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    blurEffectView.frame = statusBarView.bounds
    blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    statusBarView.addSubview(blurEffectView)
    view.addSubview(statusBarView)

Output:

enter image description here

1
votes

As you described, your UITableView is right underneath the status bar. When you scroll down, the tableView's frame remains the same size and origin and won't go underneath the status bar. What you want to do is to set the constraint for your tableView to the top of the superview (not the Top Layout Guide) which means it would sit right under the status bar.

Because the status bar now hides the top 20px of your tableView you want to make a content offset:

tableView.contentInset = UIEdgeInsetsMake(top: 20, left: 0, bottom: 0, right: 0)

To make the scroll indicator start right under the status bar you also want to set an offset for it:

tableView.scrollIndicatorInsets = UIEdgeInsets(top: 20, left: 0, bottom: 0, right: 0)