MA2: theming the app

This is the first in a series showing some of the tricks and bits that I used when moving mobileAgent from version 1.x to 2.0.

In mobileAgent 2.0, one of the main changes is that the app has been totally re-skinned. It's almost functionally identical to the previous version, but it has a very different look and feel.

Shot of mobileagent 1.9 vrs 2.0

Some of the things were fairly simple - I already had code from Earnest to do wholesale changes to the monotouch.dialog grouped-style elements, and UIAppearance is an easy way to do UINavigaitonBar and UITabBar items.

Setting the UINavigationBar is as simple as calling

UINavigationBar.Appearance.SetBackgroundImage(UIImage.FromFile('navbar_background.png'), UIBarMetrics.Default);

.. once in your application, and the UITabBar is just as easy

UITabBar.Appearance.SelectionIndicatorImage = UIImage.FromFile('tabbar_selected.png');
UITabBar.Appearance.BackgroundImage = UIImage.FromFile('tabbat_background.png');

Both of these, if needed, can be stretchable images, so you don't need to provide a full-sized image.

var image = UIImage.FromBundle("tabbar_selected.png").CreateResizableImage(new UIEdgeInsets(5,5,5,5));

This will load the image, and then create a wrapper around the image, which "cuts" 5dp off each edge. Anything inside the area will the stretched. The corners will remain the same, and the middle-edges will be stretching in one direction.

This allows you to make a very small image, and reuse it regardless of the size of the final element. It's especially handy for buttons with text. Not every image can be stretched tho - think about how a gradient would stretch vertically if it went from edge to edge - so sometimes you just have to make them full size.

In the next part, I'm going to look at the creation of the assets - the images which makes up the UI.

Xamarin have recently released two themes (Gunmetal and FitPulse) from the AppDesignVault library of themes, so if you want to either try some of the UIAppearance stuff out, or play with the themes, they are there for use by any Xamarin-licensed developer.