【SwiftUI】TextField（一行）とUITextView（複数行）の体裁を合わせたい

前提・実現したいこと

一つの画面に一行のテキストフィールドと、複数行のテキストフィールドを配置したいのですが、
一行のテキストフィールドをTextFieldのコード、複数行のテキストフィールドをUITextViewを活用すると、見た目や挙動が若干異なってしまいます。

【異なる現象】
・TextFieldの「タイトルを入力」の色が普通の.grayと異なりどの色かわからない
・TextFieldだとEdit状態でも入力が空なら「タイトルを入力」と表示されたままだが、UITextViewではEdit状態になると入力が空でも「注目ポイントを入力」が消えてしまう

統一感を出し、画面の見栄えがよくなる方法があれば教えてください。
（例えば、UITextViewを改行できなくさせて一行のみにする、UITextViewでもTextFieldと同じ色・挙動にするなど）

スクリーンショット

該当のソースコード

SwiftUI
1import SwiftUI
2
3struct MultiLineTextField: UIViewRepresentable {
4    @Binding var text: String
5    
6    func makeCoordinator() -> Coordinator {
7        MultiLineTextField.Coordinator(parent1: self)
8    }
9    
10    func makeUIView(context: Context) -> UITextView {
11        let textView = UITextView()
12        textView.delegate = context.coordinator
13        textView.isScrollEnabled = true
14        textView.isEditable = true
15        textView.isUserInteractionEnabled = true
16        textView.text = "注目ポイントを入力（任意）"
17        textView.textColor = .gray
18        textView.font = .systemFont(ofSize: 16)
19        return textView
20    }
21    
22    func updateUIView(_ uiView: UITextView, context: Context) {
23    }
24
25    class Coordinator: NSObject, UITextViewDelegate {
26        var parent : MultiLineTextField
27        
28        init(parent1: MultiLineTextField) {
29            parent = parent1
30        }
31        
32        func textViewDidBeginEditing(_ textView: UITextView) {
33            if self.parent.text == "" {
34                textView.text = ""
35                textView.textColor = .black
36            }
37        }
38        
39        internal func textViewDidEndEditing(_ textView: UITextView) {
40            if self.parent.text == "" {
41                textView.text = "注目ポイントを入力（任意）"
42                textView.textColor = .gray
43            }
44        }
45        
46    }
47}

行動規範の内容に同意します

回答1件

ベストアンサー

TextField のx座標を少しずらして UITextView の開始位置に合わせた。
UITextView がデフォルトで placeholder を持てないので
TextField 側で入力始まったら placeholder を消す方向に合わせた。
placeholder の文字列をバインドすればいけそうでした。
UITextView 側で placeholder 持つ実装もあるので調べてみるといいかもです。

体裁は保ててるように見えますがいかがでしょうか？

import SwiftUI

struct ContentView: View {

    @State private var titleStr = ""
    @State private var placeholderTitleStr = "タイトルを入力"
    @State private var pointStr = ""

    var body: some View {
        NavigationView {
            VStack(alignment: .leading) {
                Text("タイトル").bold()
                // UITextView は padding広いため Rectangle に重ねて開始のx座標をずらす
                ZStack {
                    // タイトルの枠View
                    Rectangle()
                        .fill(Color.clear)
                        .border(Color.black, width: 1.0)
                        .frame(height: 40.0)
                    // タイトルのTextField
                    TextField(self.placeholderTitleStr, text: $titleStr, onEditingChanged: { (change) in
                        // 編集を始めたらtrue，終えたらfalseになる
                        if change && self.titleStr.isEmpty {
                            // 編集開始時に文字列が入力されていなければplaceholderを空文字に
                            self.placeholderTitleStr = ""
                        } else if !change && self.titleStr.isEmpty {
                            // 編集終了時に文字列が入力されていなければplaceholderをデフォルトに
                            self.placeholderTitleStr = "タイトルを入力"
                        }
                    }) {
                        // returnキーが押された際の処理
                    }
                    .font(.system(size: 16.0))
                    .padding(.horizontal, 4.0)  // ここで左右に隙間を与えてUITextView側に合わせる
                }
                .padding(.bottom, 12.0)
                Text("注目ポイント").bold()
                MultiLineTextField(text: $pointStr)
                    .border(Color.black, width: 1.0)
                    .frame(height: 120.0)
                Spacer()
            }
            .padding(.horizontal, 20.0)
        }
    }
}

struct MultiLineTextField: UIViewRepresentable {
    @Binding var text: String

    func makeCoordinator() -> Coordinator {
        MultiLineTextField.Coordinator(parent1: self)
    }

    func makeUIView(context: Context) -> UITextView {
        let textView = UITextView()
        textView.delegate = context.coordinator
        textView.isScrollEnabled = true
        textView.isEditable = true
        textView.isUserInteractionEnabled = true
        textView.text = "注目ポイントを入力（任意）"
        textView.textColor = .lightGray         // 初回はlightGrayに
        textView.font = .systemFont(ofSize: 16)
        return textView
    }

    func updateUIView(_ uiView: UITextView, context: Context) {
    }

    class Coordinator: NSObject, UITextViewDelegate {
        var parent : MultiLineTextField

        init(parent1: MultiLineTextField) {
            parent = parent1
        }

        func textViewDidBeginEditing(_ textView: UITextView) {
            // 入力開始時にtextColorがlightGrayだった時placeholder消す
            if textView.textColor == UIColor.lightGray {
                textView.text = ""
                textView.textColor = .black
            }
        }

        func textViewDidEndEditing(_ textView: UITextView) {
            // 入力終了時に何も入力されていない時placeholder復活
            if textView.text.isEmpty {
                textView.text = "注目ポイントを入力（任意）"
                textView.textColor = .lightGray
            }
        }
    }
}

投稿2020/05/13 19:24