Custom TextField With Caption - iphone

Question

I am developing an IPhone application and trying to create a custom TextField with caption on it like image below.
As you can see from image Label is changed by the value that user enters or read from database. Also there are other textfields other than name.
I couldn't be sure how should i implement this custom textfield?
One way i think placing an image with "Name:" text to background of textfield and placing "Label" value on it, other way is placing an image with only borders and inserting "Name: Label" text on it.
Are these ways suitable or is there any other best approach available?
Edit: Borders on image are textfield's border; also "Name: Label" is above on textfield.

Answer 1

Simply put another label with the desired text behind or beside the label or text field that is going to be filled. You can set the font and textColor and even the alpha according to your taste.
Make sure that if they overlap (which they should not!) the backgroundColor property of the label is set to [UIColor clearColor].
You could subclass UITextField like this:
#interface LabeledTextField : UIView
#property (nonatomic, strong) UILabel *label;
#property (nonatomic, strong) UITextField *textField;
#end
#define kPercentWidth 0.5
#implementation LabeledTextField
-initWithCoder:(NSCoder)aDecoder {
self = [super initWithCoder:aDecoder];
if (self) {
CGRect f = self.frame;
_label = [[UILabel alloc] initWithFrame:CGRectMake(0,0,
f.size.width*kPercentWidth,f.size.height)];
_textField = [[UITextField alloc] initWithFrame:CGRectMake(0,0,
f.size.width*(1-kPercentWidth),f.size.height)];
[self addSubView:_label];
[self addSubView:_textField];
}
return self;
}
#end
You could then use it like this: insert a UIView into your storyboard view controller and change the class to your LabeledTextField. This would ensure initWithCoder is called. Otherwise, you might have to put the init code into its own setup function and call it from your override of initWithFrame. Make sure you wire up the view with your outlet
// .h
#include LabeledTextField.h
//...
#property (nonatomic, strong) IBOutlet LabeledTextField *labeledTextField;
// .m, in some method
labeledTextField.textField.text = #"editable text";
labeledTextField.label.text = #"non-editable text";
Similarly, you could modify all properties of the label and text field, including colors, fonts etc.