Make App Pie

Training for Developers and Artists

UIColor Class Extensions

A couple of weeks ago, I added  a column on converting hex colors to UIColor. That was a function you had to copy and paste into your code. I’ve also shown you how to use the assets to keep color names handy. What would be even better is to do all that directly from UIColor. For that you uses extensions.
Extensions have many uses, but basically they add functionality to a class, very often a class you can’t change such as UIColor. You can have a separate file with the extension, and that can be ported to any new project.
Download the starter project. I’ve set it up with the hex color function in the view controller to change the background color of the app. You’ll see in the view controller, I set the color of the background to yellow. But I’d like to use four colors of a pizza, Tomato,Cheese,Crust and Burnt Crust. I’d like to use tomato in this declaration like this:

view.backgroundColor = UIColor.tomato

Since UIColor is assumed for a backgroundColor, I can shorten that to

view.backgroundColor = .tomato

To do that, I’ll make an extension. Go to File>New file in Xcode and for iOS select Swift file. Save the file as UIColorExt. Change the import to UIKit,

import UIKit

Add the extension with the keyword extension, and the class you will be extending, in our case UIColor

extension UIColor{

}

In this extension you can add code that you use in UIColor, with some limitations. Due to the nature of UIColor, most of those are class methods and computed properties. For example, I’ll add a computed property to make a tomato color,

class var tomato:UIColor{return self.init(red:0.67, green:0.0, blue:0.0, alpha: 1.0)}

You’ll be referring to the class you are making here in the extension, so you use self. I’ll as have to call init and manually add the red:green:blue:alpha initializer. The error disappears as .tomato is now a UIColor. Run and you get a red background.
You can add class methods too. You’ll find a version of the hex color function in the view controller. To learn how to use it, check out this tip.

Cut that and paste it in the extension.

We’ll make this a class function, so add class in front of func. Also change the UIColor in the return to self.init

class func hexColor(_ hexColorNumber:UInt32, alpha: CGFloat) -> UIColor {
    let red = (hexColorNumber & 0xff0000) >> 16
    let green = (hexColorNumber & 0x00ff00) >> 8
    let blue = (hexColorNumber & 0x0000ff)
    return self.init(red: CGFloat(red) / 255, green: CGFloat(green) / 255, blue: CGFloat(blue) / 255, alpha: alpha)
}

I can use this in the extension and outside of it. I’ll make another computed property for cheese and crust using it:

class var cheese:UIColor{return self.hexColor(0xfdff54, alpha: 1.0)}
class var crust:UIColor{return self.hexColor(0xe39448, alpha: 1.0)}

I’ll go back to the ViewController  class and make a constant for burntCrust in viewDidLoad

let burntCrust = UIColor.hexColor(0x251a08, alpha: 1.0)

And then assign burntCrust to the backgroundcolor.

view.backgroundColor = burntCrust

Build and run and the background turns dark brown.  I can change to the yellowish cheese color like this:

view.backgroundColor = .cheese

Run and you get a yellow background.

This is only a small slice of all you can do with extensions, but using class methods and computed properties are among the easiest.

The Whole Code

 

UIColorExt.swift

//
//  UIColor Extension
//
//  A Demo for iOS Development Tips Weekly
//  by Steven Lipton (C)2018, All rights reserved
//  For videos go to http://bit.ly/TipsLinkedInLearning
//  For code go to http://bit.ly/AppPieGithub
//

import UIKit
extension UIColor{
    //Colors are computed class properties. To refrence the class, use self
    class var tomato:UIColor{
        return self.init(red:0.67,green:0.0,blue:0.0,alpha: 1.0)
    }

    class var cheese:UIColor{
        return self.hexColor(0xfdff54, alpha: 1.0)
    }

    class var crust:UIColor{
        return self.hexColor(0xe39448, alpha: 1.0)
    }

    //The hexColor method is a class method taking a UInt32 and alpha value and returns a color. See http://bit.ly/HexColorsWeb onhow it works.

    class func hexColor(_ hexColorNumber:UInt32, alpha: CGFloat) -> UIColor {
        let red = (hexColorNumber & 0xff0000) >> 16
        let green = (hexColorNumber & 0x00ff00) >> 8
        let blue =  (hexColorNumber & 0x0000ff)
        return self.init(red: CGFloat(red) / 255, green: CGFloat(green) / 255, blue: CGFloat(blue) / 255, alpha: alpha)
    }
}

Viewcontroller.swift

//
//  UIColor Extension
//
//  A Demo for iOS Development Tips Weekly
//  by Steven Lipton (C)2018, All rights reserved
//  For videos go to http://bit.ly/TipsLinkedInLearning
//  For code go to http://bit.ly/AppPieGithub
//

import UIKit

class ViewController: UIViewController {
   //Using the hexColor extension in an assignment
   let burntCrust = UIColor.hexColor(0x251a08, alpha: 1.0)

    override func viewDidLoad() {
        super.viewDidLoad()
        // Since backgroundColor assumes a UIColor, you can use a dot and the color property
        view.backgroundColor = .cheese
    }
}

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: