Xcode 9 and Swift 4 making colours easier

Produced by Sip showing Tea shades
Produced by Sip showing Tea shades

Colour is important. It’s important in many areas of life, but particularly in graphic design and products.

I’ve been learning to code for a few months now and coming from a graphic design background I’ve found colour management in Xcode and Swift hard to work with.

There are add-ons and solutions to make it easier. For example I’ve found the Sip App invaluable as it allows me to gather colours and easily copy the RGB or Hex code.

But it’s still a little clunky, especially as you can’t easily call a colour you created in code from the Storyboard and I like working with the storyboard as it makes layout easier.

Xcode 9 and Swift 4 have a solution to that problem and it comes in the increasingly powerful XCAssets library.

As well as creating image objects, you can now declare colours (or colors) within that library. You can then group them into a folder for easier organisation.

So if I was developing an app for say EasyJet (thinking of a brand with a clear colour set) then I’d create the EasyJet colour folder and within it declare three colours — EasyJet Orange, EasyJet Grey and EasyJet Black.

EasyJet Colours
EasyJet Colours

I could then either call EasyJet Orange from within Storyboard editor when setting a new object or write UIColor(named: EasyJet Orange) in code.

No need for any new UIColor extension files to declare a new range of colours and it makes it easier for a designer to just send you a new colour set.

EasyJet Colour Set within XCAssets
EasyJet Colour Set within XCAssets
The same colours available within the Storyboard
The same colours available within the Storyboard

You just change the RGB or Hex within the XCAssets library for that colour name and it changes it everywhere — in code files and in the storyboard.

Just as a quick example here is some code to make a button pretty using the new UIColor(named:) method within Xcode 9.

func prettyButtons(_ button: UIButton) {
button.backgroundColor = UIColor(named: "EasyJet Orange")
button.layer.cornerRadius = 5.0
}

As you can see I like a nice rounded button — so much so that one of the first things I normally do when building myself an app is to create a UIButton extension with that cornerRadius code. I then apply that to every button I use in my apps.

I’ll write about a new music player app I built for myself with a simple Shuffle function like an old iPod later — which uses both rounded buttons and the brilliant MusicKit.

You’d then just call the code above within ViewDidLoad and put the name of the button you’ve imported as an @IBOutlet within the () at the end.

@IBOutlet weak var myButton: UIButton! 

override func viewDidLoad() {
super.viewDidLoad()
prettyButtons(myButton)
}

Then myButton will be orange with slightly rounded edges as you could see in the image above.

It’s a huge improvement to Xcode — along with a number of others — that make the life of a developer much easier.

I personally still don’t really consider myself a developer, I’m very much still at the early learning stage and have only really been writing in Swift for about three months — but I’m having a lot of fun and enjoying the design and creative side of it too.

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.