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
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
rowStackView. The tags are represented by the array
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