• 2022/11/14
• 3分

【Swift UI】TextEditorの使い方！外枠や背景色の変更方法とは？

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

TextEditor構造体

公式リファレンス：TextEditor構造体

Swift UIのTextEditor構造体を使用することで以下のような複数行に渡る文字列を入力することができる入力ボックスを実装することができます。

struct ContentsView: View {
    @State  var text: String = ""
    var body: some View {
        TextEditor(text: $text)
        .frame(width: 300, height: 200, alignment: .center)
    }
}

使用方法は引数にバインディングする変数を渡すだけです。この変数に入力された値が常に格納されるようになっています。

TextFieldとの違い

入力ボックスを実装するにはTextField構造体を使用する方法もあります。どちらも似たようなビュー構造体ですが明確な違いもあります。

TextFieldとの違い

• placeholderの実装ができない
• 複数行の入力ができる
• スタイルの変更が用意されていない

TextFieldの場合は入力欄に薄い文字でplaceholderを設置することができますが、TextEditorでは自力で実装する必要があります。

TextField("名称",text: $text)
  .textFieldStyle(RoundedBorderTextFieldStyle())

またTextFieldにはデザインスタイルを変更するtextFieldStyle(_:)メソッドが用意されていますが、TextEditorにはありません。

外枠を実装する

TextEditorの外側に枠を設置するにはborderモディファイアを使用します。

TextEditor(text: $text)
    .frame(width: 300, height: 200, alignment: .center)
    .border(.orange, width: 2)

背景色を変更する

TextEditorの背景色を変更したい場合はそのままbackgroundを使用しても変更することができません。

変更するにはまずイニシャライザの中でUITextViewの背景色をクリアーにしてからbackgroundを指定する必要があります。

init(){
      UITextView.appearance().backgroundColor = .clear
}

TextEditor(text: $text)
      .frame(width: 300, height: 200, alignment: .center)
      .border(.orange, width: 2)
      .background(.black).foregroundColor(.white)

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。