【2024年4月】弊社では、基本リモートワークで一緒に成長してくださるメンバーを広く募集させていただいております。 詳細はこちら

【Swift】入力するパスワードの表示・非表示を切り替える方法を徹底解説!

【Swift】入力するパスワードの表示・非表示を切り替える方法を徹底解説!
ふくしま

こんにちは!株式会社メモリアインクのふくしまです!

この記事ではユーザーがテキストフィールドに入力したパスワードの表示・非表示を切り替える機能の実装方法を詳細に説明します。

この記事を読んで分かること…
・パスワードの表示・非表示を切り替えるためのUIの設計
・切り替え機能の実装方法

目次

環境

Swift 5.9
Xcode 15

パスワード表示・非表示の実装方法

概要

パスワード入力の際にユーザーが正確にパスワードを入力できているかを確認するために、パスワードの表示・非表示を切り替える機能の実装方法をサンプルコードを示しつつ解説します。

UI設計

下の画像のようにStoryboardでパスワード入力のためのUITextFieldと表示・非表示を切り替えるボタンUIButtonを配置し、ViewControllerに紐付けておきましょう。

【Swift】入力するパスワードの表示・非表示を切り替える方法を徹底解説!

サンプルコード

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var passwordTextField: UITextField!
    // StoryboardからボタンのIBOutletを接続
    @IBOutlet weak var toggleButton: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // ボタンの色を設定(オプション)
        toggleButton.layer.borderColor = UIColor.gray.cgColor
        toggleButton.layer.borderWidth = 1.0
        toggleButton.layer.cornerRadius = 5
        toggleButton.tintColor = .gray
        // パスワードテキストフィールドの初期状態を非表示に設定
        passwordTextField.isSecureTextEntry = true
        // 初期アイコンを設定
        updateToggleButtonIcon()
    }
    
    @IBAction func togglePasswordVisibility(_ sender: UIButton) {
        // パスワードの表示状態を切り替える
        passwordTextField.isSecureTextEntry.toggle()
        
        // ボタンのアイコンを更新
        updateToggleButtonIcon()
    }
    
    private func updateToggleButtonIcon() {
        // パスワード非表示状態に応じたアイコン画像を設定
        let buttonImage = passwordTextField.isSecureTextEntry ? UIImage(systemName: "eye.slash") : UIImage(systemName: "eye")
        toggleButton.setImage(buttonImage, for: .normal)
    }
}

サンプルコードの説明

16行目:viewDidLoad 内でテキストフィールドのisSecureTextEntryプロパティをtrueに設定して、パスワードの初期表示を非表示にします。
21-27行目:パスワードの表示・非表示を切り替えるボタンがタップされたときに呼び出されるアクションメソッドです。
23行目:.toggle()メソッドでisSecureTextEntryの状態を反転させて、パスワードの表示・非表示を切り替えています。
29-33行目:ボタンのアイコンを更新するためのupdateToggleButtonIconメソッドを定義します。
31行目:表示・非表示切替ボタンをタップした時の.isSecureTextEntry の状態(true/false)に応じてアイコンの画像を切り替えます。
32行目:31行目のアイコン画像をボタンに設定します。

動作確認

ふくしま

それではビルドして動作確認してみましょう!

【Swift】入力するパスワードの表示・非表示を切り替える方法を徹底解説!

まとめ

いかがでしたか?
本記事では、パスワードの表示・非表示を切り替える機能の実装方法を詳しく解説しました。この機能を実装することで、ユーザーはパスワードの入力ミスを防ぎやすくなり、アプリの使い勝手が向上します。
この記事が皆様の開発ライフの一助になれれば幸いです!

ふくしま

この記事があなたのスキルアップに役立ったなら、次のキャリアステップを踏み出す絶好の機会かもしれません。エンジニアとしてのさらなる成長と挑戦を求めるなら、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次