Swift Tags Cloud: Create Beautiful Chip Layout in iOS

How to create tags cloud/chip layout view in swift:

In this tutorial, we will learn how to create chip layout in swift commonly known as tags or chip view. Tag clouds view or chips layout that, we are going to create in this tutorial will look like as show in the below image.

create chip layout in iOS - programmatically using swift

When user taps on cross icon, we will remove the tag or chip. All other tags or chips will be re-adjusted according to their width and screen width.

Steps to create tag clouds view in swift:

1: Create a new single view application and name it “TagsCloud“.

2: In “ViewController.swift“, and create an IBOutlet for UITextField so that we can add a new chip or tag. Secondly, we will declare an array named “tagsArray“, who will hold all of our tags.

Designing user inteface for chip layout in swift

3: Open Main.storyboard file and create user interface that contains one UITextField and a UIButton, as shown in the given below images.

Initial Layout of the screen to add tags or chips

Initial layout of our screen

Constraints used for UIButton

Constraints used for UITextField

4: Connect IBOutlet “txtInput” to UITextField.

5: Open ViewController.swift and creates an IBAction for our UIButton.

6: Open “Main.Storyboard”, and connect IBAction “addTag” to UITouchUpInside event of the UIButton.

7: Next we will write definition for recently created IBAction “addTag”. Here if our UITextField “txtInput” is not empty then only we will add that entry to our array and call our method that we create chips or tags cloud.

Creating chip layout in swift

8: At this time if runs your app, and press “Add Tag” button, app will gets crashed as we haven’t implemented our function who is responsible for creating chips or cloud of tags. Copy the below code and add it to your file.

In the above function, we first remove all the sub-views whose tag is not equals to zero. Then we will get width for tags as per the tag name, and finally we add the spacing and button width to the chip ot tag name width we got earlier. If our tag is going outside the screen bounds then we will change x position and y position so that it will adjust to new line.
Then finally, we draw all our elements required to create tag with cross icon and add selector to cross button so that we can remove it.

9 : Last step, we are using String extension that will return string width based upon the font that our tag is using.

Where to go from here:

In this tutorial, we learned how to create cloud tags or chip layout view in ios using swift. If you type anything in the UITextField and press “Add Tag”. A new tag or new chip wil be created. When you tap on cross icon of the tags or chips, that chip will gets removed and chip view will automatically adjustes its layout. You can download the source code from the given below link

iosTagsCloud.zip