Using UIColor to customize app appearance
UIColor is a subclass of NSObject used to store color and opacity information about an object in the iOS app. The UIColor is declared as shown below.
Colors are the most important aspect to improve our application’s appearance. We can use colors to help users to visualize data. Apple provides several ways to select colors in the app. Two of the most used color identification systems are RGB and HSB. However, programmers mostly use RGB (Red-Green-Blue) color system. The RGB contains the combination of red, green, and blue colors, where each color contains a value between 0 and 255. The 255 represents the full color, whereas 0 represents no color.
The UIColor class manages the colors used in the application. It provides a list of class properties that can specify the system-provided colors for UI elements such as labels, text, buttons, and images. We can also create the colors by specifying the hex code or providing different components from other color objects. We can also create a pattern-based color from an object.
UIColor Methods
The UIColor class provides the following methods to configure the app appearance.
| SN | Method | Description |
|---|---|---|
| 1 | func set() | This function is used to set the color of subsequent stroke and fill operations to the color that the receiver represents. |
| 2. | func setFill() | It is used to set the color of subsequent fill operations to the color that the receiver represents. |
| 3. | func setStroke() | It is used to sets the color of subsequent stroke operations to the color that the receiver represents. |
| 4. | func getHue(UnsafeMutablePointer<CGFloat>?, saturation: UnsafeMutablePointer<CGFloat>?, brightness: UnsafeMutablePointer<CGFloat>?, alpha: UnsafeMutablePointer<CGFloat>?) -> Bool | It returns the components that form the color in the HSB color space. |
| 5. | func getRed(UnsafeMutablePointer<CGFloat>?, green: UnsafeMutablePointer<CGFloat>?, blue: UnsafeMutablePointer<CGFloat>?, alpha: UnsafeMutablePointer<CGFloat>?) -> Bool | It returns the components that form the color in the RGB color space. |
| 6. | func getWhite(UnsafeMutablePointer<CGFloat>?, alpha: UnsafeMutablePointer<CGFloat>?) -> Bool | It returns the grayscale components of the color. |
| 7. | func resolvedColor(with: UITraitCollection) -> UIColor | It returns the version of the current color that results from the specified traits. |
UIColor Properties
The UIColor contains the following properties.
| SN | Property | Description |
|---|---|---|
| 1 | var cgColor: CGColor | It represents the Quartz color that corresponds to the color object. |
| 2 | var ciColor: CIColor | It represents the Core Image color that corresponds to the color object. |
| 3 | var accessibilityName: String | It represents a localized description of the color for accessibility attributes. |
Built-in UIColor Presets
Apple provides various built-in color shown below. The built-in colors are accessed with the class variables.
The built-in color can be assigned using the following code.
As we have already mentioned that the built-in colors are the class variables, we can use these colors directly from the UIColor class.
Creating a custom UIColor Object
The UIColor class provides various initializers which can be used to create custom UIColor. It facilitates us to create our color, which will be in-between the built-in colors.
| SN | Initializer | Description |
|---|---|---|
| 1 | init(white: CGFloat, alpha: CGFloat) | It accepts the CGFloat value for the white component (between 0.0 and 1.0) and alpha (between 0.0 and 1.0) |
| 2 | init(hue: CGFloat, saturation: CGFloat, brightness: CGFloat, alpha: CGFloat) | It accepts the CGFloat value for hue, saturation, brightness, and alpha. The CGFloat value exists between 0.0 and 1.0. |
| 3 | init(red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat) | It accepts the CGFloat value for red, green, blue, and alpha. The CGFloat value exists between 0.0 and 1.0. |
| 4 | init(displayP3Red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat) | It accepts the CGFloat value for displayP3Red, green, blue, and alpha. The CGFloat value exists between 0.0 and 1.0. |
| 5 | init(cgColor: CGColor) | It accepts a cgColor which is an instance of CGColor class. |
| 6 | init(patternImage image: UIImage) | It accepts a pattern image of type UIImage. |
| 7 | init(ciColor: CIColor) | It accepts a ciColor which is an object of CIColor class. |
We can use the UIColor initializer to build a custom color object, as shown below.
Example
Let’s create an iOS app to demonstrate how we can use UIColor objects to configure the application’s appearance.
We will use UISlider in our app. We can control the red, green, and blue components by changing the values of the slider. The interface builder of the app is shown below.
Let’s create the outlets for red, green, and blue sliders. We will also create the action outlet for the sliders, which will be triggered when the value for the sliders will be changed.
Add the following code in ViewController.swift.
Now, run the app on the simulator and see the result as shown below. The background color of the view will be changed as we move the sliders.
