mono touch： Appearance API

Introduction to the Appearance API

iOS 5 introduces a new way to style an application, by applying visual property settings at a static class level rather than on individual objects so that the change applies to all instances of that control in the application. This functionality is exposed in Xamarin.iOS via a static Appearance property on all UIKit controls that support it. Visual appearance (properties like as tint color and background image) can therefore be easily customized to give your application a consistent look.

Overview

iOS 5 allows you customize the appearance of many UIKit controls to make the standard controls conform to the branding you wish to apply to your application.

There are three different ways to apply a custom appearance:

Directly on a control instance – you can set the tint color, background image and title position (as well as some other attributes) on many controls including toolbars, navigation bars, buttons and sliders.

Set defaults on the Appearance static property – customizable attributes for each control are exposed via the Appearance static property. Any customizations you apply to these properties will be used as the default for any control of that type that is created after the property is set.

Set defaults that only apply within specific Types – using the AppearanceWhenContainedIn static method you can access an Appearance class that lets you customize the control only when it is contained in the given type – such as setting specific default values for buttons only when they appear in a navigation bar.

The Appearance sample application demonstrates all three methods, as shown in these screenshots:

Requirements

Using Xamarin.iOS with iOS 5 requires XCode 4.2 and the iOS 5 SDK from Apple, with Xamarin Studio 2.8 andXamarin.iOS 5.0.

Setting Appearance Properties

In the first screen, the static Appearance class is used to style the buttons and yellow/orange elements like this:

// Set the default appearance values
UIButton.Appearance.TintColor = UIColor.LightGray;
UIButton.Appearance.SetTitleColor(UIColor.FromRGB(0,127,14), UIControlState.Normal);
UISlider.Appearance.ThumbTintColor = UIColor.Red;
UISlider.Appearance.MinimumTrackTintColor = UIColor.Orange;
UISlider.Appearance.MaximumTrackTintColor = UIColor.Yellow;
UIProgressView.Appearance.ProgressTintColor = UIColor.Yellow;
UIProgressView.Appearance.TrackTintColor = UIColor.Orange;

The green element styles are set like this, which overrides the default values and the Appearance static class:

slider2.ThumbTintColor = UIColor.FromRGB (0,127,70); // dark green
slider2.MinimumTrackTintColor = UIColor.FromRGB (66,255,63);
slider2.MaximumTrackTintColor = UIColor.FromRGB (197,255,132);

progress2.ProgressTintColor = UIColor.FromRGB (66,255,63);
progress2.TrackTintColor = UIColor.FromRGB (197,255,132);

Using AppearanceWhenContainedIn

The second and third screens use the same UIView subclass (PlainView) in conjunction with AppearanceWhenContainedIn to style the view differently. The code below is for the ‘Black’ theme:

var style = UIButton.AppearanceWhenContainedIn(typeof(BlackViewController), typeof(PlainView));
style.SetTitleColor(UIColor.Black, UIControlState.Normal);
var style1 = UISlider.AppearanceWhenContainedIn(typeof(BlackViewController), typeof(PlainView));
style1.ThumbTintColor = UIColor.DarkGray;
style1.MaximumTrackTintColor = UIColor.Gray;
style1.MinimumTrackTintColor = UIColor.LightGray;
var style2 = UIProgressView.AppearanceWhenContainedIn(typeof(BlackViewController), typeof(PlainView));
style2.ProgressTintColor = UIColor.DarkGray;
style2.TrackTintColor = UIColor.LightGray;

Summary

This article introduced the new Appearance API available in iOS 5, and provided a simple example of styling UIKit controls via their Appearance property.