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