Custom UITextField

Question

How would I go about creating a UITextField like the one in this image?

Answer 1

This can be done much better and simpler with a stretchable image:

    UIImage *fieldBGImage = [[UIImage imageNamed:@"input.png"] stretchableImageWithLeftCapWidth:20 topCapHeight:20];
    [myUITextField setBackground:fieldBGImage];

Think of the background of the text field as split into three sections. A middle section which can be stretched and caps on the ends. Create an image which only needs to be long enough to contain one pixel of this repeating section (a very short text field), and then create a stretchable image from it using stretchableImageWithLeftCapWidth: topCapHeight. Pass the width of the left end cap into 'leftCapWidth.' You can make it stretch vertically as well, but if your background image is the same height as your text box it wont have an effect.

If you're familiar with 9-slice scaling in Flash or Illustrator it's exactly the same concept, except the middle sections are only one pixel wide/tall.

The advantage of this is you don't have to worry about multiple layered objects scaling together and you can resize your text fields any time and the background will stay in tact. It works on other elements too!

Answer 2

You can do this by:

yourTextField.borderStyle = UITextBorderStyleNone;

yourTextField.background = [UIImage imageNamed:@"email-input.png"];

And if you want to give margin to your text inside the textfield, you can do this by:

// Setting Text Field Margins to display the user entered text Properly

UIView *paddingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 5, 20)];

yourTextField.leftView = paddingView;
yourTextField.leftViewMode = UITextFieldViewModeAlways;

Answer 3

You probably want to use the background and borderStyle properties of UITextField. Setting borderStyle as UITextBorderStyleNone and create a custom background image to be stretched and used as the background property would be one approach.

I suggest taking a look at those properties in the UITextField class reference.

Answer 4

You can also do this through Interface Builder.

Answer 5

Take an uiimageview set its image property to the image you want as uitextfield background. And on top of this uiimageview place an uitextfield with borderstyle none. This you can do directly in interface builder.

Answer 6

just use the following line and it should work

textfield_name.background = [UIImage imageNamed : @"yourImage.png"];

here, "yourImage" is the background image you wanna set...

however, this will work only if your button isnt a roundrect button.So, you can change the type of the button in the Interface Builder or you can use

textfield_name.borderstyle = UITextBorderStyleNone or UITextBorderStyleBezel

and you r gud2go....!