Web developers are familiar with the importance of Cascading Style Sheets when developing HTML5 apps. The basic premise is simple, standard look and feel of the elements can be described separately in a CSS definition file and without changing a lot of other code, or simply by applying a different CSS file, you can alter the presentation and the user interface.
When designing native iOS apps for iPhone and iPad, usually the teams are small and style guides can be communicated and followed easily within a project. However, as we implement more enterprise mobile apps where such style guides are perhaps already established for mobile web and other brand marketing material – converting those into meaningful and reusable iOS components can be a challenge.
In this post we look at three such frameworks which bring in the web development concepts to native programming in iOS and how they could assist in accomplishing the reusable user interface components.
1. NUI : This iOS framework lets you style iOS apps with a style sheet, similar to CSS. This framework is an interesting concept and now is one of the most watched repositories on GitHub. This framework has a very active commit history with newer styles properties being added on a continuous basis.
It allows app developers to specify common styles such as
@primaryFontName: AppleGothic;
@secondaryFontName: HelveticaNeue-Light;
and create reusable style components such as
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;
}
As you can see, this may immediately be superior to this code:
@property(nonatomic,retain) UIColor *tintColor
– (void)setBackgroundImage:(UIImage *)backgroundImage forState:(UIControlState)state barMetrics:(UIBarMetrics)barMetrics
– (void)setBackgroundVerticalPositionAdjustment:(CGFloat)adjustment forBarMetrics:(UIBarMetrics)barMetrics
– (void)setTitlePositionAdjustment:(UIOffset)adjustment forBarMetrics:(UIBarMetrics)barMetrics
– (void)setBackButtonBackgroundImage:(UIImage *)backgroundImage forState:(UIControlState)state barMetrics:(UIBarMetrics)barMetrics
– (void)setBackButtonTitlePositionAdjustment:(UIOffset)adjustment forBarMetrics:(UIBarMetrics)barMetrics
– (void)setBackButtonBackgroundVerticalPositionAdjustment:(CGFloat)adjustment forBarMetrics:(UIBarMetrics)barMetrics
It also makes the your programming brain separate style concerns from other Objective-C code. And this makes puppies smile everywhere.
2. UISS – UIKit Style Sheets : The second framework we will examine takes a similar approach but uses JSON based style definitions which can be defined and reused. I know what you are thinking, “wow, so can i just change the styles on the fly based on a REST web service that is responsible for providing these styles to my app?” well, yes you can… yes you can.
UISS replaces the UIAppearance code with a simple JSON dictionary. Using this framework allows you to change the app styles without rebuilding, restarting or reloading the views!! According to the author “this is the sexy feature of UISS”
[[UITabBar appearance] setTintColor:[UIColor darkGrayColor]]
can be defined as
{
“UITabBar”: {
“tintColor”: “darkGray”,
}
}
3. Nimbus Framework: This is another open source framework supporting the basic CSS properties for defining iOS styles. The syntax is more CSS-like and there is a comprehensive set of properties supported. The core architecture however, is slightly different. It works by detecting changes to CSS files in your project, notifying the app of the changes, and then sending the changed CSS files for the app to then re-apply to any related user interface components.
UINavigationBar {
-ios-tint-color: orange;
}
.background {
background-color: blue;
}
.noticeBox {
background-color: rgba(32, 32, 32, 0.5);
border-radius: 10px;
border: none;
}
Conclusion: As enterprises evolve their mobile portfolio and create multiple apps, using some of these frameworks can alleviate the pain of having to repeat the style guidelines in each individual ViewController or even the project. You can start building the foundation of the reusable UI style framework specific to your organization that can be leveraged by multiple app projects.
