【SwiftUI】TextEditorの見た目をTextFieldっぽくする

概要

TextFieldでは入力欄が空の時に薄い文字を表示することができますが、TextEditorではできません。そこで今回は、TextEditorでもTextFieldっぽく薄い文字を表示する方法を解説していきます。

ゴール

本来のTextEditorは以下の左のような見た目ですが、今回は以下の右のような見た目を目指します。

基本のTextEditor

基本的なTextEditorです。これは、Viewが真っ白で何も見えません。

コード

SwiftUI: 基本のTextEditor

import SwiftUI

struct QiitaView: View {
    // TextEditor用
    @State private var memo: String = ""
    var body: some View {
        // 基本
        TextEditor(text: $memo)
    }
}

#Preview {
    QiitaView()
}

見た目

よくあるTextEditor

そこで、以下のようにborderを付けることでどこにTextEditorがあるかわかるようになります。

コード

SwiftUI

import SwiftUI

struct QiitaView: View {
    // TextEditor用
    @State private var memo: String = ""
    var body: some View {
        // よくあるTextEditor
        TextEditor(text: $memo)
            // フレームサイズ指定
            .frame(width: 200, height: 100)
            // フレーム外枠の色と太さ指定
            .border(Color.gray, width: 1)
    }
}

#Preview {
    QiitaView()
}

見た目

TextField的なTextEditor

よくあるTextEditorでも十分いいですが、やっぱり枠の中に文字を表示しておきたいので、もう少し工夫します。

TextFieldっぽく丸みのある枠線をつける

borderで枠線をつけてもいいですが、TextFieldは丸みを帯びた枠線になっています。borderではおそらく再現不可なので、overlayで角を丸めます。

SwiftUI

import SwiftUI

struct QiitaView: View {
    // TextEditor用
    @State private var memo: String = ""
    var body: some View {
        TextEditor(text: $memo)
            .frame(width: 200, height: 100)
            // borderではなく、overlay
            .overlay(
                RoundedRectangle(cornerRadius: 10)
                    .stroke(Color.gray, lineWidth: 0.6)
            )
    }
}

#Preview {
    QiitaView()
}

見た目

薄文字を表示する

さらに、overlayを使い、Textを表示することで、薄文字を表示します。

SwiftUI

import SwiftUI

struct QiitaView: View {
    // TextEditor用
    @State private var memo: String = ""
    var body: some View {
        // よくあるTextEditor
        TextEditor(text: $memo)
            .frame(width: 200, height: 100)
            .overlay(
                RoundedRectangle(cornerRadius: 10)
                    .stroke(Color.gray, lineWidth: 0.6)
            )
            .overlay(alignment: .topLeading) {
                Text("メモ")
                    .foregroundStyle(Color.gray)
                    .padding(10)
            }
    }
}

#Preview {
    QiitaView()
}

見た目

ポイント

今回は、TextEditorをTextFieldっぽく表示する方法について解説しました。ポイントとしては、角を丸くするのにborderではなく、overlayを使用して、文字を表示する時にも、overlayでTextを表示するとこです。もっといい方法があれば、コメントで教えてください。。。