Change right icon image UITextField

Question

I am trying to change between rightView UIImages that are added as a subView to my UITextfield. When a user taps the icon it should show or hide the inserted password and change the UIImage depending on the state.

How am I able to edit the code below to achieve this?

Code:

// Show eye icon to show the password
    func textFieldDidChange() {
        if passwordField.text != "" {
            let leftImageView = UIImageView()
            leftImageView.image = UIImage(named: "view_password")
            leftImageView.contentMode = .scaleAspectFit

            let leftView = UIView()
            leftView.addSubview(leftImageView)

            leftView.frame = CGRect(x: 0, y: 0, width: 40, height: 30)
            leftImageView.frame = CGRect(x: 10, y: 10, width: 20, height: 12)

            passwordField.rightViewMode = .whileEditing
            passwordField.rightView = leftView

            let tapgesture = UITapGestureRecognizer(target: self, action: #selector(ViewController.togglePasswordSecurity))
            leftImageView.isUserInteractionEnabled = true
            leftImageView.addGestureRecognizer(tapgesture)

        }else{
            passwordField.rightViewMode = .never
        }
    }


    func togglePasswordSecurity(imageView: UIImageView) {

        if passwordField.isSecureTextEntry == false {

            // change left UIImage to hide_password
            passwordField.isSecureTextEntry = true
        }else{

            // change left UIImage to view_password
            passwordField.isSecureTextEntry = false
        }
    }

Thanks a lot!

Answer 1

Have you tried adding a tag to each of your images? For example:

let leftImageView = UIImageView()
leftImageView.image = UIImage(named: "view_password")
leftImageView.contentMode = .scaleAspectFit
leftImageView.tag = 1

Then, to change that image you can write:

let myImage = UIView(withTag: 1) as! UIImageView
myImage.image = ...

EDIT: To toggle between 2 images, just change this: func togglePasswordSecurity(imageView: UIImageView) {

    if passwordField.isSecureTextEntry == false {

        let myImage = UIView(withTag: 1) as! UIImageView
        myImage.image = YOUR_IMAGE_1
        // change left UIImage to hide_password
        passwordField.isSecureTextEntry = true
    }else{

        let myImage = UIView(withTag: 1) as! UIImageView
        myImage.image = YOUR_IMAGE_2
        // change left UIImage to view_password
        passwordField.isSecureTextEntry = false
    }
}

Answer 2

Solution:

// Show eye icon to show the password will be triggered once there is a change in data in the UITextField
    func textFieldDidChange() {
        if passwordField.text != "" {
            let leftImageView = UIImageView()
            leftImageView.image = passwordImage
            leftImageView.contentMode = .scaleAspectFit
            leftImageView.tag = 1

            let leftView = UIView()
            leftView.addSubview(leftImageView)

            leftView.frame = CGRect(x: 0, y: 0, width: 40, height: 30)
            leftImageView.frame = CGRect(x: 10, y: 10, width: 20, height: 12)

            passwordField.rightViewMode = .whileEditing
            passwordField.rightView = leftView

            let tapgesture = UITapGestureRecognizer(target: self, action: #selector(ViewController.togglePasswordSecurity))
            leftImageView.isUserInteractionEnabled = true
            leftImageView.addGestureRecognizer(tapgesture)

        }else{
            passwordField.rightViewMode = .never
        }
    }


    func togglePasswordSecurity() {

        if passwordField.isSecureTextEntry == false {

            passwordImage = UIImage(named: "view_password")
            textFieldDidChange()

            // change left UIImage to hide_password
            passwordField.isSecureTextEntry = true
        }else{

            passwordImage = UIImage(named: "heart")
            self.textFieldDidChange()
            // change left UIImage to view_password
            passwordField.isSecureTextEntry = false
        }
    }