【SwiftUI】 UIコンポーネントの作成方法 Text編

はじめに

こんにちは、iOSアプリ開発グループの神山です。

SwiftUIについて絶賛勉強中なのですが、今回はTextに関連するUIコンポーネントの作り方についてまとめてみました。

具体的には以下のコンポーネントについてご紹介していきます。
1. Text(Label)
2. TextField
3. TextEditor

Text(Label)

Text(Label)はUIKitのUILabelに相当し、LabelについてはiOS14から使用することのできるコンポーネントになります。

Labelではテキスト以外に画像も一緒に表示することができます。

プレビューで確認すると以下のようになりました。表示するだけならとても簡単にできますね。

Preview1-1.png

Viewのカスタマイズ

SwiftUIのUIコンポーネントに対して、色の設定やフォントの設定などをカスタマイズする方法についてですが、SwiftUIではViewをカスタマイズするためのメソッドとして modifier(_:)があり、メソッドチェーンのように複数記述することもできます。

先ほど作成したTextに色とフォントのModifierを適用させてみましょう。

Preview2-1.png

Modifierはコードで記載して設定することもできますが、アトリビュートインスペクタでも設定することができます。アトリビュートインスペクタ内で設定したものは自動でコードに反映されるため、より簡単にModifierを適用することが可能です。

※ アトリビュートインスペクタ画面は[option + command + 4]で開くことができ、コード内のTextを選択することで以下の画像のようにModifierの一覧を確認できます。

Modifier.png

TextField

TextFieldはUIKitのUITextFieldに相当します。

またパスワード入力用のSecureFieldも提供されています。

Preview3-1.png

Modifier

TextFieldの主なModifierについてご紹介します。

  • textFieldStyle() TextFieldの枠線スタイルの指定
plain roundedBorder
Plain-1.png RoundedBorder.png
  • multilineTextAlignment() テキストを寄せる位置の指定
leading center trailing
Leading.png Center.png Trailing.png
  • keyboardType 表示するキーボードの種類を指定
URL EmailAddress NumberPad
KeyboardURL.png KeyboardEmailAddress.png KeyboardNumberPad.png

keyboardTypeは上記で挙げたもの以外にもあり、全部で13種類あります。それぞれの使用用途に合わせて適切なものを指定しましょう。

TextEditor

TextFieldはUIKitのUITextViewに相当します。

Preview4-1.png

Modifier

TextEditorの主なModifierについてご紹介します。

  • font テキストのフォントの指定
title caption
FontTitle.png FontCaption.png
  • foregroundColor テキストのフォント色の指定
red green
ColorRed.png ColorGreen.png
  • lineSpacing テキストの行間のスペースを指定
0 10 20
LineSpacing0.png LineSpacing10.png LineSpacing20.png

おまけ

Modifierについては自分でカスタマイズすることもできます。

これは同じようなModifierを使用している箇所に対して自作のModifierを適用させることで、コードの冗長化を防ぐことができます。

例えば、複数のModifierを適用させたTextを作成しようとすると以下のようになります。

CustomModifier.png

色だけが違いますが、フォントのサイズ、余白の広さ、角丸の丸みは全て同じです。

違う箇所でこの一連のModifierを使いたい場合でも、わざわざこれらを全て定義しなければならないのでコードの冗長化やメンテナンス性の低下に繋がります。これを防ぐためにModifierをカスタマイズしてみましょう。

CustomModifier2.png

カスタマイズしたModifierを適用させるだけなので1行で記述することができました。

※ ViewModifierとして作成できるのはView Protocolに準拠しているModifierのみです。そのため例えば、Textの fontweightmultilineTextAlignmentのような特定のコンポーネントにしか適用できないものは適用させることができません。

これらも同時に適用させたModifierを作りたい場合は、それぞれのコンポーネントに対して拡張関数を作成するなどをする必要があります。

さいごに

今回はコンポーネントの作成と一緒にModifierについてもご紹介させていただきました。

コードの冗長化を防ぐためにも積極的にModifierはカスタマイズしていくことが必要だと分かりました。

TextFieldなどはイベント取得のModifierもあるため今後さらに調べてまとめていこうと思います。

最後まで記事を読んで頂き、ありがとうございました。

参考文献

https://developer.apple.com/documentation/swiftui/viewmodifier