SmallDeskSoftware 
自然すぎて、以前から存在していると思い込んでいましたが、iOS14, MacOS11 から導入された View でした。
Sponsor Link
Label
アイコンとテキストの組み合わせで表示するときに使う View です。
struct ContentView: View {
var body: some View {
HStack {
Label("LabelTitle", systemImage: "rectangle")
.border(Color.red, width: 1)
}
}
}
見易さのために 赤い枠を追加しています。
labelStyle
アイコンだけを表示したい時や、テキストだけを表示したい時用に、Style を設定することができます。
用意されているスタイルは、以下のものがあります。
- IconOnlyLabelStyle
- アイコンだけが表示されます
- TitleOnlyLabelStyle
- タイトルだけが表示されます
- DefaultLabelStyle
- アイコン、タイトル どちらも表示されます（デフォルト）
以下は、IconOnlyLabelStyle を指定したときのスナップショットです。
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 に従ったものを作ることでカスタマイズできます。
”イメージ” “テキスト” という順に表示されていますが、逆順に “テキスト” “イメージ” と表示するようなスタイルを作ってみます。
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 を返します。
ここでは、２つの Label を作って、それぞれ TitleOnlyLabelStyle, IconOnlyLabelStyle を適用することで、表示を入れ替えています。
struct ContentView: View {
var body: some View {
HStack {
Label("LabelTitle", systemImage: "rectangle")
.labelStyle(ReverseOrderLabelStyle())
.border(Color.red, width: 1)
}
}
}
iOS14 のバグ？
LabelStyle では、 title, icon いずれも View なので、以下の LabelStyle でも入れ替わると思うのですが、iOS14.2 のシミュレータでは、期待通りに動きませんでした。
struct ReverseOrderLabelStyle: LabelStyle {
func makeBody(configuration: Configuration) -> some View {
Label(
title: { configuration.icon },
icon: { configuration.title }
)
}
}
＃ iOS 14 のバグな気もします。
HStack を使っても表示上は期待通りになっていますが、viewModifier が返す View は、HStack なので、注意が必要です。
まとめ
iOS14 から、Label が新しく追加されました。
１つの UI 要素は、１つの View で構築できる方が accessibility 情報を付加するのも容易ですので、有効活用したいところです。
説明は以上です。
不明な点やおかしな点ありましたら、ご連絡いただけるとありがたいです。
関連記事:
Sponsor Link
