SwiftUIのSecureField(パスワード表示UITextField)の使い方【SwiftUI入門】

前回の記事TextField を紹介しましたが、パスワード等を入力する場合は SecureField を使用します。入力値が●になるところ以外は大差はありませんのでサラッと紹介します。

SwiftUIのSecureField(パスワード表示UITextField)の使い方

イニシャライザーにはいくつかありますが、以下が使用頻度が高いかと思います。

SecureField(title: StringProtocol, text: Binding<String>, onCommit: () -> Void)

title: StringProtocol はプレースホルダー文字列を、

text: Binding<String> には状態変数(@State)を、

onCommit () -> Void はリターンキーを押下した際の処理を記述出来ます。

onEditingChanged が無い以外は TextField と同じですね。

表示スタイルとキーボードタイプについても全く一緒です。TextField についての記事で紹介していますのでご参照ください。

最後に冒頭のサンプル実行画面の全体コードを記載します。パスワードと確認パスワードを入力するよくある例です。文字数以外のバリデーションはしていませんので悪しからず。

struct ContentView: View {
    
    @State private var password1 = ""
    @State private var password2 = ""
    @State private var showError = false
    @State private var errorMessage = ""
    
    var body: some View {
        VStack {
            SecureField("8〜16文字のパスワードを入力してください。", text: $password1, onCommit: {
                self.validatePassword()
            })
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .keyboardType(.alphabet)
            .padding()
            SecureField("同じパスワードを再入力してください。", text: $password2, onCommit: {
                self.validatePassword()
            })
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .keyboardType(.alphabet)
            .padding()
        }
        .alert(isPresented: $showError) {
            Alert(title: Text("エラー"), message: Text(self.errorMessage), dismissButton: .destructive(Text("閉じる")))
        }
    }
    
    private func validatePassword() {
        if self.password1.count < 8 || self.password1.count > 16 {
            self.errorMessage = "8〜16文字で入力してください!"
            self.showError = true
        }
        if self.password1.compare(self.password2) != .orderedSame {
            self.errorMessage = "パスワードが異なります。"
            self.showError = true
        }
    }
}

以上