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

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

環境は,

  • macOS Catalina 10.15.7
  • Xcode 12.0.1
  • Swift 5.3
  • iOS 14.0

です.

目次

TextFieldとは

TextFieldとは

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

googleのトップページにもありますね!この検索部分がTextFieldです.
TextFieldの基本的なinitializer
init<S>(
    _ title: S,
    text: Binding<String>,
    onEditingChanged: @escaping (Bool) -> Void = { _ in },
    onCommit: @escaping () -> Void = {}
) where S : StringProtocol
  • title:プレースホルダー用のメッセージを入れられます
  • text:入力した値を取得する状態変数を設定できます
  • onEditingChanged:内容が変更されたときに実行する処理を記述します
  • onCommit:入力が終了したときに実行する処理を記述します

プレースホルダー

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

SwiftUI

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()
    }
}
SwiftUI

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)
    }
}
SwiftUI

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」が復元されています.

SwiftUI

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

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

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

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

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

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

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

import SwiftUI

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

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)
        }
    }
}
SwiftUI
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)
        }
    }
}
SwiftUI

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

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()
        }
    }
}
SwiftUI
SwiftUI
よかったらシェアしてね!

コメント

コメントする

目次
閉じる