[iOS/Swift] 비밀번호 창에 눈알 ( 비밀번호 보이게/안보이게) how to make password hidden/shown

 

 

이렇게 눈알 버튼을 클릭하면 비밀번호가 보이게 안보이게 설정할 것이다!

 

 

1. 버튼의 형태를 설정해준다 

가장 흔히 사용되는 버튼 타입은 Custom 또는 System타입이고, 필요에 따라 다른 타입을 사용해주면 된다.

var eyeButton = UIButton(type: .custom)

 

 

2. 눈동자 버튼의 객체 생성

primaryAction에 버튼 클릭을 할 때의 handler를 설정한다.

eyeButton = UIButton.init(primaryAction: UIAction(handler: { [self]_ in
            passwordTextField.isSecureTextEntry.toggle()
            self.eyeButton.isSelected.toggle()
}))

 

#번외설명 - primaryAction

primaryAction은 UIAction타입을 받는다. addTarget을 사용하지 않아도 된다고 합니다!

예 ) addTarget버전

override func viewDidLoad() { 
	super.viewDidLoad() 
    let button = UIButton(type: .custom) 
    button.addTarget(self, action: #selector(buttonDidTap), for: .touchUpInside) 
} 
@objc 
func buttonDidTap() { 
	print("yujindonut") 
}

코드로 UIButton을 생성하고, 해당 button을 탭할때마다 action(buttonDidTap)을 지정해줌

iOS14에서는 다른 방법으로 button에 actioin을 줄 수 있게 되었다.

let button = UIButton(type: .custom, 
primaryAction: UIAction(handler: { _ in print("Zedd") 
}))​

action에 closure를 바로 넣을 수 있다!

3. 눈동자 버튼 꾸미기

var buttonConfiguration = UIButton.Configuration.plain()
buttonConfiguration.imagePadding = 10
buttonConfiguration.baseBackgroundColor = .clear

configure : 환경설정, 구성하다 (버튼을 꾸며줄때 사용한다)

imagePadding : 텍스트 필드 우측에 터피할 수 있는 버튼 공간을 두기 위해서

baseBackgroundColor : 버튼 클릭시 회색 배경을 투명하게 하기 위해서

UIButton.configuration에는 4가지의 static 메소드를 제공해준다.

위에서부터 plain, gray, tinted, filled버튼이다

4. button에 이미지 설정해주기

eyeButton.setImage(UIImage(named: "password-hidden-icon"), for: .normal)
self.eyeButton.setImage(UIImage(named: "password-shown-icon"), for: .selected)
self.eyeButton.configuration = buttonConfiguration

.normal : 클릭 안했을 때

.selected : 클릭 했을 때

 

5. passwordTextField에 오른쪽에 눈동자 버튼 집어 넣기

self.passwordTextField.rightView = eyeButton
self.passwordTextField.rightViewMode = .always

.rightView에 eyeButton 집어넣고, righViewMode를 always 속성을 줌으로써, 오른쪽 칸을 항상 보여준다.

 

 

 

출처 : 윤휘 머릿속 ( 윤휘 알라뷰)

https://gyuios.tistory.com/126

iOS) UIButton.Configuration in iOS 15

https://zeddios.tistory.com/1093

iOS 14 + ) UIAction closure based UIControl