iOS 15 tab bar transparent after scrolling to the bottom

4.6k Views Asked by At

How to fix iOS 15 tab bar transparent after scrolling to the bottom:

iOS 15 transparent tab bar

4

There are 4 best solutions below

0
On BEST ANSWER

With iOS 15, Apple adds the scrollEdgeAppearance property for configuring the appearance of the tab bar while edge scrolling.

https://developer.apple.com/documentation/uikit/uitabbar/3750912-scrolledgeappearance?changes=latest_minor

scrollEdgeAppearance

To fix the transparent tab bar, you should create a custom scroll edge appearance and set it to the tab bar.

if #available(iOS 15.0, *) {
   let appearance = UITabBarAppearance()
   appearance.backgroundEffect = UIBlurEffect(style: .light)
   tabBar.scrollEdgeAppearance = appearance
}

Result: iOS 15 not transparent tab bar

0
On

As explained by others, you have to enable and setup scrollEdgeAppearance property.

Here is how to do it on storyboard:

enter image description here

it will add an entire section of scroll edge appearance properties:

enter image description here

1
On
init() {
    if #available(iOS 15, *) {
        let tabBarAppearance: UITabBarAppearance = UITabBarAppearance()
           tabBarAppearance.configureWithOpaqueBackground()
            UITabBar.appearance().standardAppearance = tabBarAppearance
            UITabBar.appearance().scrollEdgeAppearance = tabBarAppearance
    }
}
2
On

In iOS 15, UIKit has extended the usage of the scrollEdgeAppearance, which by default produces a transparent background.

enter image description here

Since I changed the tab bar color globally in my app, prior to iOS 15, I have added the following code to my AppDelegate:

UITabBar.appearance().barTintColor = "YOUR UITABBAR COLOR"
UITabBar.appearance().tintColor = "YOUR ICONS COLOR"
UITabBar.appearance().isTranslucent = true

To restore the old look, I had adopt the new UITBar appearance APIs, UITabBarAppearance. I changed my code to:

    UITabBar.appearance().barTintColor = "YOUR UITABBAR COLOR"
    UITabBar.appearance().tintColor = "YOUR ICONS COLOR"
    UITabBar.appearance().isTranslucent = true

    if #available(iOS 15.0, *) {
        let appearance = UITabBarAppearance()
        appearance.configureWithOpaqueBackground()
        appearance.backgroundColor = "YOUR UITABBAR COLOR"
        UITabBar.appearance().standardAppearance = appearance
        UITabBar.appearance().scrollEdgeAppearance = UITabBar.appearance().standardAppearance
    }

As a result, I get the original color of my UITabBar enter image description here