iOS 15 tab bar transparent after scrolling to the bottom

Viewed 1489

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

iOS 15 transparent tab bar

3 Answers

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

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

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