「文字入力欄を作りたい」
「TextFieldってどうやって使えばいいの？」
「TextFieldって何？」
と言う人に向けて、この記事は書かれています。
どうも、ちょげ（@chogetarou）です。
iOSアプリでは、ユーザに文字を入力してもらいたい場面というのがありますよね。
SwiftUIでは、TextFieldという文字入力欄のビューが用意されています。
この記事では、TexFieldビューの使い方を解説します。
TextFieldビュー
イニシャライザ
TextFieldのイニシャライザは、次のようになっています。
init(_ titleKey: ,
_ text: Binding<String>,
onEditingChanged: @escaping(Bool) -> Void ={ _ in},
onCommit: @escaping() -> Void = {})引数については以下の通りです。
- titleKey
プレースホルダー（入力されていない時に表示される文字列） - text
入力するテキスト。文字列が変更されるので、状態変数のバインディング（＄）を渡す - onEditingChanged（クロージャー）
テキストの入力開始・終了時の処理
テキストが入力中の時にtrue、それ以外でfalseがアンダーライン（_）に格納される - onCommit（クロージャー）
エンターキーを押した時に行う処理
.textFieldStyleモディファイア
TextFileldは、デフォルトでは枠線がなく、ちょっと見にくいです。
そこで、.textFieldStyleモディファイアを使うことによって、枠線をつけることが出来ます。
.textFieldStyleモディファイアには、
PlainTextFieldStyleとRoundedBorderTextFieldStyleの2つが使えます。
Plainの方は、枠線が付かずデフォルトと変わりません。
なので、枠線をつけたい場合は、RoundedBorderFieldStyleを使います
TextField("文字を入力してください", text: $input,
onEditingChanged: { _ in
//入力開始時の処理
},
onCommit: {
//エンター機を押した時の処理
})
.padding()
.textFieldStyle(RoundedBorderTextFieldStyle())textFieldStyleでは、枠線の太さや角の丸みを設定したりは出来ないです。
使用例
名前入力欄の例を紹介します。
@State var input = ""
@State var onEdit = false
@State var endIn = ""
var body: some View {
VStack {
TextField("名前を入力してください", text: $input,
onEditingChanged: { isEdit in
if isEdit {
//入力開始処理
input = ""
self.onEdit = true
} else {
//入力終了処理
self.onEdit = false
}
},
onCommit: {
//エンターキーを押した時の処理
self.endIn = "入力完了"
})
.padding()
.textFieldStyle(RoundedBorderTextFieldStyle())
.shadow(color: onEdit ? .blue : .clear, radius: 3)
Text(endIn)
}
}onEditingChangedのisEditで、テキストが入力し始めたかどうかを判定している。
入力し始めた時、onEditをtrueにし、TextFieldに影をつけ、入力中であることが分かりやすいようにしています。
また、入力が終了した時、onEditをFalseにし、影がなくなるようにしています。
エンターキーを入力すると、endInに「入力完了」という文字が代入されます。
まとめ
- TextFieldによって、ユーザーに入力をしてもらえる
- イニシャライザは、titleKey（プレースホルダー）、text（入力される文字列）、onEditingChanged（入力開始時・終了時の処理）、onCommit（エンターキーを押した時の処理）の4つが引数
- 枠線をつけたいときは、textFieldStyleモディファイアのRoundedBorderTextFieldStyleを使う
コメント