2022/11/14

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

この記事からわかること

Swift UIのTextEditor構造体の使い方
外枠や背景色の変更方法
TextFieldとの違い
iOS16以降の背景色変更方法
Listに組み込んだ時にレイアウトが崩れる？

index

[open]

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

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

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では自力で実装する必要があります。

SwiftUIのTextfieldでtextFieldStyle(RoundedBorderTextFieldStyle())を使って枠線をつけた様子

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

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

外枠を実装する

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

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

おすすめ記事：【Swift UI】borderの使い方！枠線や下線の色や太さ

背景色を変更する

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)

iOS16以降で背景色を変更する

iOS16以降からTextEditorなどの背景色を変更できる方法が追加されました。以下のようにscrollContentBackgroundモディファイアにhiddenを渡し、変更したい色をbackgroundに渡すだけです。

TextEditor(text: $text)
      .frame(width: 300, height: 200, alignment: .center)
      .scrollContentBackground(.hidden)
      .background(.cyan)

Listに組み込むと高さが崩れてしまう

Listの中にTextEditorを組み込み明示的に高さを指定してみましたが、中に複数行の文字を入力されるとリストの行の高さが以下画像のように膨らんでいってしまいました。色々試してみましたが、解決方法は見つかりませんでした。

List{
    Section{
        TextEditor(text: $text)
            .scrollContentBackground(.hidden)
            .background(Color.gray)
    } .frame(height: 100)
        .frame(maxHeight:100)
    
    
    Button {
        
    } label: {
        Text("Button")
    }
}

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

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

Swift