【Swift UI】パスワード仕様のTextFieldであるSecureFieldで入力ボックスを作る方法!
この記事からわかること
- Swiftでパスワード仕様のTextFieldであるSecureFieldの使い方
- 表示/非表示を切り替える方法
index
[open]
\ アプリをリリースしました /
友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-
posted withアプリーチ
ログイン機能などを実装する際に必要となるパスワードの入力ボックスの実装方法をまとめました。
SecureField構造体
参考文献:SecureField構造体
パスワードの入力ボックスはSecureField
構造体を使うことで簡単に実装することができます。
SecureField("パスワード", text: $password)
通常のTextField
では入力した値が表示されますがSecureField
構造体では自動で黒い丸に変換されるようになっています。
表示/非表示を切り替えられる入力ボックスの作成方法
ログイン画面などによくある表示/非表示を切り替えられる入力ボックスを作成するにはTextField
とSecureField
を使ってFocus
とopacity
を切り替えることで実装できます。
以下はBinding
を使用して親から呼び出せるようにしているので適宜良きように変更してください。
import SwiftUI
struct PasswordInputView: View {
@FocusState var focusText: Bool
@FocusState var focusSecure: Bool
@State var show: Bool = false
@Binding var password: String
var body: some View {
HStack {
ZStack(alignment: .trailing) {
TextField("パスワード", text: $password)
.focused($focusText)
.opacity(show ? 1 : 0)
SecureField("パスワード", text: $password)
.focused($focusSecure)
.opacity(show ? 0 : 1)
Button(action: {
show.toggle()
if show {
focusText = true
} else {
focusSecure = true
}
}, label: {
Image(systemName: self.show ? "eye.slash.fill" : "eye.fill")
.padding()
.font(.system(size: 15))
})
}.padding().textFieldStyle(.roundedBorder)
}
}
}
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。