Tags List View in SwiftUI (Chips View)

Hi Guys! In this blog, you will learn how to create the tags view in SwiftUI. Let’s gets started.

In the end of blog you can get the link of complete Github source code of that task.

Now, create a brand new SwiftUI project in XCode and follow along with me.

Step-1

First create a struct Tag with id, name and size properties. For id we are using the UUID which will give the unique id for every Tag. name will be the name of tag and size which we will calculate for every Tag.

Step-2

Create screenWidth extension of UIScreen, which will give the width of the screen.

Create getSize extension of String, which will give the size of the given string.

Step-3

Create a ContentViewModel, which will get the tags array and will compute this into the Two-Dimentional array of tags.

Properties:

Three properties are using in this ViewModel.

1. rows: for Two-Dimentional array of tags
2. tags: passing tags array which will be converted by getTags function into Two-Dimentional array of tags.
3. tagText: will use to bind textfield value in ContentView.

GetTags Method

getTags method getting the tags array and check the array is empty or not. If not empty then iterate over the tags array and getSize of each tag name and save it into the tags array respectively.

We are using some temporary variables.

1. rows: temporary Two-Dimentional tags array
2. currentRow: will use to calculate one row of tags and latter on will append into the rows
3. totalWidth: to check the width tags and add them and check how many tags can be show in one row
4. screenWidth: for getting screen width by subtracting the horizontal padding
5. tagSpacing: for getting the leading, trailing, between tags spaces

After that iterate over the tags by using the forEach and calculate the rows one by one and append it into the main rows and ViewModel will published those changes on to the view when that function called.

Step-4

After that call the getTags function into the init and that function will convert the tags array into the Two-Dimentional array of tags when ContentViewModel init.

For adding the tag use the addTag function and for removing the tag use the removeTag function into the ContentViewModel.

Final Step

After that use the ContentViewModel into the ContentView. First create the simple textfield and bind it with ContentViewModel’s tagText variable.

Now Iterate over the rows first and than each row has multiple tags and then iterate over single row as well. First use the VStack, then use the ScrollView and inside that scrollView iterate over the rows and then use the HStack and iterate over every single row.

After creating the ContentView now it’s time to run and see the result.

You will see the TagsView on you screen like below screenshot.

You can remove any tag and can add tag by writing the tag into the textfield and press the enter.

So that’s it for that blog, hope you understand how to create TagView by using SwiftUI. If you have any confusion then you can comment on this blog or can see the source code.

Inspired by Kavsoft

SourceCode:

GitHub - muhammadabbas001/TagsViewSwiftUI: Simple tags view in SwiftUI. User can add or delete the…

Patreon:

M.Abbas is creating IOS Developer | Patreon