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

この記事からわかること

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

index

[open]

\ アプリをリリースしました /

みんなの誕生日

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

posted withアプリーチ

TextEditor構造体

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

Swift UIの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との違い

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】TextEditorの使い方!外枠や背景色の変更方法とは?

背景色を変更する

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)
【Swift UI】TextEditorの使い方!外枠や背景色の変更方法とは?

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

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

TextEditor(text: $text)
      .frame(width: 300, height: 200, alignment: .center)
      .scrollContentBackground(.hidden)
      .background(.cyan)
【Swift UI】TextEditorの使い方!外枠や背景色の変更方法とは?

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

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

【Swift UI】TextEditorの使い方!外枠や背景色の変更方法とは?
List{
    Section{
        TextEditor(text: $text)
            .scrollContentBackground(.hidden)
            .background(Color.gray)
    } .frame(height: 100)
        .frame(maxHeight:100)
    
    
    Button {
        
    } label: {
        Text("Button")
    }
}

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

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

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index