【SwiftUI】 Labelの使い方

(2021/05/09 更新)

Labelはタイトルとアイコンで構成されたラベルを表示する為の専用Viewで、iOS14から使えるようになりました。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】12.5RC
【Swift】5.4
【iOS】14.5
【macOS】Big Sur バージョン 11.1
スポンサーリンク

基本的な使い方

文字列+システムアイコン

第一引数に文字列でタイトル、第二引数(systemImage)にシステムアイコン名(SF Symbols)を指定します。
Modifierでフォントサイズや色などの指定が可能です。

文字列+システムアイコン

文字列+画像

こちらのイニシャライザを使うと、アイコンに画像を指定できます。
ただし、Modifierでアイコンサイズの変更ができないので、使い勝手はあまり良く無いです。

文字列+画像

タイトルとアイコンに個別にViewを定義

こちらのイニシャライザを使うと、タイトルとアイコンにViewを定義可能ですので、サイズや色など個々に設定可能です。

個別にViewを定義

スポンサーリンク

デフォルトの表示スタイルについて

Labelビューは使用される環境によって、デフォルトの表示スタイルが自動で変わります。

通常時のスタイル

アイコン→タイトルの並び順で表示されます。

通常時のスタイル

ナビゲーションバー

ナビゲーションバーなど、表示領域が狭い場所では、タイトルが省略されアイコンのみの表示になります。

ナビゲーションバー

コンテキストメニュー

コンテキストメニューで使用すると、タイトル→(スペース)→アイコンの」表示になります。
(※コンテキストメニューの表示はテキストを「長押し」します)

コンテキストメニュー

スポンサーリンク

表示スタイルの指定

.labelStyle()モディファイアを使うとLabelの表示スタイルを指定できます。

表示スタイルの指定

スポンサーリンク

カスタムスタイルの作成

LabelStyleに準拠させると、次のように独自のラベルスタイルが作成可能です。

カスタムスタイルの作成

スポンサーリンク

あわせて読みたい記事

【SwiftUI】画像(Image)の使い方
SwiftUIで画像を表示するのには、Image()を使用します。 Image()はプロジェクトに取り込んだ画像の他に、OSに標準で組み込まれたシステムアイコンの表示も可能です。