iOS

Autocompleting UIColors from the Xcode Asset Library

Xcode 9 introduced a nice new feature that allows you to now add colors to your Asset library. It’s a very visual and easy way to keep your color palette 🎨 organized. (If you’re not familiar with how to add colors to your library, it’s very straightforward. Check out this great Zeplin tutorial on how to do it.)

There was even a useful convenience initializer added so that you can call your newly named colors in code.

let color = UIColor.init(named: "headerBlue")

I started adopting this in my team’s codebase, but the main gripe I have with it is that Xcode doesn’t currently autocomplete these named colors. It seems like they were meant more for use in Storyboards, as they’re quite easy to access there.

As a developer, it’s very easy to mistakenly type the color name wrong and end up with no color to show. Even worse, if your team, like mine, has an extremely large color palette, it can be hard to remember exactly which shade of green is the one your designer wanted 🤷🏻‍♀️.

Here are a couple of options to make using named colors in code easier:

The Zeplin tutorial that I linked to earlier suggested adding extensions to UIColor like so:

extension UIColor {
   @nonobjc class var headerBlue: UIColor {
      return UIColor(named: "headerBlue")
   }
}

It can be quite a bit of typing though unless you use their generated file.

Another solution I thought of was to create a Colors enum that holds all of your color names for you (corresponding with your named colors in your asset folder).

enum Colors: String {
   case backgroundGray
   case errorRed
   case headerBlue
   case highlightYellow
}

Then, in your code, you can use it like this:

let headerBackgroundColor = UIColor.init(named: Colors.headerBlue.rawValue)

The main thing to watch out for is that case sensitivity matters here so you’ll either have to make sure your colors are named exactly the same between the asset catalog and your enum cases, or you can add in a case insensitive attribute to your string.

Either way, your named colors will be an autocomplete suggestion away, rather than a plain string that’s easy to make a spelling error on. Hopefully, Apple will come out with a way to autocomplete these names in the future so we won’t have to add this extra safety check anymore.

Do you have other autocompleting suggestions? Would love to hear your stories in the comments! 👩🏻‍🎨🎨🖌

1 thought on “Autocompleting UIColors from the Xcode Asset Library”

  1. Hi Kristina!

    Thanks for this nice article. This tool is very cool, indeed. And I think it’s a must-have that all projects should start implementing, as it’s a neat way to keep colors organized. Unfortunately, it’s available only as of iOS 11, so, there is an if statement check that you have to write if your app has to support older versions, in which case it makes the tool kind of useless. In my case, I still have to support iOS 10, so I guess I’ll have to wait until the next iOS major release to be able to use it properly 🙂

    I’ve recently written about colors in Xcode too: https://medium.com/@volbap/working-efficiently-with-colors-in-xcode-bc4c58b16f9a

    Maybe you want to take a look. There is this guy who suggested a tool that can be used to ease color management too: https://github.com/fernandodelrio/SwiftColorGen

    Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *