Swift add icon/image in UITextField Swift add icon/image in UITextField ios ios

Swift add icon/image in UITextField


Sahil has a great answer and I wanted to take that and expand it into an @IBDesignable so developers can add images to their UITextFields on the Storyboard.

Swift 4.2

import UIKit@IBDesignableclass DesignableUITextField: UITextField {        // Provides left padding for images    override func leftViewRect(forBounds bounds: CGRect) -> CGRect {        var textRect = super.leftViewRect(forBounds: bounds)        textRect.origin.x += leftPadding        return textRect    }        @IBInspectable var leftImage: UIImage? {        didSet {            updateView()        }    }        @IBInspectable var leftPadding: CGFloat = 0        @IBInspectable var color: UIColor = UIColor.lightGray {        didSet {            updateView()        }    }        func updateView() {        if let image = leftImage {            leftViewMode = UITextField.ViewMode.always            let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))            imageView.contentMode = .scaleAspectFit            imageView.image = image            // Note: In order for your image to use the tint color, you have to select the image in the Assets.xcassets and change the "Render As" property to "Template Image".            imageView.tintColor = color            leftView = imageView        } else {            leftViewMode = UITextField.ViewMode.never            leftView = nil        }                // Placeholder text color        attributedPlaceholder = NSAttributedString(string: placeholder != nil ?  placeholder! : "", attributes:[NSAttributedString.Key.foregroundColor: color])    }}

What is happening here?

This designable allows you to:

  • Set an image on the left
  • Add padding between the left edge of the UITextField and the image
  • Set a color so the image and the Placeholder text matches

Notes

  • For image color to change you have to follow that note in the comment in the code
  • The image color will not change in the Storyboard. You have to run the project to see the color in the Simulator/device.

Designable in the StoryboardStoryboard

At RuntimeRuntime


Try adding emailField.leftViewMode = UITextFieldViewMode.Always

(Default leftViewMode is Never)

Updated Answer for Swift 4

emailField.leftViewMode = UITextFieldViewMode.alwaysemailField.leftViewMode = .always


I Just want to add some more thing here:

If you want to add the image on UITextField on left side use leftView property of UITextField

NOTE: Don't forget to set leftViewMode to UITextFieldViewMode.Always and for right rightViewMode to UITextFieldViewMode.Always anddefault is UITextFieldViewModeNever

for e.g

For adding an image on left side

textField.leftViewMode = UITextFieldViewMode.Alwayslet imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))let image = UIImage(named: imageName)imageView.image = imagetextField.leftView = imageView

For adding an image on right side

textField.rightViewMode = UITextFieldViewMode.Alwayslet imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))let image = UIImage(named: imageName)imageView.image = imagetextField.rightView = imageView

NOTE: some things you need to take care while adding an image on UITextField either on the left side or right side.

  • Don't forget to give a frame of ImageView which are you going to add on UITextField

    let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))

  • if your image background is white then image won't visible on UITextField

  • if you want to add an image to the specific position you need to add ImageView as the subview of UITextField.

Update For Swift 3.0

@Mark Moeykens Beautifully expended it and make it @IBDesignable.

I modified and added some more features (add Bottom Line and padding for right image) in this.

NOTE if you want to add an image on the right side you can select the Force Right-to-Left option in semantic in interface builder(But for right image padding won't work until you will override rightViewRect method ).

enter image description here

I have modified this and can download the source from here ImageTextField

enter image description here