[SwiftUI] SecureField の使用方法

スポンサーリンク
SwiftUI SwiftUI

SecureField はパスワード入力用のテキストインターフェースを提供します。
今回は、SecureField の使用方法について説明します。

スポンサーリンク

環境

OS: macOS Big Sur 11.2.1
Xcode: 12.4
Swift: 5.2.4

スポンサーリンク

SecureField の基本使用方法

SecureField の基本的な構文は以下の通りです。
第1引数には、入力欄が空の場合に表示される文字列(※)を指定し、第2引数には入力された文字列を格納するための String 型変数を指定します。この String 型の変数は @State 等で宣言をしておく必要があります。この第2引数の変数の先頭には $ を付けて参照渡しにして、SecureField がプロパティ値を更新できるようにしておきます。
※この文字列のことをプレースホルダと呼びます。

SecureField("プレースホルダ", text: $value)

以下にコード例を示します。
このコードでは、入力欄に「パスワードを入力」と表示し、入力された文字列は変数 value に格納されます。

struct ContentView: View {
    @State var strPassword  = ""
    var body: some View {
        SecureField("パスワードを入力", text: $strPassword)
    }
}

実行して文字を入力すると伏字(●)に変換されることがわかります。

SecureField の使用例

SecureField の使用例

スポンサーリンク

枠線を付ける

実際に動かしてみるとわかるのですが、先程の例では SecureField に枠線がないため、入力可能な範囲がわかりにくくなっています。
枠線を付けるには textFieldStyle() モディファイアを使用します。
以下のスタイルを使用することができます。

コード例を以下に示します。

struct ContentView: View {
    @State var strPassword1  = ""
    @State var strPassword2  = ""
    @State var strPassword3  = ""
    var body: some View {
        VStack {
            TextField("DefaultTextFieldStyle", text: $strPassword1)
                .textFieldStyle(DefaultTextFieldStyle())
                .padding()
            TextField("PlainTextFieldStyle", text: $strPassword2)
                .textFieldStyle(PlainTextFieldStyle())
                .padding()
            TextField("RoundedBorderTextFieldStyle", text: $strPassword3)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()
        }
    }
}
SecureField に枠線を付ける例

SecureField に枠線を付ける例

スポンサーリンク

入力されたパスワードを確認する

SecureField に入力された内容が、変数に格納されているかを確認するために Text に表示してみましょう。
以下にコード例を示します。
入力されたパスワードを保持する変数として @State を付けた「strPassword」を宣言しています。。
Text の引数には「strPassword」を渡していますので、SecureField に入力したパスワードが表示されます。

struct ContentView: View {
    @State var strPassword  = ""
    var body: some View {
        SecureField("パスワードを入力", text: $strPassword)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .padding()
        Text(strPassword)
    }
}
パスワードを確認する例

パスワードを確認する例

スポンサーリンク

入力された文字数を判断する

SecureField の以下の書式を使用すると、「入力が終了した」ということを判断して処理をすることができます。

init(
    _ titleKey: LocalizedStringKey, 
    text: Binding, 
    onCommit: @escaping () -> Void = {})

以下にコード例を示します。
この例は、SecureField に入力された文字数が8文字未満の場合に「パスワードは8文字以上を入力してください」というアラートを表示します。
TextField の第3引数に onCommit を渡しており、入力された文字数が8未満のときに showingAlert に true をセットしています。
後続の .alert で showingAlert の値が true であると判断した場合にアラートが表示されるようにしています。

struct ContentView: View {
    @State var strPassword  = ""
    @State var showingAlert = false
    var body: some View {
        SecureField(
            "パスワードを入力",
            text: $strPassword,
            /// リターンキーが押された時の処理
            onCommit: {
                if self.strPassword.count < 8 {
                    self.showingAlert = true
                }
            })
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .padding()
            .alert(isPresented: $showingAlert) {
                Alert(title: Text("パスワードは8文字以上を入力してください"))
            }
    }
}
パスワードの文字数を確認する例

パスワードの文字数を確認する例

コメント

タイトルとURLをコピーしました