UIAppearance Tutorial: Getting Started

Didn’t you wish you could customize your pets?

Didn’t you wish you could customize your pets?

Although skeuomorphism in iOS apps is a thing of the past, that doesn’t mean you’re limited to the stock appearance of controls in your iOS app.

While you can develop your own controls and app stylings from scratch, Apple recommends that you use standard UIKit controls and take advantage of the various customization techniques in iOS. This is because UIKit controls are highly efficient, and your customizations to the controls should be mostly future-proof.

In this UIAppearance tutorial, you’ll use some basic UI customization techniques to customize a plain Pet Finder app and make it stand out from the pack! :]

Getting Started

Download the starter project for this tutorial here. The app has many of the standard UIKit controls and looks extremely vanilla.

Open the project and have a look around to get a feel for its structure. Build and run and you’ll see the main UI elements of Pet Finder:

There’s a navigation bar and a tab bar. The main screen shows a list of pets; tap a pet to see some details about it. As well there’s a search screen and — aha! A screen that allows you to select a theme for your app. That sounds like a pretty good place to start!

Supporting Themes

Many apps don’t allow users to select a theme, and it’s not always advisable to ship an app with a theme selector. If you have little control over the content your app displays then you may quickly find yourself in a position where one of your themes clashes with the content other’s have generated or shared. However, you might want to test different themes during development to see which ones work best for your app, or you might A/B test your app with your beta users to see which style is the most popular.

In this UIAppearance tutorial, you’ll create a number of themes for your app that you can try out to see which one is most aesthetically pleasing.

Select File\New\File… and choose iOS\Source\Swift File. Click Next and type Theme as the name of the file. Finally click Next, followed by Create. Xcode automatically opens your new file, which contains just a single line of code.

Delete the single line and replace it with the following:

import UIKit

enum Theme {
  case Default, Dark, Graphical
  
  var mainColor: UIColor {
    switch self {
    case .Default:
      return UIColor(red: 87.0/255.0, green: 188.0/255.0, blue: 95.0/255.0, alpha: 1.0)
    case .Dark:
      return UIColor(red: 242.0/255.0, green: 101.0/255.0, blue: 34.0/255.0, alpha: 1.0)
    case .Graphical:
      return UIColor(red: 10.0/255.0, green: 10.0/255.0, blue: 10.0/255.0, alpha: 1.0)
    }
  }
}

This adds an enum with the different themes for your app. For now, all themes only have a mainColor that’s specific to that particular theme.

Next, add the following struct:

struct ThemeManager {

}

This will let you use a theme in the app. It’s still empty, but that will change soon enough!

Next, add the following line right above the enum declaration:

let SelectedThemeKey = "SelectedTheme"

Now, add the following method to ThemeManager:

static func currentTheme() -> Theme {
  if let storedTheme = NSUserDefaults.standardUserDefaults().valueForKey(SelectedThemeKey)?.integerValue {
    return Theme(rawValue: storedTheme)!
  } else {
    return .Default
  }
}

Nothing overly complex here: this is the main method you’ll use to style the app. It uses NSUserDefaults to persist the current theme, and uses it every time you launch your app.

To test that this works, open AppDelegate.swift and add the following line to application(_:didFinishLaunchingWithOptions):

println(ThemeManager.currentTheme().mainColor)

Build and run. You should the following printed to the console:

UIDeviceRGBColorSpace 0.94902 0.396078 0.133333 1

At this point, you have three themes and can manage them through ThemeManager. Now it’s time to go use them in your app.

Applying Themes to Your Controls

Back in Theme.swift, add the following method to ThemeManager:

static func applyTheme(theme: Theme) {
  // 1 
  NSUserDefaults.standardUserDefaults().setValue(theme.rawValue, forKey: SelectedThemeKey)
  NSUserDefaults.standardUserDefaults().synchronize()

  // 2
  let sharedApplication = UIApplication.sharedApplication()
  sharedApplication.delegate?.window??.tintColor = theme.mainColor
}

Here’s a quick run-through of the above code:

1. You first persist the selected theme using NSUserDefaults.
2. Then you get your current (selected) theme and apply the main color to the tintColor property of your application’s window. You’ll learn more about tintColor in just a moment.

Now the only thing you need to do is to call this method. There’s no better place than in AppDelegate.swift.

Replace the println() statement you added earlier with the following:

let theme = ThemeManager.currentTheme()
ThemeManager.applyTheme(theme)

Build and run. You’ll see that your new app looks decidedly more green:

Navigate through the app; there are green accents everywhere! But you didn’t change any of your controllers or views. What is this black — er, green — magic?! :]

Applying Tint Colors

Since iOS 7, UIView has exposed the tintColor property, which is often used to define the primary color indicating selection and interactivity states for interface elements throughout an app.

When you specify a tint for a view, the tint is automatically propagated to all subviews in that view’s view hierarchy. Because UIWindow inherits from UIView, you can specify a tint color for the entire app by setting the window’s tintColor, which is exactly what you did in applyTheme() above.

Click on the Gear icon in the top left corner of your app; a table view with a segmented control slides up, but when you select a different theme and tap Apply, nothing changes. Time to fix that.

Open SettingsTableViewController.swift and add these lines to applyTheme(), just above dismiss():

if let selectedTheme = Theme(rawValue: themeSelector.selectedSegmentIndex) {
  ThemeManager.applyTheme(selectedTheme)
}

Here you call the method you added to ThemeManager, which sets the selected theme’s mainColor on the tintColor property of the root UIWindow instance.

Next, add the following line to the bottom of viewDidLoad() to select the theme persisted to NSUserDefaults when the view controller is first loaded:

themeSelector.selectedSegmentIndex = ThemeManager.currentTheme().rawValue

Build and run. Tap the settings button, select Dark, and then tap Apply. The tint in your app will change from green to orange right before your eyes:

Eagle-eyed readers likely noticed these colors were defined in mainColor(), in ThemeType.

But wait, you selected Dark, and this doesn’t look dark. To get this effect working, you’ll have to customize a few more things.