HowTo —— How to Use Label in SwiftUI 2.0

Published on

Get weekly handpicked updates on Swift and SwiftUI!

SwiftUI 2.0 introduced the Label widget, making it convenient for us to add labels composed of images and text.

Basic Usage

Swift
Label("Hello World", systemImage: "person.badge.plus")

image-20200709174029886

Support for Custom Label Styles

Swift
import SwiftUI

struct LabelTest: View {
    var body: some View {
        List(LabelItem.labels(), id: \.id) { label in
            Label(label.title, systemImage: label.image)
                .foregroundColor(.blue)
                .labelStyle(MyLabelStyle(color: label.color))
        }
    }
}

struct MyLabelStyle: LabelStyle {
    let color: Color
    func makeBody(configuration: Self.Configuration) -> some View {
       HStack {
            configuration.icon //View, cannot be finely controlled
                .font(.title)
                .foregroundColor(color) //Color is overlaid, and cannot be displayed accurately
            configuration.title //View, cannot be finely controlled
                .foregroundColor(.blue)
            Spacer()
        }.padding(.all, 10)
        .background(
            RoundedRectangle(cornerRadius: 10)
                .fill(Color.yellow)
        )
    }
}

struct LabelItem: Identifiable {
    let id = UUID()
    let title: String
    let image: String
    let color: Color
    static func labels() -> [LabelItem] {
        return [
            LabelItem(title: "Label1", image: "pencil.tip.crop.circle.badge.plus", color: .red),
            LabelItem(title: "df", image: "person.crop.circle.fill.badge.plus", color: .blue),
        ]
    }
}

image-20200709175339008

Using Your Own Label Widget for More Control

While Labels can improve development efficiency, they do not allow for fine control. The following code uses a custom MyLabel, which supports the colorful symbols provided by SF 2.0.

Swift
import SwiftUI

struct LabelTest: View {
    @State var multiColor = true
    var body: some View {
        VStack {
            Toggle("Colored Symbols", isOn: $multiColor).padding(.horizontal, 20)
            List(LabelItem.labels(), id: \.id) { label in         
                MyLabel(title: label.title,
                        systemImage: label.image,
                        color: label.color,
                        multiColor: multiColor)
            }
        }
    }
}

struct LabelItem: Identifiable {
    let id = UUID()
    let title: String
    let image: String
    let color: Color
    static func labels() -> [LabelItem] {
        return [
            LabelItem(title: "Label1", image: "pencil.tip.crop.circle.badge.plus", color: .red),
            LabelItem(title: "df", image: "person.crop.circle.fill.badge.plus", color: .blue),
        ]
    }
}

struct MyLabel: View {
    let title: String
    let systemImage: String
    let color: Color
    let multiColor: Bool
    
    var body: some View {
        HStack {
            Image(systemName: systemImage)
                .renderingMode(multiColor ? .original : .template)
                .foregroundColor(multiColor ? .clear : color)
            Text(title)
                .bold()
                .foregroundColor(.blue)
            Spacer()
        }
        .padding(.all, 10)
        .background(
            RoundedRectangle(cornerRadius: 10)
                .fill(Color.yellow)
        )
    }
}

image-20200709180353538

Weekly Swift & SwiftUI insights, delivered every Monday night. Join developers worldwide.
Easy unsubscribe, zero spam guaranteed