Creating a Tag Cloud for macOS
Creating a resizable and reusable view for a macOS app
Creating a macOS app allows us to use a whole different set of tools than creating an iOS app. In this article we’ll look at one example of a view we can only use at the mac: A Tag Cloud that reacts to resizing and places its tags according to the given space. This is a demo of TagCloudView:
First, we’re going to look at how to create the rows and how to place tags in them. But this initial setup will not allow resizing, we’ll handle this in the next section. Next, we’ll see how to use and configure the Tag Cloud. At the end of the article, the usage of this view is demonstrated in an app.
Creating the Rows
TagCloudView consists of many rows, each holding a different number of tags. Here you can see this setup:
First, let’s start by creating the views and see how to place the tags.
// 1 — As we can see in the previous picture, we have many rows. Each row is a horizontal NSStackView and they are stored in the array rows. These rows are placed in the vertical main NSStackView called rowStackView. The tags are represented by the array itemView holding TagCloudItemView objects. A TagCloudItemView represents one single item with a background view, a title label and a remove button.
Of course, we still need to add and configure subviews and create NSLayoutConstraints, but this is left out in this article. You can find the code in the playground at my GitHub page: https://github.com/DavidPiper94/TagCloudView
// 2 — Next, we build the rows. To do so, we clean the current setup, prepare the next rows and show them.
Let’s take a look at the three steps in buildRows starting with clearRows:
