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