Add image to UITextField in Xcode?

Question

enter image description here

I need to implement the concept of dropdown in Xcode.

For that purpose, I'm using a UIPickerview.

This pickerView loads when a textfield is tapped (on textFieldDidBeginEditing:)event.

Question:

Is there a way, that I can add a image to TextField?

The image is like an arrow mark by which user can understand that a dropdown appears when textfield is tapped .How can I make it?

You can add a button (with your arrow image) next to your textfield to open the pickerview . — Ramaraj T, Nov 22 '12 at 08:54
can i add something like imageview to textfield programatically? — Honey, Nov 22 '12 at 08:57
If you don't want the user to edit the textfield, instead of textfield you can have button. — Ramaraj T, Nov 22 '12 at 08:57
It's a possible duplicate of this question: http://stackoverflow.com/questions/5094907/custom-uitextfield — pbibergal, Nov 22 '12 at 09:01
please use a button and not a textField, if the user should not type anything.. — calimarkus, Nov 22 '12 at 09:21
@arizah use the custom dropdown view mate, i use this in my many projects it very easy to use and best see the first link from my answer.. — Paras Joshi, Nov 22 '12 at 09:27

score 151 · Accepted Answer · edited Dec 20 '14 at 00:17

151

UITextField has a rightView property, if you have image like this- enter image description here then You can easly set ImageView object to rightView:

UITextField *myTextField = [[UITextField alloc] init];

myTextField.rightViewMode = UITextFieldViewModeAlways;
myTextField.rightView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"downArrow.png"]];

edited Dec 20 '14 at 00:17

Zorayr

23,770
8
136
129

answered Nov 22 '12 at 09:15

Mayur Birari

5,837
8
34
61

for border plz go through with this blog http://www.icodeblog.com/2010/01/04/uitextfield-a-complete-api-overview/ – Mayur Birari Nov 22 '12 at 10:42
9

If I add image left side on textField. How can we manage spacing between image and text. – Jogendra.Com Oct 17 '13 at 11:25
@Joge you would add the image into a UIView and set the views width including the padding you want – keji Oct 22 '14 at 23:00

King-Wizard · Answer 2 · 2015-04-01T02:32:39.157

39

In Swift:

textField.leftViewMode = UITextFieldViewMode.Always
textField.leftView = UIImageView(image: UIImage(named: "imageName"))

edited Apr 01 '15 at 02:32

answered Nov 21 '14 at 22:28

King-Wizard

15,628
6
82
76

elegant solution !, but i also have some trouble to set a background image for my uitexfield (not left view, but the whole background), can you tell me how ?, in swift. – Bhimbim Apr 14 '15 at 08:36
to set correct margins / padding on image, first create a view with little bit bigger dimension than image. And create the image view, center it in the UIView, add UIImageView to UIView. Now final step is to set this UIView as .leftView. – kishorer747 Jun 30 '16 at 14:54

score 31 · Answer 3 · edited Oct 08 '14 at 13:00

31

You can put the UIImageView to the left of your UITextField.

UITextField *textField = [[UITextField alloc] initWithFrame:CGRectMake(96, 40, 130, 20)];
[textField setLeftViewMode:UITextFieldViewModeAlways];
textField.leftView= [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"searchIccon.png"]];

edited Oct 08 '14 at 13:00

Anil

2,430
3
37
55

answered Jul 11 '13 at 17:06

Erhan Demirci

4,173
4
36
44

1

Thank you Erhan, IMO your solution is the best and shortest !!! It helped me a lot :) – Davit Siradeghyan Jan 06 '14 at 17:23
Your welcome Davit :) . Really I appereciate hear from you good sound :) – Erhan Demirci Jan 06 '14 at 19:01

score 11 · Answer 4 · answered Oct 06 '16 at 11:18

11

Swift 3.0

txtField.rightViewMode = .always
txtField.rightView = UIImageView(image: UIImage(named: "selectdrop"))

answered Oct 06 '16 at 11:18

Sourabh Sharma

8,222
5
68
78

kishorer747 · Answer 5 · 2016-06-30T15:06:47.770

To add proper margins / paddings between image and textfield, try this below code. Expanding on @King-Wizard's answer.

Here the height of my TextField is 44 Check the attached image for reference.

Swift Version:

emailTF.leftViewMode = .Always
let emailImgContainer = UIView(frame: CGRectMake(emailTF.frame.origin.x, emailTF.frame.origin.y, 40.0, 30.0))
let emailImView = UIImageView(frame: CGRectMake(0, 0, 25.0, 25.0))
emailImView.image = UIImage(named: "image1")
emailImView.center = emailImgContainer.center
emailImgContainer.addSubview(emailImView)
emailTF.leftView = emailImgContainer

