SwiftUI LabelStyle でスタイルを変える

LabelStyle を使うと、Label の表示方法を切り替えられます。アイコンのみ、タイトルのみ、あるいは両方を表示するかをコントロールできます。

ビルトインスタイル

SwiftUI には 3 つの標準スタイルが用意されています。

let label = Label("設定", systemImage: "gearshape")

VStack(spacing: 20) {
    label
        .labelStyle(.automatic)     // 自動（コンテキストに応じる）
    
    label
        .labelStyle(.titleAndIcon)  // タイトルとアイコン両方
    
    label
        .labelStyle(.titleOnly)     // タイトルのみ
    
    label
        .labelStyle(.iconOnly)      // アイコンのみ
}

コンテキストによる自動切り替え

.automatic（デフォルト）では、Label が配置される場所によって表示が変わります。

ツールバーのボタン

アイコンのみ表示されることが多い

リストの行

タイトルとアイコンの両方が表示される

親ビューでまとめて設定

複数の Label に一括でスタイルを適用できます。

VStack {
    Label("ホーム", systemImage: "house")
    Label("検索", systemImage: "magnifyingglass")
    Label("設定", systemImage: "gearshape")
}
.labelStyle(.iconOnly)

カスタム LabelStyle

独自のレイアウトを作ることもできます。

struct VerticalLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        VStack(spacing: 4) {
            configuration.icon
            configuration.title
                .font(.caption)
        }
    }
}

使用例:

Label("設定", systemImage: "gearshape")
    .labelStyle(VerticalLabelStyle())

より複雑なカスタムスタイル

アイコンを右側に配置するスタイル:

struct TrailingIconLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        HStack {
            configuration.title
            configuration.icon
        }
    }
}

LabelStyle を使いこなすことで、同じ Label でも場面に応じた柔軟な表示ができます。