[SwiftUI] Label の使い方 まとめ

SwiftUI2021

     

TAGS:

SwiftUI の View の1つである Label をまとめてみました。

環境&対象

以下の環境で動作確認を行なっています。

  • macOS Monterey 12.4 beta
  • Xcode 13.3
  • iOS 15.4

SwiftUI の Label

SwiftUI の Label は、アイコンとタイトルからなる表示要素です。

一番シンプルな使い方

Label

表示をわかりやすくするために、拡大表示とボーダー設定をしています。

左側に指定したアイコン、右側に指定したタイトルが表示されています。
表示に使用したコードは以下のコードです。


//
//  ContentView.swift
//
//  Created by : Tomoaki Yagishita on 2022/04/10
//  © 2022  SmallDeskSoftware
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        Label("Title", systemImage: "pencil.tip")
            .border(.orange)
            .scaleEffect(5)
    }
}

表示内容の選択

Label としては、アイコンとタイトルを持っていますが、その一方だけを表示させることもできます。

表示内容を指定するためには、labelStyle という View Modifier を使用します。

labelStyle が受け取る スタイルは、以下の4つです。

  • automatic
  • iconOnly
  • titleAndIcon
  • titleOnly

automatic は、使用される状況によって表示内容が調整されるスタイルで、デフォルトのスタイルです。

アイコンだけを表示する

.iconOnly というスタイルは、アイコンだけを表示するスタイルです。

以下のような表示となります。

iconOnly

表示をわかりやすくするために、拡大表示とボーダー設定をしています。

指定したアイコンのみが表示されていることがわかります。使用される領域はアイコンが使用する領域のみです。

表示に使用したコードは以下のコードです。


//
//  ContentView.swift
//
//  Created by : Tomoaki Yagishita on 2022/04/10
//  © 2022  SmallDeskSoftware
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        Label("Title", systemImage: "pencil.tip")
            .labelStyle(.iconOnly)
            .border(.orange)
            .scaleEffect(5)
    }
}

タイトルとアイコンを表示する

.titleAndIcon というスタイルは、タイトルとアイコンの両方を表示するスタイルです。

以下のような表示となります。

titleAndIcon

表示をわかりやすくするために、拡大表示とボーダー設定をしています。

指定したアイコンとタイトルの両方が表示されていることがわかります。
(今回の使用状況では、automatic と同じ結果となります。)

表示に使用したコードは以下のコードです。


//
//  ContentView.swift
//
//  Created by : Tomoaki Yagishita on 2022/04/10
//  © 2022  SmallDeskSoftware
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        Label("Title", systemImage: "pencil.tip")
            .labelStyle(.titleAndIcon)
            .border(.orange)
            .scaleEffect(5)
    }
}

タイトルだけを表示する

.titleOnly というスタイルは、タイトルのみを表示するスタイルです。

以下のような表示となります。

iconOnly

表示をわかりやすくするために、拡大表示とボーダー設定をしています。

指定したタイトルのみが表示されていることがわかります。使用される領域はタイトルが使用する領域のみです。

表示に使用したコードは以下のコードです。


//
//  ContentView.swift
//
//  Created by : Tomoaki Yagishita on 2022/04/10
//  © 2022  SmallDeskSoftware
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        Label("Title", systemImage: "pencil.tip")
            .labelStyle(.titleOnly)
            .border(.orange)
            .scaleEffect(5)
    }
}

タイトルとして指定できる要素

タイトルとして指定できる要素としては、以下のものがあります。

  • StringProtocol
  • LocalizedStringKey

タイトルとして StringProtocol を指定する

StringProtocol は、簡単にいうと String とそれと同等の扱いのできるものです。普通の文字列を渡すことができます。

例えば、文字列操作した後の Substring も StringProtocol に準拠しています。

[Swift] 関数で String と Substring のどちらも受けとりたい

タイトルとして LocalizedStringKey を指定する

タイトルとして、LocalizedStringKey を指定することもできます。

この LocalizedStringKey は、アプリの多言語化のために用意されている仕組みです。

アプリの多言語化とは たとえば、"Hello" と書いても、日本語環境のときには、"こんにちわ"と表示させることです。

通常、その文字列に1つのキーワード(キー)を割り当て、そのキーを使った文字列を環境毎に表示するという仕組みになっています。
上記の例では、"Hello" というキーに対して、英語環境では "Hello" が、日本語環境では、"こんにちわ"が対応するよう設定されていてそれぞれが表示されるという流れです。

LocalizedStringKey を指定できるということは、そのキーを指定できるということですが、普通の文字列と少し異なるのは、テーブルを指定することができる点です。

多言語化の詳細は以下の記事で説明しています。
[SwiftUI][Xcode] 文字列を Internationalization I18N する

アイコンとして指定できる要素

アイコンとして指定できる要素は、2種類あります。

  • Image
  • systemImage/SF Symbols

アイコンに Image を指定する

アイコンには、Image を指定することができます。
Image は、リソースに保持している JPEG 等のファイルから作成することもできますし、UIImage/NSImage から作成することもできます。

アイコンに SF Symbol を指定する

SwiftUI と一緒に導入されたものとして、SF Symbol というものがあります。

Apple がアイコンを提供してくれています。light mode/dark mode で切り替わったりするアイコンもあり、アプリで使用しやすくなっています。

Apple のサイトから SF Symbols というアプリをダウンロードすると、どのようなアイコンが用意されているかが確認できます。

SFSymbols

まとめ

Label は、アイコンとタイトルを表示するための SwiftUI の View の1つ。

SwiftUI の Label
  • アイコンは、リソース、SF Symbols、UIImage/NSImage から設定できる
  • タイトルは、文字列を使用して設定できる
  • スタイルを使うことで、アイコンとタイトルの両方・どちらか一方の表示にできる
  • SF Symbols は アイコンを確認しやすくて便利

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

コメントを残す

メールアドレスが公開されることはありません。