[SwiftUI] TextEditor の使用方法

TextEditor を使用すると、複数行のスクロール可能なテキストの表示や編集をすることができます。
今回は、TextEditor の使用方法について説明します。

TextEditor の使用例

環境

OS: macOS Big Sur 11.2.1
Xcode: 12.4
Swift: 5.2.4

TextEditor の基本使用方法

TextEditor の基本的な構文は以下の通りです。
第１引数には、入力された文字列を格納するための String 型変数を指定します。この String 型の変数は @State 等で宣言をしておく必要があります。この 第1引数の変数の先頭には $ を付けて参照渡しにして、TextEditor がプロパティ値を更新できるようにしておきます。

TextEditor(text: $value)

以下にコード例を示します。
このコードでは、TextEditor を使用して複数行のテキストを入力できる要する例です。ただし、実行してみるとわかりますが、枠線がないのでどこからどこまでが入力欄なのかわかりにくくなっています。

struct ContentView: View {
    @State private var strMemo: String = ""
    
    var body: some View {
        TextEditor(text: $strMemo)
    }
}

TextEditor の基本使用例

枠線を付ける

先程の例では、枠線がないために入力可能な領域がどこなのかわかリませんでした。
枠線を付けるには border モディファイアを使用します。第1引数には線の色を、width に線の太さを指定します。
また padding モディファイアを付けることで、デバイスの端からではなく、少し間を空けた位置からの入力になります。
コード例を以下に示します。

struct ContentView: View {
    @State var strMemo  = ""
    var body: some View {
        TextEditor(text: $strMemo)
            .padding()
            .border(Color.black, width: 1)
    }
}

TextEditor に枠線を付ける例

標準フォントを設定する

font を使用すると、標準のフォントを設定することができます。
引数に以下表の値を指定することができ、フォントの大きさを変えることができます。

以下に例では、フォントに largeTitle を設定しています。

struct ContentView: View {
    @State var strMemo  = ""
    var body: some View {
        TextEditor(text: $strMemo)
            .padding()
            .border(Color.black, width: 1)
            .font(.largeTitle)
    }
}

TextEditor で標準フォントを使用する例

フォントの色を変更する

foregroundColor モディファイアを使用することで、フォントの色を変更することができます。

struct ContentView: View {
    @State var strMemo  = ""
    var body: some View {
        TextEditor(text: $strMemo)
            .padding()
            .border(Color.black, width: 1)
            .font(.largeTitle)
            .foregroundColor(.blue)
    }
}

TextEditor でフォントの色を変更する例

テキストの左寄せ、中央寄せ、右寄せを設定する

テキストを左寄せ、中央寄せ、右寄せのいずれかにするには、multilineTextAlignment を使用します。
引数には、以下に示す TextAlignment 列挙体の値を指定することができます。

以下の例ではテキストを中央寄りにします。

struct ContentView: View {
    @State var strMemo  = ""
    var body: some View {
        TextEditor(text: $strMemo)
            .padding()
            .border(Color.black, width: 1)
            .font(.largeTitle)
            .foregroundColor(.blue)
            .multilineTextAlignment(.center)
    }
}

TextEditor で文章を中央寄りにする例

行間のスペース量を設定する

lineSpacing モディファイアを使用することで行間のスペース量を設定することができます。
以下の例では、行間のスペース量を30に設定しています。

struct ContentView: View {
    @State var strMemo  = ""
    var body: some View {
        TextEditor(text: $strMemo)
            .padding()
            .border(Color.black, width: 1)
            .font(.largeTitle)
            .foregroundColor(.blue)
            .multilineTextAlignment(.center)
            .lineSpacing(30.0)
    }
}

TextEditor で行間のスペースを設定する例

アルファベットの自動大文字変換を制御する

autocapitalization モディファイアを使用雨すると、アルファベット入力時の大文字入力変換を制御できます。
引数には、以下に示す UITextAutocapitalizationType 列挙体の値を指定することができます。

コード例を以下に示します。
この例では autocapitalization に .none を指定して自動で大文字に変換しないようにします。

struct ContentView: View {
    @State var strMemo  = ""
    var body: some View {
        TextEditor(text: $strMemo)
            .padding()
            .border(Color.black, width: 1)
            .font(.largeTitle)
            .foregroundColor(.blue)
            .multilineTextAlignment(.center)
            .autocapitalization(.none)
    }
}

TextEditor で自動大文字変換を制御する例