[SwiftUI] Label の使い方

SwiftUI

iOS14, MacoS11 から SwiftUI に導入された Label について説明します。

自然すぎて、以前から存在していると思い込んでいましたが、iOS14, MacOS11 から導入された View でした。

Label

アイコンとテキストの組み合わせで表示するときに使う View です。

Label

Label
以下のコードで表示しています。
Label example code

struct ContentView: View {
  var body: some View {
    HStack {
      Label("LabelTitle", systemImage: "rectangle")
        .border(Color.red, width: 1)
    }
  }
}

見易さのために 赤い枠を追加しています。

labelStyle

アイコンだけを表示したい時や、テキストだけを表示したい時用に、Style を設定することができます。

用意されているスタイルは、以下のものがあります。

IconOnlyLabelStyle
アイコンだけが表示されます
TitleOnlyLabelStyle
タイトルだけが表示されます
DefaultLabelStyle
アイコン、タイトル どちらも表示されます(デフォルト)

以下は、IconOnlyLabelStyle を指定したときのスナップショットです。

IconOnlyLabel

IconOnlyLabelStyle
IconOnlyLabel example code

struct ContentView: View {
  var body: some View {
    HStack {
      Label("LabelTitle", systemImage: "rectangle")
        .labelStyle(IconOnlyLabelStyle())    // ⬅️ IconOnlyLabelStyle を適用
        .border(Color.red, width: 1)
    }
  }
}

LabelStyle のカスタマイズ

Label に適用できる Style も、LabelStyle という protocol に従ったものを作ることでカスタマイズできます。

”イメージ” "テキスト" という順に表示されていますが、逆順に "テキスト" "イメージ” と表示するようなスタイルを作ってみます。

ReverseOrderLabelStyle 定義

struct ReverseOrderLabelStyle: LabelStyle {
  func makeBody(configuration: Configuration) -> some View {
    HStack {
      Label(
        title: { configuration.title },
        icon: { configuration.icon }
      )
      .labelStyle(TitleOnlyLabelStyle())
      Label(
        title: { configuration.title },
        icon: { configuration.icon }
      )
      .labelStyle(IconOnlyLabelStyle())
    }
  }
}

上記のように、LabelStyle protocol の makeBody で View を返します。
ここでは、2つの Label を作って、それぞれ TitleOnlyLabelStyle, IconOnlyLabelStyle を適用することで、表示を入れ替えています。

ReverseOrderLabelStyle を適用

struct ContentView: View {
  var body: some View {
    HStack {
      Label("LabelTitle", systemImage: "rectangle")
        .labelStyle(ReverseOrderLabelStyle())
        .border(Color.red, width: 1)
    }
  }
}

ReverseOrderLabelStyle

ReverseOrderLabelStyle

iOS14 のバグ?

LabelStyle では、 title, icon いずれも View なので、以下の LabelStyle でも入れ替わると思うのですが、iOS14.2 のシミュレータでは、期待通りに動きませんでした。

example code

struct ReverseOrderLabelStyle: LabelStyle {
  func makeBody(configuration: Configuration) -> some View {
    Label(
      title: { configuration.icon },
      icon: { configuration.title }
    )
  }
}
# iOS 14 のバグな気もします。

HStack を使っても表示上は期待通りになっていますが、viewModifier が返す View は、HStack なので、注意が必要です。

まとめ

iOS14 から、Label が新しく追加されました。

1つの UI 要素は、1つの View で構築できる方が accessibility 情報を付加するのも容易ですので、有効活用したいところです。

説明は以上です。
不明な点やおかしな点ありましたら、ご連絡いただけるとありがたいです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です