[SwiftUI] TextFIeld で入力された文字列の alignment

SwiftUI

SwiftUI コンポーネントの1つである TextField で入力された文字列の アラインメント(alignment) の方法を説明します。

環境&対象

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

  • macOS Big Sur 11.3beta
  • Xcode 12.4
  • iOS 14.4

Text の アラインメント(alignment)

SwiftUI の Text は、レイアウト時に ちょうど入りきる領域を要求するので、.leading や .trailing の設定は意味がありません。

ですので、Text 自体に、alignment を設定するパラメータはありません。

MEMO
.frame modifier にも alignment 指定が存在しますが、意味が異なりますので、別 Post にて説明予定です。

TextField の アラインメント(alignment)

TextField のレイアウト時に要求する領域は、Text とは異なります。横方向に対しては、可能な限り広くとろうとします。

MEMO
テキスト入力を考えると、当然の振る舞いですが、Text と異なるので、すこし混乱します・・・・

そのために、入力されるテキスト(や入力前に表示される placeholder) の配置は、調整することが可能になっています。

TextField 向け modifier "multilineTextAlignment"

そのための modifier として、.multilineTextAlignment が用意されています。この modifier を使用することで、TextField 内の全てのテキスト(placeholder と text 両方)のアラインメント(alignment) を制御することができます。

example

func multilineTextAlignment(_ alignment: TextAlignment) -> some View

Apple のドキュメントは、こちら

ドキュメントを確認するとビュー内の全ての文字列の配置を制御すると説明されています。ですので、placeholder と text の配置を個々に指定することはできません。

なお、ドキュメントには、left-, right-, center- が指定できると書かれていますが、誤りです。

正しくは.leading, .trailing, .center を指定することができます。

.frame との混同に注意
.frame で指定できる alignment とは意味合いが異なりますので、混同しないように注意が必要です。

まとめ:TextField での テキストのアラインメント(alignment)

TextField での テキストのアラインメント(alignment)
  • .multilineTextAlignment を使用する
  • .leading, .trailing, .center を指定可能
  • .frame の alignment は、意味が異なるので、混同しない

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

コメントを残す

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