Style all UITextFields at once rather than in each ViewController?

Question

I'm trying to style all the textfields like so:

CGRect frameRect2 = _lastname_field.frame;
frameRect2.size.height = 30;

_lastname_field.font = [UIFont fontWithName:@"AppleGothic" size:15];
_lastname_field.frame = frameRect2;
_lastname_field.backgroundColor= [UIColor whiteColor];
_lastname_field.layer.cornerRadius = 5.0;
[_lastname_field.layer setBorderColor: [[UIColor grayColor] CGColor]];
[_lastname_field.layer setBorderWidth: 1.0];
_lastname_field.clipsToBounds = YES;

That field looks great. Only problem is, there are over 50 textfields throughout the app. Is there an easy way to style all of them the same way? Some of them haven't even been synthesize/named.

Thanks!

Answer 1

1) If you create your files within your code, I would create a factory class with an interface like that:

@interface MyTextFieldFactory : NSObject
+ (UITextField*)createStyledTextField;
@end

2) If you create your TextFields with the Interface Builder, you could write a category on UITextField, that implements only awakeFromNib:. There you make all your customization. This needs no code changes, neither does it need changes within the nib files.

Answer 2

Subclass UITextField and add your customization in the initWithFrame method. Add initWithCoder method in the custom class where you call the super and return [self initWithFrame:[self frame]]. Then change the class in Interface Builder for each text field.

It will be something like this:

// MyUITextField.h
@interface MyUITextField : UITextField {
    // Your IVars
}

@property (retain, readonly) float value;
@end

// MyUITextField.m
@implementation MyClass

- (id)initWithCoder:(NSCoder *)decoder {

    [super initWithCoder:decoder];
    return [self initWithFrame:[self frame]];
}

- (id)initWithFrame:(CGRect)frame {

    self = [super initWithFrame:frame];
    if (self) {
        // Your customization
    }
}

@end

Answer 3

OK, if appearances won't work then your next best bet is to write a category to do this for you.

Subclassing is possible but not ideal as there is a possibility of overriding something you shouldn't (or vice versa).

Add a file to your project and select the Category type and set the class as UITextField.

In the category add a function something like...

- (void)configureTextFieldWithFrame:(CGRect)frame;

Then in the .m file you can have...

- (void)configureTextFieldWithFrame:(CGRect)frame
{
    self.font = [UIFont fontWithName:@"AppleGothic" size:15];
    self.frame = frame;
    self.backgroundColor= [UIColor whiteColor];
    self.layer.cornerRadius = 5.0;
    [self.layer setBorderColor: [[UIColor grayColor] CGColor]];
    [self.layer setBorderWidth: 1.0];
    self.clipsToBounds = YES;
}

Then you just need to #import UITextField+Configure.h (or whatever your categoyr is called.

Then in your code replace your code with...

[_lastname_field configureTextFieldWithFrame:frameRect2];

This will run your category function.

Answer 4

I agree with Fogmeister for textfields that were created in code. But if you're laying out textfields in Storyboards, that approach won't work (because each field explicitly defines its properties). But there is an easy way that does work.

Right click on your storyboard and "Open As.." Source Code. That puts an XML representation of the SB up an editor window. There you can change the textfield properties globally (and/or selectively) using the editor (or copy to the XML editor of your choice).

Fair warning, it's possible to kill your project if you introduce errors in the SB that will keep it from compiling - so be very careful and make sure you have a backup for your SB. But if you check after each change, this technique can work very well.

Search for "<textField " to find something like this:

<textField opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" borderStyle="roundedRect" placeholder="name" minimumFontSize="17" clearButtonMode="whileEditing" id="F9N-Tb-KTd">
                            <rect key="frame" x="176" y="301" width="472" height="31"/>
                            <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                            <fontDescription key="fontDescription" type="system" pointSize="14"/>
                            <textInputTraits key="textInputTraits" autocapitalizationType="words" enablesReturnKeyAutomatically="YES"/>
                            <connections>
                                <action selector="changeName:" destination="4" eventType="editingDidEnd" id="bLg-iM-m8a"/>
                            </connections>
                        </textField>

Find one textfield that has the fontDescription properties you like, and one that doesn't. Then Replace the fontDescription properties you want to change with corresponding properties from the good one. Be sure to limit your changes to things like the font, size, and background. Don't change the id, rect, or anything else that needs to be unique to the textfield.

I hope this works well for you, it's been a very handy technique for me to make sure all my textfields have consistent typography.

(To get back to normal view, "Open As..." Interface Builder - Storyboard)

Good luck!