In my app I need to have the ability to re-skin the entire UI based on the type of user who is logged in and the client they belong to. I want the UI to be the same across the board and only a re-skin applied.
There are a variety of ways to achieve this which i will go through then tell you the one i chose using UIButton as an example.
Background image overwrite.
Create high quality background images for each item needed. For a UIButton you would need both a ‘normal’ and a ‘pressed’ image. Also add in @2x retina images. Some free UI packs are available online. Here
This works well when you have a willing and skilled designer who can whip these up in Illustrator and slice them up. You also need a set design that has been agreed upon. This is more of a waterfall approach taken by some design houses. The problem is these images are static and don’t allow easy customization, tweaking or experimentation especially when playing around trying to optimize a UI.
UIAppearance
In iOS 5 UIAppearance was introduced that allowed the default look and feel of an item to be overwritten. This meant you could create a new Appearance for a button and ALL buttons in your app would change to the new look.
Here you see a normal button
UIButton.Appearance.SetTitleColor (UIColor.Brown, UIControlState.Normal);
Added UIAppearance code.
New button look. ALL buttons would now have a brown title.
This is currently how the Xamarin Theme Components implement their styling and there is also the AppearanceWhenContainedIn to specify a specific view to apply the styling to.
The problem with this is the styling information is held in a Theme.cs code file and you cannot easily create multiple button styles.
Essentially there is not enough separation between design information and Structure information for my liking.
What we want is a system like HTML (structure) and CSS (style). WPF did this well loading up different ResourceDictionaries and style attributes. iOS doesn’t do this particularly well so i will need to use a third party library to do this.
Solutions
I have come across the following solutions to this problem that all allow styling of a UI based on stylesheets.
- Pixate – Originally a kickstarter project to solve the design separation program in iOS. Mature and simple. Recently released free.
- NUI – Open source. Native iOS but no direct Xamarin support so require bindings.
In the end I chose Pixate as it seems to be the most mature and simplest to implement. In my next post I will go through a basic tutorial of how i use the system.