2022/11/22

【Swift UI】パスワード仕様のTextFieldであるSecureFieldで入力ボックスを作る方法！

この記事からわかること

Swiftでパスワード仕様のTextFieldであるSecureFieldの使い方
表示/非表示を切り替える方法

index

[open]

SecureField構造体
表示/非表示を切り替えられる入力ボックスの作成方法

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

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)
        }
    }
}