How to customize the TabView in SwiftUI in 2024?

Mark Moeykens
Nov 6, 2021


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


How the NavigationView changed

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.

How background colors affect the TabView

When you set a background color to your view, you will notice it will go behind the TabView.




How to set a custom background color for 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.


The result:


Notice:

  1. That Rectangle with the background HAS to touch the safe area edge.

  2. The shape style (Color) is in a background modifier because the background accepts a "ShapeStyle" type.

  3. 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.

How to set a custom background gradient for the TabView

Gradients are also a ShapeStyle type.



A vertical gradient doesn't work too well using this method because only the bottom color will bleed into the safe area of the TabView.
Instead, use a linear gradient with some angle besides a vertical one.
Notice:

  1. The Rectangle has a height and so it will add some padding to the top of the TabView.

  2. Because the Rectangle has height, I filled it with a clear color so you can see its background gradient.

How scrolling a List affects the TabView

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 notice the TabView background is just white:


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?

How to customize the TabView when using a List/ScrollView

You will have to use the UITabBarAppearance from UIKit.


With a UITabBarAppearance, you can customize all different aspects of the NavigationView.

This code:

  1. Sets a material (blur effect) for the background effect

  2. Sets a color

  3. 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.

SwiftUI Views Quick Start Book

Do you need a SwiftUI visual reference guide?

You can download the SwiftUI Views Quick Start Book for FREE to get you started.



Bonus: Using ZStack for a TabView background

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.

Your Learning Path Quick Links

  1. Create UI with SwiftUI Views Mastery (beginner)

  2. Architect your app using Working with Data in SwiftUI (beginner)

  3. Improve your app's UX with SwiftUI Animations Mastery (junior)

  4. Save & sync your app's data with Core Data Mastery -or- SwiftData Mastery (junior) 

  5. React to and manipulate data using Combine Mastery in SwiftUI (advanced)