About Tint Color Properties

Tint Color

After iOS 7, UIView added a new tintColor property, which defines a non-default tint color value. The setting of its value will affect the entire view hierarchy with the view as the root view. It is mainly applied to some controls such as app icons, navigation bars, buttons, etc. to obtain some interesting visual effects.

The declaration of the tintColor property is as follows:

 var tintColor: UIColor!

By default, the tintColor of a view is nil, which means that the view will use the tint color value of the parent view. When we specify the tintColor of a view, this color value is automatically propagated to all subviews in the view hierarchy (with the current view as the root view). If the system does not find a non-default tintColor value in the view hierarchy, the system-defined color value (blue, RGB value [0,0.478431,1], which we can see in IB) is used. Therefore, this value always returns a color value, that is, we did not specify it.

Related to the tintColor property is the tintAdjustmentMode property, which is an enumeration value that defines the adjustment mode of the tint color. Its declaration is as follows:

 var tintAdjustmentMode: UIViewTintAdjustmentMode

The definition of enumeration UIViewTintAdjustmentMode is as follows:

 enum UIViewTintAdjustmentMode : Int {
 case Automatic // The view's shading adjustment mode is consistent with the parent view  
 case Normal // The view's tintColor property returns the view's tint color completely unmodified  
 case Dimmed // The view's tintColor property returns a desaturated, darkened view tint color  
 }

Therefore, when the tintAdjustmentMode property is set to Dimmed, the color value of tintColor is automatically dimmed. If we do not find a default value in the view hierarchy, the value defaults to Normal.

There is also a tintColorDidChange method related to tintColor, which is declared as follows:

 func tintColorDidChange()

This method is automatically called when the tintColor or tintAdjustmentMode property of the view changes. In addition, this method is also called if the tintColor or tintAdjustmentMode property of the parent view of the current view changes. We can refresh our view as needed in this method.

Example

Next, let’s take a look at the powerful function of tintColor through an example (the example is plagiarized from an example written by Sam Davies, which can be found in iOS7 Day-by-Day :: Day 6 :: Tint Color. I was responsible for moving bricks and implemented it in Swift. The code can be downloaded here).

Let’s take a look at the final effect first (the following are all stolen pictures, please forgive me, I’m too lazy):

The elements of this interface mainly include UIButton, UISlider, UIProgressView, UIStepper, UIImageView, ToolBar and a custom subview CustomView. Next, let's see what effect changing the view's tintColor will have on these controls.

In the viewDidLoad method of ViewController, we set the following:

 override func viewDidLoad() {
 super .viewDidLoad() 
 
 println( "\(self.view.tintAdjustmentMode.rawValue)" ) // Output: 1  
 println( "\(self.view.tintColor)" ) // Output: UIDeviceRGBColorSpace 0 0.478431 1 1   
 
 self.view.tintAdjustmentMode = .Normal
 self.dimTintSwitch?.on = false   
 
 // Load the image  
 var shinobiHead = UIImage(named: "shinobihead" )
 // Set the rendering mode  
 shinobiHead = shinobiHead?.imageWithRenderingMode(.AlwaysTemplate) 
 
 self.tintedImageView?.image = shinobiHead
 self.tintedImageView?.contentMode = .ScaleAspectFit
 }

First, we try to print the default tintColor and tintAdjustmentMode, which output [UIDeviceRGBColorSpace 0 0.478431 1 1] and 1 respectively. This is the output when we do not set any tint color related values ​​for the entire view hierarchy. You can see that although we did not set tintColor, it still returns the system's default value; and tintAdjustmentMode returns the original value of Normal by default.

Next, we explicitly set the value of tintAdjustmentMode to Normal and set the image and rendering mode of UIImageView.

When we click the "Change Color" button, the following event handling method will be executed:

 @IBAction func changeColorHandler(sender: AnyObject) { 
 
 let hue = CGFloat(arc4random() % 256 ) / 256.0  
 let saturation = CGFloat(arc4random() % 128 ) / 256.0 + 0.5  
 let brightness = CGFloat(arc4random() % 128 ) / 256.0 + 0.5   
 
 let color = UIColor(hue: hue, saturation: saturation, brightness: brightness, alpha: 1.0 )
 self.view.tintColor = color
 updateViewConstraints()
 } 
 
 private func updateProgressViewTint() {
 self.progressView?.progressTintColor = self.view.tintColor
 }

This code mainly generates a color value randomly and assigns it to the tintColor property of self.view, while updating the tintColor value of the progress bar.

Note: The tint color of certain components of some controls is controlled by specific properties. For example, progress has two tint colors: one for the progress bar itself and the other for the background.

Click the "Change Color" button to get the following effect:

As you can see, we did not manually set the color values ​​of UIButton, UISlider, UIStepper, UIImageView, ToolBar and other subviews in the example, but as the color value of the tintColor attribute of self.view changes, the appearance of these controls also changes. That is to say, the change of the color value of the tintColor attribute of self.view affects the appearance of all subviews in the entire view hierarchy with self.view as the root view.

It seems that tintColor is still very powerful.

There is also a UISwitch in the interface, which is used to turn on and off the dim tint function. The corresponding processing method is as follows:

 @IBAction func dimTimtHandler(sender: AnyObject) {
 if let isOn = self.dimTintSwitch?.on { 
 
 self.view.tintAdjustmentMode = isOn ? .Dimmed : .Normal
 } 
 
 updateViewConstraints()
 }

When tintAdjustmentMode is set to Dimmed, the actual effect is that the entire color value becomes darker (there is no picture to steal here).

In addition, we rewrite the tintColorDidChange method in the subview CustomView to listen to the changes in tintColor to update our custom view. Its implementation is as follows:

 override func tintColorDidChange() {
 tintColorLabel.textColor = self.tintColor
 tintColorBlock.backgroundColor = self.tintColor
 }

Therefore, the color of the box and "Tint color label" changes with the tintColor of the subview, and the tintColor of the subview is inherited from the parent view.

In this example, the most interesting part is the image processing. The image processing is relatively simple and crude. For a pixel, if its alpha value is 1, its color is set to tint color; if it is not 1, it is set to transparent. This is how the ninja avatar in the example is processed. However, we need to set the imageWithRenderingMode property of the image to AlwaysTemplate, so that when rendering the image, it will be rendered as a template and its color information will be ignored, as shown in the code:

var shinobiHead = UIImage(named: "shinobihead")

// Set the rendering mode

shinobiHead = shinobiHead?.imageWithRenderingMode(.AlwaysTemplate)

Off topic

A digression that has little to do with the topic.

In color theory, a tint color is a mixture of a color and white. Similar to this are shade color and tone color. Shade color is a mixture of a color and black, and tone color is a mixture of a color and gray. They are all based on Hues. The effects of these color values ​​are shown in the following figure:

For some basic theoretical knowledge, you can refer to Hues, Tints, Tones and Shades: What's the Difference? or some more professional articles.

summary

If we want to specify the tint color of the entire App, we can set the tint color of the window. In this way, all subviews under the same window will inherit this tint color.

When an alert or action sheet pops up, iOS7 will automatically darken the tint color of the view behind it. At this time, we can override the tintColorDidChange method in the custom view to perform the desired operation.

Some complex controls can have multiple tint colors, with different tint colors for different parts of the control, such as the UIProgressView mentioned above, as well as navigation bars, tab bars, toolbars, search bars, scope bars, etc. The background tint color of these controls can be handled using the barTintColor property.