User Interface Customization in iOS 6

Changing the UINavigationBar Shadow

One of the new things that was added in iOS 6 was a small shadow underneath the navigation bar that adds a nice little transition from the navigation bar to the content. You also have the ability to customize that shadow to something else. Let see how easy that is to do now.

You already have the image “navBarShadow” and “navBarShadow@2x” added to the project so just add the following line to the bottom of your customizeAppearance method:

[[UINavigationBar appearance] setShadowImage:[UIImage imageNamed:@"navBarShadow"]];

Build and run.

 Viola! Easy, huh? Kinda like a nice cool wave flowing up the sand.

Customizing UIBarButtonItem

Open up the Images directory and look at button_textured_24.png and button_textured_30.png. You want to use these to customize the look and feel of the buttons that appear in the UINavigationBar.

Notice that we’re going to set up these button images as resizable images. It’s important to make them resizable because the button widths will vary depending on what text is inside.

For these buttons, you don’t want the 5 leftmost pixels to stretch, nor the 5 rightmost pixels, so you’ll set the left and right cap insets to 5. The pixels in between will repeat as much as is needed for the width of the button.

Let’s try this out! You’ll use the appearance proxy to customize all the UIBarButtonItems at once, like you did last time. 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];

This looks familiar. You create the stretchable images for the buttons and set them as the background for both display in both portrait & landscape orientation. You then format the text to match the typewriter-style font you saw at the outset of the tutorial.

Note you can set different images for different types of buttons such as the “Done” type.

The “back” bar button item needs special customization, because it should look different – like it’s pointing backwards. Take a look at the images we’re going to use to see what I mean: Images\button_back_textured_24.png and Images\button_back_textured_30.png.

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];

Note that you use different cap inset values because the back image has a wider left hand side that shouldn’t stretch. Also note that there is a separate property on UIBarButtonItem for “backButtonBackgroundImage” that you use here.

Compile and run, and you should now see some cool customized UIBarButtonItems in your UINavigationBar!

Customizing UITabBar

To customize a UITabBar, iOS 5 offers an API to let you change the background image of the toolbar, and the image to indicate the selected item. Take a look at Images\tab_bg.png and Images\tab_select_indicator.png to see the images you’ll use for these.

Although your mockups only depict one UITabBar, these will in all likelihood have the same appearance if others appear, so you’ll use the appearance proxy to customize this as well.

Add the following code to the bottom of customizeAppearance:

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

Compile and run again…nice! The background and selected image are nice touches.

Note you can also specify “finished” and “unfinished” images if you wish to modify the manner in which the selected & unselected images appear.

Customizing UISlider

Open up Images\slider_minimum.png, Images\slider_maximum.png, and Images\thumb.png to see the images that we’re going to use to customize the UISlider.

iOS 5 makes it ridiculously easy to customize the UISlider by just setting the “maximumTrackImage”, “minimumTrackImage”, and “thumbImage” properties of a UISlider.

Let’s try it out. Add the following code to the bottom of customizeAppearance:

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];

Compile and run, and check out your cool and stylish UISlider!

Customizing UISegmentedControl

Now you’ll customize your segmented control. This component is a little bit more complicated, as you have both selected & unselected backgrounds, as well as varying states for the adjacent regions (e.g., selected on left, unselected on right; unselected on the left & selected on the right; unselected on both sides).

Take a look at the images you’ll use for this to see what I mean: Images\segcontrol_sel.png, Images\segcontrol_uns.png, Images\segcontrol_sel-uns.png, and Images\segcontrol_uns-uns.png.

Then add the code to make use of these to the bottom of customizeAppearance:

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];

Compile and run, and now your UISegmentedControl has a completely different look!

Customizing UISwitch

In iOS 5 you only had the ability to customize the tint of the On side of the switch (which was kinda a weird decision if you ask me). But luckily in iOS 6 you now have access to the Off side and the thumb (middle) part.

So, add the following code to set the tint colors customizeAppearance method:

[[UISwitch appearance] setOnTintColor:[UIColor colorWithRed:0 green:175.0/255.0 blue:176.0/255.0 alpha:1.0]];
[[UISwitch appearance] setTintColor:[UIColor colorWithRed:1.000 green:0.989 blue:0.753 alpha:1.000]];
[[UISwitch appearance] setThumbTintColor:[UIColor colorWithRed:0.211 green:0.550 blue:1.000 alpha:1.000]];

Compile and run, and check out your newly colored switch!

The switch fits the look now but “ON” and “OFF” don’t really make sense. I mean if someone someone asked you if you’d like a glass of water and you said “ON”, they’d probably look at you kinda weird. Well, it just so happens that in iOS 6 you also gained the ability to customize the images inside of the switch as well. It’s not text, but if you make an image that is text, it works just as well. Add the following lines at the end of the customizeAppearance method:

[[UISwitch appearance] setOnImage:[UIImage imageNamed:@"yesSwitch"]];
[[UISwitch appearance] setOffImage:[UIImage imageNamed:@"noSwitch"]];

Now the switch says “Yes/No” instead of “On/Off”! You could change this to an icon if you’d like too.

Things are looking pretty good, but you still have a couple of items outstanding. You need to update the labels and set the background of your custom UITextField.