SwiftUIではViewの上にコントロール(UI部品)を配置してアプリを作成していきます. 今回は基本部品の一つTextFieldです.
環境は,
- macOS Catalina 10.15.7
- Xcode 12.0.1
- Swift 5.3
- iOS 14.0
です.
目次
TextFieldとは
TextFieldとは
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:入力が終了したときに実行する処理を記述します
プレースホルダー
プレースホルダはテキストを入力していないときに現れるグレーの文字のことです.

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以外にもさまざまなタイプの形式があります.
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 | 数字と小数点を含むキーボードを指定します |
その他のキーボードタイプについては以下を参考にしてください.
簡単な例を示しておきます. 以下の例では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()
}
}
}


コメント