How to make "safe area" in UITextField with SecureTextEntry toggle?

Question

I have a problem, I added secureTextEntry toggle in my text field, but text is on toggle button.

extension UITextField {
    fileprivate func setPasswordToggleImage(_ button: UIButton) {
        if(isSecureTextEntry){
            button.setImage(UIImage(named: "eye-active"), for: .normal)
        }else{
            button.setImage(UIImage(named: "eye-inactive"), for: .normal)

        }
    }

    func enablePasswordToggle(){
        let button = UIButton(type: .custom)
        setPasswordToggleImage(button)
        button.frame = CGRect(x: CGFloat(self.frame.size.width - 25), y: CGFloat(5), width: CGFloat(25), height: CGFloat(25))
        button.addTarget(self, action: #selector(self.togglePasswordView), for: .touchUpInside)
        self.rightView = button
        self.rightViewMode = .always
    }
    @IBAction func togglePasswordView(_ sender: Any) {
        self.isSecureTextEntry.toggle()
        setPasswordToggleImage(sender as! UIButton)
    }
}

Also I have a bug that places my icon in far right, instead of the place I meant and I don't know why but it's 2nd icon

Answer 1

You can use this directly to add image and padding to your UITextField. Can be done from code as well as storyboard

// MARK: - UITextField
extension UITextField {
    @IBInspectable var leftPadding: CGFloat {
        get {
            return leftView?.frame.size.width ?? 0.0
        }
        set {
            let frame = CGRect(x: 0, y: 0, width: newValue, height: bounds.size.height)
            leftView = UIView(frame: frame)
            leftViewMode = .always
        }
    }

@IBInspectable var leftImage: UIImage? {
    get {
        let imgView = leftView?.subviews.first(where: {$0 is UIImageView}) as? UIImageView
        return imgView?.image
    }
    set {
        let frame = CGRect(x: 0, y: 0, width: leftPadding, height: bounds.size.height)
        leftView = UIView(frame: frame)
        
        let imgView = UIImageView(frame: frame.insetBy(dx: 4, dy: 4))
        imgView.contentMode = .scaleAspectFit
        leftView?.addSubview(imgView)
        imgView.image = newValue
        leftViewMode = .always
    }
}

@IBInspectable var rightPadding: CGFloat {
    get {
        return rightView?.frame.size.width ?? 0.0
    }
    set {
        let frame = CGRect(x: 0, y: 0, width: newValue, height: bounds.size.height)
        rightView = UIView(frame: frame)
        rightViewMode = .always
    }
}

@IBInspectable var rightImage: UIImage? {
    get {
        let imgView = rightView?.subviews.first(where: {$0 is UIImageView}) as? UIImageView
        return imgView?.image
    }
    set {
        let frame = CGRect(x: 0, y: 0, width: rightPadding, height: bounds.size.height)
        rightView = UIView(frame: frame)
        
        let imgView = UIImageView(frame: frame.insetBy(dx: 4, dy: 4))
        imgView.contentMode = .scaleAspectFit
        rightView?.addSubview(imgView)
        imgView.image = newValue
        rightViewMode = .always
    }
  }  
}