how to insert image in the left AND right to textfield using @IBDesignable in swift?

Question

I am a beginner, I am trying to make a password textfield with two image, one on the left side (lock image) and another one on the right side to reveal the password like this one

but my senior ordered me to make it in the @IBDesignable class of text field so the main code stay clear from UI. i find something similar thread about this in here how to make designable textfield code class in swift

but it seems that the code is for left image only or right image only, i need both of them (lock and eyes symbol) appear in the textfield. I have tried to modify the code there, but i can't achieve what i need. really need your help, maybe you have done this in your previous project :)

import UIKit

@IBDesignable


class DesignableTextField: UITextField {

@IBInspectable var rightImage : UIImage? {
    didSet {
      updateRightView()
    }
  }

  @IBInspectable var rightPadding : CGFloat = 0 {
    didSet {
      updateRightView()
    }
  }

    @IBInspectable var leftImage : UIImage? {
        didSet {
            updateView()
        }
    }

    @IBInspectable var leftPadding : CGFloat = 0 {
        didSet {
            updateView()
        }
    }

    @IBInspectable var cornerRadiusOfField : CGFloat = 0 {
        didSet {
            layer.cornerRadius = cornerRadiusOfField
        }
    }



    func updateView() {
        if let image = leftImage {
            leftViewMode = .always

            // assigning image
            let imageView = UIImageView(frame: CGRect(x: leftPadding, y: 0, width: 20, height: 20))
            imageView.image = image

            var width = leftPadding + 20

            if borderStyle == UITextBorderStyle.none || borderStyle == UITextBorderStyle.line {
                width += 5
            }

            let view = UIView(frame: CGRect(x: 0, y: 0, width: width, height: 20)) // has 5 point higher in width in imageView
            view.addSubview(imageView)


            leftView = view

        } else {
            // image is nill
            leftViewMode = .never
        }
    }

func updateRightView() {
    if let image = rightImage {
      rightViewMode = .always

      // assigning image
      let imageView = UIImageView(frame: CGRect(x: rightPadding, y: 0, width: 20, height: 20))
      imageView.image = image

      var width = rightPadding - 20

      if borderStyle == UITextBorderStyle.none || borderStyle == UITextBorderStyle.line {
        width -= 5
      }

      let view = UIView(frame: CGRect(x: 0, y: 0, width: width, height: 20)) // has 5 point higher in width in imageView
      view.addSubview(imageView)


      rightView = view

    } else {
      // image is nill
      rightViewMode = .never
    }
  }



}

score 1 · Accepted Answer · answered Feb 17 '18 at 03:55

Check below code:

@IBInspectable var leftSideImage:UIImage = UIImage() {

    didSet {
        leftView = UIImageView.init(image: leftSideImage)
        leftViewMode = .always
    }
}

@IBInspectable var rightSideImage:UIImage = UIImage() {

    didSet {
        rightView = UIImageView.init(image: rightSideImage)
        rightViewMode = .always
    }
}

Output:

score 0 · Answer 2 · answered Feb 17 '18 at 02:33

An alternate way you can do, In storyboard add a button and add constraints as follows

Button trailing edge = textfield trailing edge
Button (vertical) centre = textfield (vertical) centre
give fix height and width to button

same you can do in right side. Button leading edge = textfield leading edge

[]_______________[]

how to insert image in the left AND right to textfield using @IBDesignable in swift?

2 Answers2