Skinnable Apps Part 1: iOS

Charles Berlin is a Senior Mobile Software Engineer for Mindgrub.

A skinnable app is an app that has the same functionality and code base, but contains different assets (images, text, etc) and content. Creating a skinnable app using Xcode for an iOS application is actually quite easy as long as you plan ahead.

Before you begin coding you need to get a handle on what is different between each app and what will stay the same. This will most likely be images, copy, urls, or a combination of the three.  

As an example I have created a small skinnable app that shows a news website’s name, logo, and webpage which has a different colored background for each app.  We will accomplish this by creating an XCode project that contains 3 targets.  A project can contain many targets, which is a set of instructions and files that build a product, each target produces one product.  In the project settings section of XCode you select add target, or click on an already created target and duplicate.   

 

Its important to note here that when you create new targets XCode creates new info.plist files for each target.  Its easier to manage if you delete the new ones, and change the “Info.plist File” setting to reuse the same plist for each target.

After you have created the targets you can begin to add specific resources to the project.  For this app, I require an image for the news website’s logo, and a plist that contains all other details.  Here is an example of my resources.plist file for cnn:   

 

Whether you are creating new files or adding already existing, you must be aware of the target the files are being added to.  For example, here I am adding cnn’s image and resource plist to the cnn target.

The code that loads the images and data from the plist is trivial but included here for completeness:

NSString *path = [[NSBundle mainBundle] pathForResource:@"resources" ofType:@"plist"];

NSDictionary *dictionary = [[NSMutableDictionary alloc]initWithContentsOfFile:path];

NSString *hexString = [dictionary objectForKey:@"color"];

UIColor *backgroundColor = [self colorFromHexString:hexString];

self.view.backgroundColor = backgroundColor;    

NSString *title = [dictionary objectForKey:@"title"];

self.titleLabel.text = title;

NSString *url = [dictionary objectForKey:@"url"];

[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:url]]];

NSString *imageName = [dictionary objectForKey:@"logo"];

UIImage *logo = [UIImage imageNamed:imageName];

self.logoImage.image = logo;

You simply pull the strings out of the plist file and set the objects appropriately in code.  Because the plist is loaded based on the target, and we have named it exactly the same for each target, we will get the appropriate assets per target.

Now that each target has been properly set and contains the necessary resources, we can begin building each product.  As you can see in the scheme menu, we now have all of our targets ready to build.

 

Running each scheme individually gets us the following screens:

 

This is a very simple example to help get setup to create a skinnable app taking advantage of the XCode targeting system.

A new breed of agency

Mindgrub combines creative and technical expertise.  We're visionaries and workhorses, dreamers and doers.  We find and implement solutions for any enterprise striving to thrive on the cutting edge.

...and a new player in gaming.

Let's Talk

five - five =
Solve this math question and enter the solution with digits. E.g. for "two plus four = ?" enter "6".

Connect with Mindgrub