【SwiftUI】Textの使い方

(2021/09/24 更新)

Textは読み取り専用テキストを表示するViewです。
UiKitのUILabelに相当する部品です。

【図1:Text部品】

スポンサーリンク

環境

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

【Xcode】13.0
【Swift】5.5
【iOS】15.0
【macOS】Big Sur バージョン 11.6
スポンサーリンク

基本的な使い方

基本的な使い方としては、引数にString型のテキストを指定するだけです。
サイズや色の指定などの装飾は後述するModifierにて行います。

【図2:テキストの表示】

スポンサーリンク

表示文字列の整形

Textでは次のような記述で、表示文字列に埋め込む変数や定数の整形が可能です。

表示文字列の整形

SwiftUIで新たに追加されたLocalizedStringKey型でこの仕組みを実現していますので、イニシャライザ引数にLocalizedStringKey型が定義されている他のUI部品でも同様の記述が可能です。

なお、Specifierの引数に使える文字列フォーマット指定子はこちらのサイトを参考にして下さい。

String Format Specifiers
Explains how to create, search, concatenate, and draw strings in Cocoa.
スポンサーリンク

Textで使えるModifier

Textで使える代表的なModifierを紹介します。

フォントの指定

表示するフォントを引数で指定します。

【図3:フォントの指定】

以下の記事で、文字の太さや装飾など、フォント指定方法について詳しく解説しています。

【SwiftUI】フォントの指定方法(font)
(2020/12/02 更新) フォントの指定方法を解説します。

文字の色指定

表示する文字の色を指定します。
引数にはColor構造体を指定します。

【図5:文字の色指定】

最大行数の上限を設定する

Textはテキストがフレーム幅に収まりきらない場合、あるいはテキストに改行コードが含まれている場合に複数行表示となります。
次のモディファイアで最大行数の上限を設定できます。

【引数】
Textビューが描画可能な最大行数を数値で指定します。
デフォルト値はnilで、行数制限無しを意味します。

テキストを改行させたくない場合は、最大行数に1を指定します。
この場合、テキストがフレーム幅に表示しきれない時には省略表示(...)となります。

最大行数の上限を設定する

フレームサイズに合わせて文字サイズを縮小する

テキストがフレームに収まらない場合、通常は省略表示(...)となりますが、次のモディファイアを使うとフレームサイズに合わせて文字サイズを縮小できます。

【引数】
テキストがフレームに収まらない場合に、テキストを縮小する最小係数を0から1の間で指定します。
デフォルト値は1(等倍)です。

フレームサイズに合わせて文字サイズを縮小する

その他

モディファイア 用途 使用例
multilineTextAlignment() テキストの配置 .multilineTextAlignment(.center)
スポンサーリンク

あわせて読みたい記事

【SwiftUI】フォントの指定方法(font)
(2020/12/02 更新) フォントの指定方法を解説します。
【SwiftUI】色の指定方法(Color)
(2023/11/04 更新) SwiftUIでの色の指定方法を解説します。 色の指定にはColor構造体を使用します。