[iOS] 비밀번호 보기/숨기기 (눈 아이콘) 기능

 📌 들어가며

비밀번호 입력창에 눈 아이콘 버튼을 두고 이 버튼을 선택함에 따라 비밀번호 보기/숨기기를 구현하려고 한다.

눈 아이콘 선택 시 비밀번호 보기/숨기기

 

해당 뷰는 스토리보드로 구현하였으며 해당 TextField와 Button 네이밍은 다음과 같다.

	@IBOutlet weak var passwordTextField: UITextField!
	@IBOutlet weak var passwordEyeButton: UIButton!

 

passwordTextField는 .isSecureTextEntry속성 default 값을 true로 주었다.

 

 📌 필요한 로직

이 기능을 구현하기 위해서는 세 가지 설정이 필요하다.

• 버튼 선택 상태 변경
• 비밀번호 보기/숨기기
• 눈 아이콘(버튼 이미지) 변경
  

 

 📌 코드

    @IBAction func passwordEyeButtonDidTap(_ sender: Any) {
        // 보안 설정 반전
        passwordTextField.isSecureTextEntry.toggle()
        // 버튼 선택 상태 반전
        passwordEyeButton.isSelected.toggle()
        // 버튼 선택 상태에 따른 눈 모양 이미지 변경
        let eyeImage = passwordEyeButton.isSelected ? "password shown eye icon" : "password hidden eye icon"
        passwordEyeButton.setImage(UIImage(named: eyeImage), for: .normal)
        // 버튼 선택된 경우 자동으로 들어가는 틴트 컬러를 투명으로 변경해줌
        passwordEyeButton.tintColor = .clear
    }

 

 📌 마치며

처음에 eyeButton.isSelected 값을 바꿔주는 코드를 작성하지 않아서 비밀번호 보안 설정은 바뀌지만 눈 모양 아이콘 변경이 되지 않았다.

passwordTextField 보안 설정을 toggle()로 변경해준 코드를 보고 passwordEyebButton도 바꿔줬다고 착각해서 삽질을 했다는 거~  🫠

눈을 제대로 뜨자 👀