Custom UITextField

Question

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

It appears to be slightly larger, specifically in height.

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 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.