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

この記事からわかること

  • Swift UITextEditor構造体使い方
  • 外枠背景色変更方法
  • TextFieldとの違い

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

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

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

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

searchbox

スポンサー

ProFile

ame

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

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

自作iOSアプリ

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

mapping

自分だけの地図を作ろう!-mapping-

無料posted withアプリーチ

割り勘アプリ-bill-

旅行におすすめ!
割り勘アプリ-bill-

無料posted withアプリーチ

Imakoko

現在地を取得するアプリ!Imakoko

無料posted withアプリーチ

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Remind-シンプル通知アプリ-

シンプル通知アプリ-Remind-

無料posted withアプリーチ

CLIPURL

好きな記事をクリップしよう!-CLIPURL-

無料posted withアプリーチ

記録カレンダー

続けたを可視化できるアプリ!記録カレンダー

無料posted withアプリーチ

CART-共有できるお買い物リスト-

CART-共有できるお買い物リスト-

無料posted withアプリーチ

QuickPressPanel

早押しゲーム-QuickPressPanel-

無料posted withアプリーチ

貸し借り管理アプリ

友達とのお金の管理-貸し借り管理アプリ-

無料posted withアプリーチ

みんなの誕生日

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

posted withアプリーチ

Githubにて
iOSアプリのソースコードを公開中!

自作Webアプリ

子育て知識共有サイト-mikata-

子育て知識共有サイト-mikata-

New Article

index