SwiftUI入門-勉強メモ010-【TextField】

2020 11/09

2020.11.09

SwiftUIではViewの上にコントロール(UI部品)を配置してアプリを作成していきます. 今回は基本部品の一つTextFieldです.

環境は,

macOS Catalina 10.15.7
Xcode 12.0.1
Swift 5.3
iOS 14.0

です.

TextFieldとは

TextFieldはユーザーに入力をうながすときに配置されるコントロールです.

TextField

Apple Developer Documentation

TextFieldの基本的なinitializer

init<S>(
    _ title: S,
    text: Binding<String>,
    onEditingChanged: @escaping (Bool) -> Void = { _ in },
    onCommit: @escaping () -> Void = {}
) where S : StringProtocol

title:プレースホルダー用のメッセージを入れられます
text:入力した値を取得する状態変数を設定できます
onEditingChanged:内容が変更されたときに実行する処理を記述します
onCommit:入力が終了したときに実行する処理を記述します

プレースホルダー

プレースホルダはテキストを入力していないときに現れるグレーの文字のことです.

TextFieldの簡単な例です. TextFieldに入力した値をすぐ下に反映させます.

import SwiftUI

struct ContentView: View {
    
    @State private var name = ""
    
    var body: some View {
        TextField("名前を入れてください。", text: $name)
            .font(.title2)
        
        if name != "" {
            Text("初めまして、\(name)さん")
                .font(.title2)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

onEditingChanged

onEditingChangedはテキストの入力状態をBool値で返します.

例えば,

import SwiftUI

struct ContentView: View {
    
    @State private var name = ""
    
    var body: some View {
        TextField(
            "名前を入れてください。",
            text: $name,
            onEditingChanged: { (changed) in print("Enter?: \(changed)") }
        )
        .font(.title2)
    }
}

とすれば, 入力を開始したタイミングでTrueを返し, 入力が終わったタイミングでFalseを返します.

onCommit

onCommitは入力が終わったタイミングで呼び出されるパラメータです.

import SwiftUI

struct ContentView: View {
    
    @State private var name = ""
    
    var body: some View {
        TextField(
            "名前を入れてください。",
            text: $name,
            onCommit: {
                print("入力が終わりました. \(name)")
            }
        )
        .font(.title2)
    }
}

valueとformatter

formmaterで入力されるテキストのフォーマットを指定し, valueに入力された値が格納されます. 違う形式のものは入力ができません.

import SwiftUI

struct ContentView: View {
    @State private var number = 0

    var body: some View {
        TextField(
            "数字を入れてください。",
            value: $number,
            formatter: NumberFormatter()
        )
        .font(.title)
    }
}

全角を入れると受け付けず, 元々入っていた「12345」が復元されています.

NumberFormatter以外にもさまざまなタイプの形式があります.

Formatter

Apple Developer Documentation

TextFieldのスタイル

TextFieldは標準でいくつかのスタイルが用意されています.

パラメータ	説明
PlainTextFieldStyle	装飾なしのスタイル
RoundedBorderTextFieldStyle	丸みのある外枠があるスタイル
SquareBorderTextFieldStyle	四角い外枠があるスタイルただし, iOSでは利用不可
DefaultTextFieldStyle	標準スタイル PlainTextFieldStyleと同じ

import SwiftUI

struct ContentView: View {
    
    @State private var text1 = ""
    @State private var text2 = ""
    @State private var text3 = ""

    var body: some View {
        VStack(spacing: 50.0) {
            TextField("PlainTextFieldStyle", text: $text1)
                .textFieldStyle(PlainTextFieldStyle())
            TextField("RoundedBorderTextFieldStyle", text: $text2)
                .textFieldStyle(RoundedBorderTextFieldStyle())
            TextField("DefaultTextFieldStyle", text: $text3)
                .textFieldStyle(DefaultTextFieldStyle())
        }
        .font(.title)
    }
}

入力用キーボードタイプについて

SwiftUIではさまざまなキーボードが用意されています.

キーボードの種類	説明
default	現在の入力方法の既定のキーボードを指定します
asciiCapable	標準 ASCII 文字を表示するキーボードを指定します
URL	URL エントリ用のキーボードを指定します
numberPad	PIN 入力用のテンキーを指定します
phonePad	電話番号を入力するためのキーパッドを指定します
namePhonePad	ユーザーの名前または電話番号を入力するためのキーパッドを指定します人名もこれで入力をします
emailAddress	電子メールアドレスを入力するためのキーボードを指定します
decimalPad	数字と小数点を含むキーボードを指定します

その他のキーボードタイプについては以下を参考にしてください.

UIKeyboardType

Apple Developer Documentation

簡単な例を示しておきます. 以下の例ではPIN入力用のテンキーを出現させるようにしています.

import SwiftUI

struct ContentView: View {
    
    @State private var number = ""
    
    var body: some View {
        TextField(
            "数字を入力してください。",
            text: $number
        )
        .keyboardType(.numberPad)
        .font(.title2)
    }
}

TextFieldの具体例

装飾を少し加えた例です.

import SwiftUI

struct ContentView: View {
    
    @State private var name = ""
    
    var body: some View {
        TextField("名前を入れてください。", text: $name)
            .frame(width: 250, alignment: .center)
            .overlay(RoundedRectangle(cornerRadius: 5)
                        .stroke(Color.black, lineWidth: 1.0))
            .font(.title2)
        
        if name != "" {
            Text("初めまして、\(name)さん")
                .font(.title2)
        }
    }
}

import SwiftUI

struct ContentView: View {
    
    @State private var name = ""
    
    var body: some View {
        TextField("名前を入れてください。", text: $name)
            .border(Color.blue, width: 2)
            .padding(.horizontal, 50)
            .font(.title2)
        
        if name != "" {
            Text("初めまして、\(name)さん")
                .font(.title2)
        }
    }
}

ログイン画面を作ってみる

TextFieldの代わりにSecureFieldを使えば, 入力した文字が●●●で表示されます.

import SwiftUI

struct ContentView: View {
    
    @State private var inputUserName: String =  ""
    @State private var inputPassword: String =  ""
    
    var body: some View {
        NavigationView{
            VStack {
                HStack{
                    Text("UserName:")
                    TextField("UserName", text: $inputUserName)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                }
                HStack{
                    Text("Password:")
                    SecureField("PassWord", text: $inputPassword)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                }
                .padding(.bottom, 30)
                Button(action: {
                }) {
                    Text("ログイン")
                        .frame(width: 200)
                        .padding(5)
                        .foregroundColor(.white)
                        .background(Color.blue)
                        .cornerRadius(5)
                }
                Spacer()
            }
            .padding()
        }
    }
}