score 3 · Answer 6 · edited Oct 26 '16 at 14:25

3

hey mate you want dropdown view then see this custom dropdown view ..

and for this requirement use this code

UITextField *txtstate =[[UITextField alloc]init]; [txtstate setFrame:CGRectMake(10, 30,170, 30)]; 
txtstate.delegate=self; 

txtstate.text=@"Fruits"; 

txtstate.borderStyle = UITextBorderStyleLine; 

txtstate.background = [UIImage imageNamed:@"dropdownbtn.png"]; 

[txtstate setAutocorrectionType:UITextAutocorrectionTypeNo]; 
[self.view addSubview:txtstate];

and set your textfield border style none..

edited Oct 26 '16 at 14:25

Mohamed Elkassas

829
1
13
33

answered Nov 22 '12 at 08:59

Paras Joshi

20,427
11
57
70

txtstate =[[UITextField alloc]init]; [txtstate setFrame:CGRectMake(10, 30,170, 30)]; txtstate.delegate=self; txtstate.text=@"Fruits"; txtstate.borderStyle = UITextBorderStyleNone; txtstate.background = [UIImage imageNamed:@"Arrow-Down-black-32.png"]; [txtstate setAutocorrectionType:UITextAutocorrectionTypeNo]; [self.view addSubview:txtstate]; Did like this but I need borders also..How can I do it? – Honey Nov 22 '12 at 10:35
which you use mate?? means you use this custom dropdown?? – Paras Joshi Nov 22 '12 at 10:38
@arizah you did checkout the demo of dropdown.. i think this is very useful dude.. and also i give the border with many type if you want to border then i post code just tell me you required the code now?? – Paras Joshi Nov 22 '12 at 10:50
Yes I went through it ...I got it..Thanks – Honey Nov 22 '12 at 10:51
k mate Thanks a lot for ur words..I do have some doubts in other concepts..Can I get ur mail Id? – Honey Nov 22 '12 at 11:14
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/19977/discussion-between-arizah-and-paras-joshi) – Honey Nov 23 '12 at 06:50

score 3 · Answer 7 · answered Jul 12 '16 at 10:41

Step 1: Add this class to your project and add it to your textFiled's class in identity inspector,

class MyCustomTextField: UITextField {

    @IBInspectable var inset: CGFloat = 0

    @IBInspectable var leftImage: String = String(){
        didSet{
            leftViewMode = UITextFieldViewMode.Always
            leftView = UIImageView(image: UIImage(named: leftImage))
        }
    }

    override func textRectForBounds(bounds: CGRect) -> CGRect {
        return CGRectInset(bounds, inset, inset)
    }

    override func editingRectForBounds(bounds: CGRect) -> CGRect {
        return textRectForBounds(bounds)
    }

    override func leftViewRectForBounds(bounds: CGRect) -> CGRect {
        return CGRectInset(CGRectMake(0, 2, 40, 40), 10, 10) //Change frame according to your needs
    }
}

Step 2: Set text insets and left image from interface builder.

Step 3: Enjoy.

You can make leftImage of type UIImage, which will get you a nice direct image input. — Roman Roba, Feb 28 '18 at 16:08

Andrey Chernukha · Answer 8 · 2012-11-22T09:07:33.573

2

UITextField has the following property:

@property(nonatomic, retain) UIImage *background

example:

UITextField *myTextField = [[UITextField alloc] init];
myTextField.background = [UIImage imageNamed:@"myImage.png"];

edited Nov 22 '12 at 09:07

answered Nov 22 '12 at 08:55

Andrey Chernukha

21,488
17
97
161

ya but how should i link this uiimage to textfield? – Honey Nov 22 '12 at 08:59

Td Prashanth · Answer 9 · 2018-09-21T11:56:30.023

2

      emailTextField.leftViewMode = .alway
    let emailImgContainer = UIView(frame: CGRect(x: 0, y: 0, width: 30, height: 25))
    let emailImg = UIImageView(frame: CGRect(x: 0, y: 0, width: 25, height: 25))
    emailImg.image = UIImage(named: "SomeIMG")
    emailImgContainer.addSubview(emailImg)
    emailTextField.leftView = emailImgContainer

enter image description here

edited Sep 21 '18 at 11:56

answered Sep 21 '18 at 11:46

Td Prashanth

21
2

1

Hi and welcome to SO :). Can you add more detail to your answer, please? That would make it easier to understand your solution. Thanks! – CodeF0x Sep 21 '18 at 11:59
click That "enter image description here " you can understand – Td Prashanth Sep 27 '18 at 11:46

Add image to UITextField in Xcode?

9 Answers9

Linked