Add image to UITextField in Xcode?

Question

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?

Solution 1

UITextField has a rightView property, if you have image like this- 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"]];

Solution 2

In Swift:

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

Solution 3

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"]];

Solution 4

Swift 3.0

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

Solution 5

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

View more solutions

Comments

[Honey]

ya but how should i link this uiimage to textfield?

[Honey]

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?

[Paras Joshi]

which you use mate?? means you use this custom dropdown??

[Mayur Birari]

for border plz go through with this blog icodeblog.com/2010/01/04/uitextfield-a-complete-api-overview

[Paras Joshi]

@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??

[Honey]

Yes I went through it ...I got it..Thanks

[Honey]

k mate Thanks a lot for ur words..I do have some doubts in other concepts..Can I get ur mail Id?

[Honey]

let us continue this discussion in chat

[Jogendra.Com]

If I add image left side on textField. How can we manage spacing between image and text.

[Davit Siradeghyan]

Thank you Erhan, IMO your solution is the best and shortest !!! It helped me a lot :)

[Erhan Demirci]

Your welcome Davit :) . Really I appereciate hear from you good sound :)

[keji]

@Joge you would add the image into a UIView and set the views width including the padding you want

[Bhimbim]

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.

[kishorer747]

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.

[Roman Roba]

You can make leftImage of type UIImage, which will get you a nice direct image input.

[CodeF0x]

Hi and welcome to SO :). Can you add more detail to your answer, please? That would make it easier to understand your solution. Thanks!

[Admin]

click That "enter image description here " you can understand