[SwiftUI] Label の使い方

SwiftUI

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

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

Label

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

Label

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

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

labelStyle

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

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

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

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

IconOnlyLabel

IconOnlyLabelStyle
IconOnlyLabel example code

LabelStyle のカスタマイズ

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

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

ReverseOrderLabelStyle 定義

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

ReverseOrderLabelStyle を適用

ReverseOrderLabelStyle

ReverseOrderLabelStyle

iOS14 のバグ?

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

example code
# iOS 14 のバグな気もします。

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

まとめ

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

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

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

コメントを残す

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