Step by step instructions on how to apply a badge modifier (_:): to a TabView and dynamically animate the content of a tab element
There are many articles that guide developers on how to apply
badge(_:) Rate using static content. However, there is nothing that says how to realistically use badges with dynamic content.
Badges are not a new concept for iOS developers. However, implementation was facilitated with the third version of SwiftUI at WWDC 2021 as Apple introduced the new Badges API, providing native support.
badge(_:) A modifier is useful for conveying relevant information, such as unread messages, emails, and other notifications to the user.
For example, ahaAn int encoded by rd can be displayed on a tab element using the . extension
badge(_:) the average:
A string can also be used as an operand.
However, static content is not preferred or desirable over the tab element whose purpose is to notify the user of important changes or updates.
This is where it is necessary to implement additional code to display dynamic notifications. To enable the tab view elements to serve dynamic content from our point of view, we are going to build a basic messaging app. We’ll post the number of likes on a message by creating the following:
Following the Model-View-ViewModel (MVVM) design pattern, our model will hold message data. The model does not have any logic as it is only used to represent the data structure used by the ViewModel.
2. Model display
The ViewModel is responsible for the model’s data and feeds this data to the view. Our MessageViewModel service will manage the message data.
3. State variable
The state property wrapper stores the property’s type and recalculates the width upon any change in its value. in our area
MessageTabView Structure, we create a file
likeCountBadge Displays the number of times you clicked the Like button.
First, let’s define a new Swift type:
This structure simply contains our message data, in particular the number of times the Like button was clicked.
Next, we will create a file
MessageViewModel To manage our data:
Our class corresponds to
ObservableObject protocol. This protocol ensures that when any published changes occur, the user interface is updated.
We need to
ViewModel To monitor and inform us of changes to the number of likes. So, we create an instance
@Published property cover. This message instance is called by a file
fetchLikes() Functions when updating and refunding
Additional functions can be added to the code base to perform other tasks such as resetting a file
likeCount value, message change, etc.
First, let’s create a view to display our read-only message and a button. By creating this distinct display structure, we not only reduce the complexity of a file
MessageTabView (discussed later), but also, make it easy to regroup our content for the preview window and isolate the impact of our changes.
In this view, every time the Like button is clicked, the action plays a file
addOneLike() Job. We’ll need to pass
@EnvironmentObject in order to access its functions.
Now that we’ve created a view to display our message and button, we can edit a file
TabView introduced earlier.
We have new and improved
MessageTabView It will be updated every time the number of likes is changed.
We will add our own
MessageButtonView As a tab item below:
You will notice several changes to the original
TabView We made a dynamic badge implementation.
@StateCover property – to keep track of the status of a file
likeCountBadge, we use the
@Stateproperty cover. Every time the site is updated, the profile will be updated accordingly.
@EnvironmentObjectProperty Cover – This wrapper gives us access to ViewModel’s functionality, that is, the number of likes registered so far.
onChange(of:perform:)– This modifier works similarly to the property controller because it executes code when the property’s state changes. Here, we want to update
likeCountBadgefeature each time the “Like” button is clicked.
You can now keep users updated by adding dynamic badges to tab bar elements using MVVM policy, SwiftUI property wrappers, and applying display modifiers.
Download the full source code from my GitHub repository: https://github.com/codingcartooningcpa/BadgeTutorial
Thanks for reading!