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.
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 and
default 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 onUITextField
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 ofUITextField
.
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 ).
I have modified this and can download the source from here ImageTextField