UIAppearance - Customize UI elements
UIAppearance, introduced with iOS5, is the fast and simple way to customize UI elements in iOS or OSX. The UIAppearance protocol get the appearance proxy for a class. So you can customize the appearance of instances of a class by sending appearance modification messages to the class’s appearance proxy.
Yeah yeah, ok, i wanna learn how it works!
There are two ways to customize the appearance of a UI element.
customize all instance of a element ex:
[[UINavigationBar appearance] setTintColor:myColor];
customize instance of a element in a specific container class ex:
[[UIBarButtonItem appearanceWhenContainedIn:[UINavigationBar class], nil] setTintColor:myNavBarColor];
Well, in the - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions method you can start to customize the UI elements like below.
UILabel *labelTitle = [UILabel appearance]; [labelTitle setTextColor:[InterfaceHelper colorFromHexString:@"#333333"]]; UIButton *buttonBlu = [UIButton appearance]; UIImage *buttonBluImage = [UIImage imageNamed:@"mybutton.png"]; [buttonBlu setBackgroundImage:buttonBluImage forState:UIControlStateNormal]; [buttonBlu setTitleColor:[InterfaceHelper colorFromHexString:@"#f0f0f0"] forState:UIControlStateNormal]; [buttonBlu setTitleColor:[InterfaceHelper colorFromHexString:@"#f0f0f0"] forState:UIControlStateHighlighted]; [buttonBlu setTitleColor:[InterfaceHelper colorFromHexString:@"#f0f0f0"] forState:UIControlStateSelected]; UITextField *textFieldLogin = [UITextField appearanceWhenContainedIn:[MyCustomViewController class], nil]; [textFieldLogin setBorderStyle:UITextBorderStyleNone]; [textFieldLogin setBackground:[UIImage imageNamed:@"textbox.png"]]; UINavigationBar *navigationBar = [UINavigationBar appearance]; [navigationBar setBackgroundImage:[UIImage imageNamed:@"top.png"] forBarMetrics:UIBarMetricsDefault]; [navigationBar setBackgroundImage:[UIImage imageNamed:@"top.png"] forBarMetrics:UIBarMetricsLandscapePhone]; UITableView *tableView = [UITableView appearance]; [tableView setBackgroundColor:[InterfaceHelper colorFromHexString:@"#666666"]]; UIBarButtonItem *buttonItem = [UIBarButtonItem appearance]; [buttonItem setBackButtonBackgroundImage:[UIImage imageNamed:@"navbutton.png"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault]; [buttonItem setBackgroundImage:[UIImage imageNamed:@"navbutton.png"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault]; [buttonItem setTitleTextAttributes:[NSDictionary dictionaryWithObject:[UIFont fontWithName:@"Arial-BoldMT" size:12] forKey:UITextAttributeFont] forState:UIControlStateNormal]; UITabBar *tabBar = [UITabBar appearance]; [tabBar setBackgroundImage:[UIImage imageNamed:@"tabBackground.png"]]; [tabBar setSelectionIndicatorImage:[UIImage imageNamed:@"tabSel.png"]];
Where the InterfaceHelper is a custom class where you can convert hex to rgb :
// Assumes input like "#00FF00" (#RRGGBB). +(UIColor *)colorFromHexString:(NSString *)hexString { return [InterfaceHelper colorFromHexString:hexString andAlpha:1]; } +(UIColor *)colorFromHexString:(NSString *)hexString andAlpha:(float)alpha{ unsigned rgbValue = 0; NSScanner *scanner = [NSScanner scannerWithString:hexString]; [scanner setScanLocation:1]; // bypass '#' character [scanner scanHexInt:&rgbValue]; return [UIColor colorWithRed:((rgbValue & 0xFF0000) >> 16)/255.0 green:((rgbValue & 0xFF00) >> 8)/255.0 blue:(rgbValue & 0xFF)/255.0 alpha:alpha]; }
So appearance for UIElements inside the applications/custom controllers are changed by your preferences.
Finally, if you wanna change the appearance for a "not ready for appear" property, you can support the appearance marking the property with UI_APPEARANCE_SELECTOR in the .h file, like below (the class with the property declaration, must be conform to the UIAppearanceContainer protocol).
@property (nonatomic, strong) UIColor *myCustomColor UI_APPEARANCE_SELECTOR;
Now override the -(void)set myCustomColor:(UIColor *)myCustomColor method in the .m.
That's all!















