Working with Labels in SwiftUI

In this episode, we take a closer look at SwiftUI's Label view. A label is convenient for displaying a piece of text in combination with an icon or image. The idea is simple, but you can customize the behavior of a label quite a bit. It's a simple but powerful view.

Creating the Project

Open Xcode and create a project using the App template from the iOS > Application section. Name your project Labels and set Interface to SwiftUI. Choose a location to store the files for the project and hit Create.

Label Basics

As I wrote earlier, a label combines a piece of text and an icon or image. Open ContentView.swift and remove the contents of the computed body property.

struct ContentView: View {
    var body: some View {

    }
}

The Label struct defines a number of initializers. Let's keep it simple and pass a title and an SF symbol to the initializer. The string of the systemImage parameter is the name of the SF symbol.

struct ContentView: View {
    var body: some View {
        Label("Cocoacasts", systemImage: "paperplane")
    }
}

The label displays the title and the SF symbol side by side.

We can also display an image from the asset catalog. We first add the Cocoacasts logo to Assets.xcassets and pass the name of the image to the initializer. Note that the name of the second parameter is image, not systemImage.

struct ContentView: View {
    var body: some View {
        Label("Cocoacasts", image: "logo")
    }
}

The Label handles the layout for us.

Customization

A label displays a title and an icon or image. That is the idea underlying the Label struct. The initializers we explored so far make it easy to create a label, but the Label struct offers several options to customize its user interface. The init(title:icon:) initializer accepts a closure for the title and a closure for the icon. Each closure is expected to return a view so the options are pretty much endless.

struct ContentView: View {
    var body: some View {
        Label {
            Text("Cocoacasts")
        } icon: {
            Image("logo")
        }
    }
}

This example replicates the behavior of the init(_:image:) initializer. Because the closures we pass to the init(title:icon:) initializer return a view, we have a lot more options for customization.

In the title closure, we create a VStack and use it to vertically stack two Text views. We define the alignment of the VStack to be leading so the Text views hug the icon on their left.

struct ContentView: View {
    var body: some View {
        Label {
            VStack(alignment: .leading) {
                Text("Cocoacasts")
                    .font(.headline)
                Text("Invest in Yourself")
                    .font(.subheadline)
            }
        } icon: {
            Image("logo")
        }
    }
}

The icon on the left is a bit too large. We can tweak the Image view we return from the icon closure. We make it resizable using the resizable modifier, make sure the aspect ratio of the image is respected, and set the width of the image to 44.0 points.

struct ContentView: View {
    var body: some View {
        Label {
            VStack(alignment: .leading) {
                Text("Cocoacasts")
                    .font(.headline)
                Text("Invest in Yourself")
                    .font(.subheadline)
            }
        } icon: {
            Image("logo")
                .resizable()
                .scaledToFit()
                .frame(width: 44.0)
        }
    }
}

This looks much better.

Modifiers

Even though a Label is designed to display a title and an icon, you can define the label's style by applying the labelStyle modifier. In the following example, we apply the iconOnly label style to only display the label's icon. The available label styles are automatic, titleAndIcon, iconOnly, and titleOnly.

struct ContentView: View {
    var body: some View {
        Label {
            VStack(alignment: .leading) {
                Text("Cocoacasts")
                    .font(.headline)
                Text("Invest in Yourself")
                    .font(.subheadline)
            }
        } icon: {
            Image("logo")
                .resizable()
                .scaledToFit()
                .frame(width: 44.0)
        }
        .labelStyle(.iconOnly)
    }
}

The example is a bit contrived since we might as well replace the Label with an Image. The label style is useful in situations where you are required to use a Label, for example, to define the tab bar item of a TabView. Take a look at Working with Tab Views in SwiftUI if you want to learn more about tab views and tab bar items.

What's Next?

The Label view is convenient as it offers quite a bit of functionality out of the box. We haven't covered every feature of the Label view in this episode. There is plenty more to explore. For example, you can create a Label using a configuration you define yourself. That's something for another episode, though.