Translucent Status Bar with No Navigation Bar

Question

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

Answer 1

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.

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:

Answer 2

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)