iPhone | iPad | iOS | How To Customize the appearance of UIControls in an IPhone & iPad App using UIAppearance

A new feature of the iOS 5.x SDK is the UIAppearance protocol which allows a developer to customize the appearance of one UIControl or the whole group of controls. iOS 5 has introduced a whole new palette of properties to let you personalize the controls in your apps. The additions empower you with a fine grained control over the appearance of a wide tool set of common controls and navigation items.

Many of the UI Objects that we work with have an appearance proxy that implements the UIAppearance protocol to allow a developer to tweak the appearance of the various UI elements like buttons, navigation bars, textfields and sliders amongst others.

You can apply a formatting value to a supported item or to an item with a supported container. To apply an appearance customization to an item you would use the appearance method of the UIAppearance API. To customize an item that is contained in a container like a UIViewController or an UITabBar.

Here is a List of Supported UIControls:


  1. UIActivityIndicatorView
  2. UIAlertView
  3. UIBarButtonItem
  4. UIBarItem
  5. UINavigationBar
  6. UIPopoverController
  7. UIProgressView
  8. UISearchBar
  9. UISegmentedControl
  10. UISlider
  11. UISwitch
  12. UITabBar
  13. UITabBarItem
  14. UIToolbar
  15. UIView
  16. UIViewController

Create a Sample App

To illustrate how to use the UIAppearance protocol I will build a simple app that has UIControls with altered appearances. For example, you could change the color of an instance of the UIButton class by using the appearanceWhenContainedIn and by defining a custom color as in listing 1.

Once the project is setup, open the storyboard and add the following UI controls as in figure 1 above:

  • an UISwitch controller
  • an UIToolbar
  • an UINavigationBar
  • an UINavigationItem

There is no need to create any IBOutlets or IBActions since this example only changes the appearance of the controls.

Code Listing 1 - Implementing the SetUIAppearance Sample Method

-(void)SetUIAppearance
{
   UIColor * CustomColor = [UIColor colorWithRed:0.4  green:0.2 blue:.1 alpha:1];
    
    [[UISwitch appearance] setOnTintColor:CustomColor];
    [[UIBarButtonItem appearance] setTintColor:[UIColor orangeColor]];
    [[UINavigationBar appearanceWhenContainedIn:[klViewController class], nil] setTintColor:CustomColor];
    [[UIToolbar appearanceWhenContainedIn:[klViewController class], nil] setTintColor:[UIColor blueColor]];    
} 

In code listing 1 above, I start out by defining a UIColor object which will be used to modify the color of the supported UI controls. This is handy if you would need to apply a single color to a group of UIControls.

The second line of code sets the appearance proxy for an UISwitch object and sets the color using the setOnTintColor method of the UISwitch control. This will change the color of every UISwitch control on the storyboard.

The next line of code sets the color of the UINavigationItems to orangeColor, thus providing a specific color for a group of UIControls.

To change the appearance of UI controls when they are contained in another UIControl using the appearanceWhenContainedIn method. This is used for the UIToolbar and UINavigationBar in the preceding code example.


In Summary

The UIAppearance protocol is a handy way to manage the way certain controls appear to the user. This protocol could be used for input validation, changing the appearance of the controls that either missing information or that have incorrect information.

More by this Author


Comments 3 comments

Bruno 4 years ago

the value must be between 0.0 and 1.0 for UIColor


Angela Brummer profile image

Angela Brummer 4 years ago from Lincoln, Nebraska

I could have never figured this out without you!


klanguedoc profile image

klanguedoc 4 years ago from Canada Author

Thank you very much. I always enjoy hearing that my tutorials are helping someone. Good luck with your project.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working