SwiftUI Tutorial: Showing Badge on Tab Bar Item
In this tutorial, we are going to learn how to show a badge number on tab bar items in SwiftUI. Badges are playing an integral part in deriving user attention, I can count a number of really good scenarios to use them. For example, when a new message arrived in a messaging app, when a cart gets updated by adding or removing items or in any other kind of notifications.
In order to be able to go throughout this tutorial with me, you will need to prepare your kit. You will need to have at least Xcode 11.0 installed to create SwiftUI projects or Xcode 11.1 if you want to use the preview feature.
Also, you will need a cup of coffee to keep you focused. The final project example can be found on Github.
Now we have everything set, let’s start coding…
First, let’s run Xcode and start a new single view application and remember to choose SwiftUI instead of Story Boards for User Interface option.
Next we are going to create some basic ordering model named Order by creating new Swift file. The ordering model is a class that conforms to ObservableObject with a @Published variable called items of kind String array. It has two methods, one to add an item into the order list and the other is to remove an item from the order list.
We had used Published variable because we need to track the changes on the order list to reflect it with the badge number later on.
After that we are going to create the inner views of the TabView, Which are the MenuView and the OrderView. The first one is a SwiftUI view that consists of two buttons, one for adding items to cart (our order list) and another for removing items. And the second one is another SwiftUI view that contains a List of the items already added to the card.
The next step is our main goal of this tutorial, we are going to create the TabView which is our big player and will act as a container for the other views we had created earlier. I’m going to focus on the badge only on this view and let you discover the rest by yourself.
We are going to use GeometryReader and ZStack to place the badge over the Tab Bar Item. The GeometryReader is our main container then we will embed the TabView inside a ZStack with a bottom leading alignment.
The badge itself is another ZStack consist of a Circle with a red background and a Text over it, this ZStack is at the same level with our TabView and its Text is representing the badge number which is watching the order list items count.
Finally we are going to define the exact coordinates of the badge by playing with the offset modifier of the badge ZStack. Also, we are going to show/hide the badge by triggering its ZStack opacity modifier. We will check the order list items count, if it is empty we will hide the badge otherwise we will show it.
I hope you had enjoyed the tutorial, to get more tutorials of SwiftUI you can follow me here on Medium or connect with me on LinkedIn for any inquiries.
Have you built an App with SwiftUI yet? if yes how was it? and if no, why? Let me know your thoughts on this question in the comments below.
