【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を使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

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

mapping

自分だけの地図を作ろう!-mapping-

無料posted withアプリーチ

割り勘アプリ-bill-

旅行におすすめ!
割り勘アプリ-bill-

無料posted withアプリーチ

Imakoko

現在地を取得するアプリ!Imakoko

無料posted withアプリーチ

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Remind-シンプル通知アプリ-

シンプル通知アプリ-Remind-

無料posted withアプリーチ

CLIPURL

好きな記事をクリップしよう!-CLIPURL-

無料posted withアプリーチ

記録カレンダー

続けたを可視化できるアプリ!記録カレンダー

無料posted withアプリーチ

CART-共有できるお買い物リスト-

CART-共有できるお買い物リスト-

無料posted withアプリーチ

Githubにて
iOSアプリのソースコードを公開中!

自作Webアプリ

子育て知識共有サイト-mikata-

子育て知識共有サイト-mikata-

フレームワーク:Laravel/Vue.js

作成の流れQiita「Laravel×Vue.jsを使って初めてWebアプリを自作しました!」

感想:初めて作成したWebアプリです!メールアドレスでの会員登録や質問投稿、回答やコメント、いいねやフォローなどSNSに近い機能を実装してみました。レビューや修正すべきポイントなどを教えていただけると嬉しいです!

New Article

index