質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.35%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,052

score 15

前提・実現したいこと

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

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

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

スクリーンショット

イメージ説明

該当のソースコード

import SwiftUI

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 = .gray
        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) {
            if self.parent.text == "" {
                textView.text = ""
                textView.textColor = .black
            }
        }

        internal func textViewDidEndEditing(_ textView: UITextView) {
            if self.parent.text == "" {
                textView.text = "注目ポイントを入力(任意)"
                textView.textColor = .gray
            }
        }

    }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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/15 23:55

    なるほど、TextFieldの文字を変数にして、onEditingChangedで変数を変えればいいんですね。
    解決しました、ありがとうございます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る