Basic Interface Styling in iOS

Today I want to talk about style. Style is indeed what makes the difference between a good app and a great one. I'm not saying that this tutorial will automatically make your apps look great (you'd certainly need a designer for that), but I'll share some useful tips on how to make it look less anonymous with little effort.

Of course you could have an illustrator provide you with all the needed assets (images and stuff) and then include them in your projects with the UIAppearance protocol Apple APIs provide since iOS 6. But wouldn't it be great if you could apply to your application a 'theme' and style it with some simple CSS-style code? Bear with me and I'll show you the magic...

Pixate

First off, there's Pixate, a project originally backed on KickStarter. Pixate is an iOS framework - currently in private beta - that will be probably released under a commercial license during the first quarter of 2013. Rumors say that it's going to cost around USD 200 per seat. Pixate styles native controls using generated bitmaps, allowing applications to take full advantage of hardware acceleration. In contrast to most asset workflows, the Pixate Engine renders and caches bitmap content dynamically as needed at runtime, providing flexibility and performance. Basically, this means that we can easily style almost any element inside an iOS app just by providing a CSS stylesheet.

For example, if we have a UIButton, we could define it as such:

UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];  
button.frame = CGRectMake(72, 50, 175, 50);  
[button setTitle:@"My Button" forState:UIControlStateNormal];

// Setting the styleId of the button for the CSS
button.styleId = @"myButton";  

Then you would be able to define its style in the .css file:

#myButton {
  color           : white;
  background-color: red;
  border-radius   : 10px;
  border-color    : blue;
  border-width    : 5px;
}

Take a look at the final result:

Pretty cool, huh? If you wanna try out Pixate you can signup here or just wait a couple of weeks before it gets in the wild.

NUI

Alternatively, if you don't want to spend a single dime, you can check out NUI, an open-source project maintained by Tom Benner, here. NUI is a drop-in UI kit for iOS that lets you style UI elements using a CSS-like stylesheet. With NUI you can style an entire app in minutes. The concept is pretty similar to that of Pixate. The difference is in that your UI elements should be declared as being instances of predefined NUI subclasses (NUILargeButton, NUIButton, NUITextField, etc.). Then, inside a .nss file you can define all the styles. The syntax is very CSS-y:

Button {  
    background-color-top: #FFFFFF;
    background-color-bottom: @primaryBackgroundColorBottom;
    border-color: @primaryBorderColor;
    border-width: @primaryBorderWidth;
    font-color: @primaryFontColor;
    font-color-highlighted: @secondaryFontColor;
    font-name: @secondaryFontName;
    font-size: 18;
    height: 37;
    corner-radius: 7;
}
LargeButton {  
    height: 50;
    font-size: 20;
    corner-radius: 10;
}

Here's an example of what you can do. Turn this:

into this:

You can download a sample project here to check it out. To see a list of currently stylable classes and supported properties, take a look at the Github page of the project.