こんにちは!株式会社メモリアインクのふくしまです!
この記事ではユーザーがテキストフィールドに入力したパスワードの表示・非表示を切り替える機能の実装方法を詳細に説明します。
この記事を読んで分かること…
・パスワードの表示・非表示を切り替えるためのUIの設計
・切り替え機能の実装方法
環境
Swift 5.9
Xcode 15
パスワード表示・非表示の実装方法
概要
パスワード入力の際にユーザーが正確にパスワードを入力できているかを確認するために、パスワードの表示・非表示を切り替える機能の実装方法をサンプルコードを示しつつ解説します。
UI設計
下の画像のようにStoryboardでパスワード入力のためのUITextFieldと表示・非表示を切り替えるボタンUIButtonを配置し、ViewControllerに紐付けておきましょう。
サンプルコード
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行目のアイコン画像をボタンに設定します。
動作確認
それではビルドして動作確認してみましょう!
まとめ
いかがでしたか?
本記事では、パスワードの表示・非表示を切り替える機能の実装方法を詳しく解説しました。この機能を実装することで、ユーザーはパスワードの入力ミスを防ぎやすくなり、アプリの使い勝手が向上します。
この記事が皆様の開発ライフの一助になれれば幸いです!
この記事があなたのスキルアップに役立ったなら、次のキャリアステップを踏み出す絶好の機会かもしれません。エンジニアとしてのさらなる成長と挑戦を求めるなら、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
コメント