[SwiftUI] Label の使用方法

Label はタイトルとアイコンで構成されたユーザーインターフェースの標準ラベルです。

今回は、Label  の使用方法について説明します。

Label の使用方法

環境

OS: macOS Big Sur 11.2.1
Xcode: 12.5
Swift: 5.2.4

Label の基本使用方法

Label の基本的な構文は以下の通りです。
第１引数には、ラベルに表示する文字列、第２引数にはイメージアイコン名を指定します。
イメージアイコンは、SF Symbols（https://developer.apple.com/sf-symbols/）のアイコンを使用することができます。

Label("タイトル", systemImage: "イメージアイコン名")

以下はテキストに「ゴミ箱」、イメージアイコンに「trash」を指定してラベルを作成する例です。

struct ContentView: View {
    var body: some View {
        Label("ゴミ箱", systemImage: "trash")
    }
}

ラベルの基本使用方法

フォントサイズとフォントカラーを変更する

font モディファイアでフォントサイズを、foregroundColor でフォントカラーを変更することができます。
font や foregroundColor の詳細については、過去記事「Textの使用方法」で説明していますので参照してください。
以下は、font に .title を foregroundColor に .orange を指定して、オレンジ色でタイトルのサイズに設定したラベルを表示します。

struct ContentView: View {
    var body: some View {
        Label("ゴミ箱", systemImage: "trash")
            .font(.title)
            .foregroundColor(.orange)
    }
}

フォントサイズとフォントカラーを変更する例

表示文字列とアイコンイメージを別々に設定する

Label は表示文字列とアイコンイメージを別々に設定することができます。
構文は以下の通りです。

Label(title: { 表示文字列用の View }, icon: { アイコン用の View })

以下は、表示文字列「ゴミ箱」に対して、フォントサイズを .title 色を青にし、ゴミ箱のアイコンの表示サイズを .largeTitle、色を赤にしています。

struct ContentView: View {
    var body: some View {
        Label(
            title: {
                Text("ゴミ箱")
                    .font(.title)
                    .foregroundColor(.blue)
            },
            icon: {
                Image(systemName: "trash")
                    .font(.largeTitle)
                    .foregroundColor(.red)
            }
        )
    }
}

表示文字列とアイコンイメージを別々に設定する例