User Interface Customization in iOS 5

Adding a Background Image

- (void)viewDidLoad {    
    [super viewDidLoad];
 
    [[self view] setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"bg_sand"]]];    
}

 

Customizing UINavigationBar

- (void)customizeAppearance
{
    // Create resizable images
    UIImage *gradientImage44 = [[UIImage imageNamed:@"surf_gradient_textured_44"] 
        resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
    UIImage *gradientImage32 = [[UIImage imageNamed:@"surf_gradient_textured_32"] 
        resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
 
    // Set the background image for *all* UINavigationBars
    [[UINavigationBar appearance] setBackgroundImage:gradientImage44 
        forBarMetrics:UIBarMetricsDefault];
    [[UINavigationBar appearance] setBackgroundImage:gradientImage32 
        forBarMetrics:UIBarMetricsLandscapePhone];
 
    // Customize the title text for *all* UINavigationBars
    [[UINavigationBar appearance] setTitleTextAttributes:
        [NSDictionary dictionaryWithObjectsAndKeys:
            [UIColor colorWithRed:255.0/255.0 green:255.0/255.0 blue:255.0/255.0 alpha:1.0], 
            UITextAttributeTextColor, 
            [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.8], 
            UITextAttributeTextShadowColor, 
            [NSValue valueWithUIOffset:UIOffsetMake(0, -1)], 
            UITextAttributeTextShadowOffset, 
            [UIFont fontWithName:@"Arial-Bold" size:0.0], 
            UITextAttributeFont, 
            nil]];
 
}

didFinishLaunchingWithOptions:

[self customizeAppearance];

Customizing UIBarButtonItem

 

UIImage *button30 = [[UIImage imageNamed:@"button_textured_30"] 
    resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 5)];
UIImage *button24 = [[UIImage imageNamed:@"button_textured_24"] 
    resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 5)];
[[UIBarButtonItem appearance] setBackgroundImage:button30 forState:UIControlStateNormal 
    barMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearance] setBackgroundImage:button24 forState:UIControlStateNormal 
    barMetrics:UIBarMetricsLandscapePhone];
 
[[UIBarButtonItem appearance] setTitleTextAttributes:
    [NSDictionary dictionaryWithObjectsAndKeys:
        [UIColor colorWithRed:220.0/255.0 green:104.0/255.0 blue:1.0/255.0 alpha:1.0], 
        UITextAttributeTextColor, 
        [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0], 
        UITextAttributeTextShadowColor, 
        [NSValue valueWithUIOffset:UIOffsetMake(0, 1)], 
        UITextAttributeTextShadowOffset, 
        [UIFont fontWithName:@"AmericanTypewriter" size:0.0], 
        UITextAttributeFont, 
        nil] 
    forState:UIControlStateNormal];

 

 

Add the following code to the end of customizeAppearance:

UIImage *button30 = [[UIImage imageNamed:@"button_textured_30"] 
    resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 5)];
UIImage *button24 = [[UIImage imageNamed:@"button_textured_24"] 
    resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 5)];
[[UIBarButtonItem appearance] setBackgroundImage:button30 forState:UIControlStateNormal 
    barMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearance] setBackgroundImage:button24 forState:UIControlStateNormal 
    barMetrics:UIBarMetricsLandscapePhone];
 
[[UIBarButtonItem appearance] setTitleTextAttributes:
    [NSDictionary dictionaryWithObjectsAndKeys:
        [UIColor colorWithRed:220.0/255.0 green:104.0/255.0 blue:1.0/255.0 alpha:1.0], 
        UITextAttributeTextColor, 
        [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0], 
        UITextAttributeTextShadowColor, 
        [NSValue valueWithUIOffset:UIOffsetMake(0, 1)], 
        UITextAttributeTextShadowOffset, 
        [UIFont fontWithName:@"AmericanTypewriter" size:0.0], 
        UITextAttributeFont, 
        nil] 
    forState:UIControlStateNormal];

Add the following code at the bottom of customizeAppearance to take care of the back bar button item:

UIImage *buttonBack30 = [[UIImage imageNamed:@"button_back_textured_30"] 
    resizableImageWithCapInsets:UIEdgeInsetsMake(0, 13, 0, 5)];
UIImage *buttonBack24 = [[UIImage imageNamed:@"button_back_textured_24"] 
    resizableImageWithCapInsets:UIEdgeInsetsMake(0, 12, 0, 5)];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:buttonBack30 
    forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:buttonBack24 
    forState:UIControlStateNormal barMetrics:UIBarMetricsLandscapePhone];

Customizing UITabBar

 

UIImage *tabBackground = [[UIImage imageNamed:@"tab_bg"] 
    resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[[UITabBar appearance] setBackgroundImage:tabBackground];
[[UITabBar appearance] setSelectionIndicatorImage:
        [UIImage imageNamed:@"tab_select_indicator"]];

 

Customizing UISlider

 

UIImage *minImage = [[UIImage imageNamed:@"slider_minimum.png"] 
    resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 0)];
UIImage *maxImage = [[UIImage imageNamed:@"slider_maximum.png"] 
    resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 0)];
UIImage *thumbImage = [UIImage imageNamed:@"thumb.png"];
 
[[UISlider appearance] setMaximumTrackImage:maxImage 
    forState:UIControlStateNormal];
[[UISlider appearance] setMinimumTrackImage:minImage 
    forState:UIControlStateNormal];
[[UISlider appearance] setThumbImage:thumbImage 
    forState:UIControlStateNormal];

Customizing UISegmentedControl

 

UIImage *segmentSelected = 
    [[UIImage imageNamed:@"segcontrol_sel.png"] 
        resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 15)];
UIImage *segmentUnselected = 
    [[UIImage imageNamed:@"segcontrol_uns.png"] 
        resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 15)];
UIImage *segmentSelectedUnselected = 
    [UIImage imageNamed:@"segcontrol_sel-uns.png"];
UIImage *segUnselectedSelected = 
    [UIImage imageNamed:@"segcontrol_uns-sel.png"];
UIImage *segmentUnselectedUnselected = 
    [UIImage imageNamed:@"segcontrol_uns-uns.png"];
 
[[UISegmentedControl appearance] setBackgroundImage:segmentUnselected 
    forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[[UISegmentedControl appearance] setBackgroundImage:segmentSelected 
    forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];
 
[[UISegmentedControl appearance] setDividerImage:segmentUnselectedUnselected 
    forLeftSegmentState:UIControlStateNormal 
    rightSegmentState:UIControlStateNormal 
    barMetrics:UIBarMetricsDefault];
[[UISegmentedControl appearance] setDividerImage:segmentSelectedUnselected 
    forLeftSegmentState:UIControlStateSelected 
    rightSegmentState:UIControlStateNormal 
    barMetrics:UIBarMetricsDefault];
[[UISegmentedControl appearance] 
    setDividerImage:segUnselectedSelected 
    forLeftSegmentState:UIControlStateNormal 
    rightSegmentState:UIControlStateSelected 
    barMetrics:UIBarMetricsDefault];

 

Customizing UISwitch

add the following code to set the tint color in the viewDidLoad method of DetailViewController:

[rentSwitch setOnTintColor:[UIColor colorWithRed:0 green:175.0/255.0 blue:176.0/255.0 alpha:1.0]];

 

Customizing UITextField

- (void)drawRect:(CGRect)rect
{
    UIImage *textFieldBackground = [[UIImage imageNamed:@"text_field_teal.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15.0, 5.0, 15.0, 5.0)];
    [textFieldBackground drawInRect:[self bounds]];
}

Congratulations – the detail view is complete!