Consultation regarding a fancier text edit

Question

My environment: iOS7/Xcode 5 (or 6 latest beta).

This is a mockup of a login screen i'd like to build:

As you can see. Each text edit is really a "white box" with an icon on the left, where the edit box area has no visible bounding rectangle, and begins around where the placeholder text exists.

I was wondering about a best practice pattern to get this done.

Should I create a totally new control which draws the white rectangle, the icon and creates the inside text field? or should I simply draw the white box and icon at the position and just create a "no visible boundary" text field over it?

Answer 1

You can achieve this by using a UITextField and setting the following properties:

myTextField.leftView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"MyImage"]];
myTextField.leftViewMode = UITextFieldViewModeAlways;
myTextField.backgroundColor = [UIColor whiteColor];

Make sure your icons are the same height as that of your textfield. For the password field I recommend you make it narrower and add the ? as a separate UIImageView.