Using SwiftUI, learn:
How the TabView has changed
How background colors affect the TabView
How to set a custom background color for the TabView
How to set a custom gradient for the TabView background
How to customize the TabView when using a List/ScrollView
Bonus: Using a ZStack for a TabView background
Starting in iOS 15, the background materials for bars (navigation bar, tab bar, etc.) were removed "giving more visual clarity to your content" as stated in this WWDC 2021 video titled "What's new in UIKit".
When I say "material", I'm talking about visual effect blurs that bars used to have.
When you set a background color to your view, you will notice it will go behind the TabView.
In SwiftUI, starting in iOS 15:
The background of a view, such as shape styles, will automatically expand into the safe areas it touches.
When I say "shape style", I'm talking about styles that conform to the ShapeStyle protocol, such as:
Colors
Materials (blur effects)
Gradients
Hierarchical styles (secondary, tertiary, quaternary)
There is a new initializer introduced with iOS 15 that allows backgrounds to expand into safe areas. You could manually set the safe area edge but by default, it is set to "all" edges.
Notice:
That Rectangle with the background HAS to touch the safe area edge.
The shape style (Color) is in a background modifier because the background accepts a "ShapeStyle" type.
The background touching the safe area edge should be the full width of the NavigationView. The Rectangle shape expands horizontally to match the width of the device/TabView.
Gradients are also a ShapeStyle type.
The Rectangle has a height and so it will add some padding to the top of the TabView.
Because the Rectangle has height, I filled it with a clear color so you can see its background gradient.
Without any customization, the TabView will use a blurred material as its background and you can see the blurred rows behind it.
But what if you want to customize the color even with the scrolling?
Let's say you want to give the TabView a light blue color. You can try the same pattern of code as seen above:
But if you scroll the List all the way up, the blue now shows:
So how can you customize the TabView color when using a ScrollView/List?
You will have to use the UITabBarAppearance from UIKit.
Sets a material (blur effect) for the background effect
Sets a color
Assigns it to the scrollEdgeAppearance - Which you want to use when you have a scrollable view (like a List or ScrollView) touching the TabView so the customizations are used even when no content is behind the TabView.
Note: You can set these appearance properties in onAppear, the views init, or even in your App delegate when your app starts. It's up to you.
Here is the result:
Notice that even when scrolled all the way up, the background still retains the customizations. This is because the customizations were assigned to the scrollEdgeAppearance property.
Do you need a SwiftUI visual reference guide?
You can download the SwiftUI Views Quick Start Book for FREE to get you started.
You can use a ZStack and a separate shape style to create your custom background.
Here's how I did it:
I wouldn't recommend this approach though if you have to support different orientations and devices.
Create UI with SwiftUI Views Mastery (beginner)
Architect your app using Working with Data in SwiftUI (beginner)
Improve your app's UX with SwiftUI Animations Mastery (junior)
Save & sync your app's data with Core Data Mastery -or- SwiftData Mastery (junior)
React to and manipulate data using Combine Mastery in SwiftUI (advanced)