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

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

この記事からわかること

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

index

[open]

\ アプリをリリースしました /

みんなの誕生日

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

posted withアプリーチ

ログイン機能などを実装する際に必要となるパスワードの入力ボックスの実装方法をまとめました。

SecureField構造体

参考文献:SecureField構造体

パスワードの入力ボックスSecureField構造体を使うことで簡単に実装することができます。

SecureField("パスワード", text: $password)

通常のTextFieldでは入力した値が表示されますがSecureField構造体では自動で黒い丸に変換されるようになっています。

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

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

ログイン画面などによくある表示/非表示を切り替えられる入力ボックスを作成するにはTextFieldSecureFieldを使ってFocusopacityを切り替えることで実装できます。

以下は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)
        }
    }
}

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index