Detailed UIView Tint Color property

Http://www.cocoachina.com/ios/20150703/12363.html

After iOS 7, UIView adds a new Tintcolor attribute that defines a non-default shading color value whose setting affects the entire view hierarchy with view as the root view. It is mainly applied to some controls, such as app icons, navigation bars, buttons, etc., to get some interesting visual effects.

The declaration of the Tintcolor property is as follows:

1	vartintColor: 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, the color value is automatically propagated to all the sub-views in the view hierarchy (in 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 values (blue, RGB values [0,0.478431,1], which we can see in IB) are used. Therefore, this value always returns a color value, that is, we do not specify it.

There is also a Tintadjustmentmode property associated with the Tintcolor property, which is an enumeration value that defines the adjustment mode for tint color. The statement is as follows:

1	vartintAdjustmentMode: UIViewTintAdjustmentMode

The enumeration Uiviewtintadjustmentmode is defined as follows:

12345

enum uiviewtintadjustmentmode  : int {      Case  automatic           //  View's shading adjustment mode is consistent with the parent view       case  normal               //  The Tintcolor property of the view returns a completely unmodified view shading color      case  dimmed               }

Therefore, when the Tintadjustmentmode property is set to dimmed, the color value of Tintcolor is dimmed automatically. And if we don't find the default value in the view hierarchy, the value defaults to normal.

There is also a Tintcolordidchange method associated with Tintcolor, which declares the following:

1	func tintColorDidChange()

This method is called automatically when the Tintcolor or Tintadjustmentmode property of the view changes. Also, this method is 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

Let's take a look at the powerful features of Tintcolor in the following example (example of a Sam Davies write, which can be viewed iOS7 day-by-day:: Day 6:: Tint Color, I was responsible for moving bricks, using swift to achieve a bit, The code can be downloaded here).

First look at the final effect (the following are the Pirates, please forgive me, too lazy):

The interface contains elements such as UIButton, UISlider, Uiprogressview, Uistepper, Uiimageview, toolbar, and a custom sub-view CustomView. Next we'll look at how the Tintcolor of the modified view will affect these controls.

In Viewcontroller's Viewdidload method, we set the following:

1234567891011121314151617

override func viewDidLoad() {    super.viewDidLoad()    println("\(self.view.tintAdjustmentMode.rawValue)")         // 输出：1    println("\(self.view.tintColor)")                           // 输出：UIDeviceRGBColorSpace 0 0.478431 1 1    self.view.tintAdjustmentMode = .Normal    self.dimTintSwitch?.on = false    // 加载图片    var shinobiHead = UIImage(named: "shinobihead")    // 设置渲染模式    shinobiHead = shinobiHead?.imageWithRenderingMode(.AlwaysTemplate)    self.tintedImageView?.image = shinobiHead    self.tintedImageView?.contentMode = .ScaleAspectFit}

First, we try to print the default Tintcolor and Tintadjustmentmode, respectively outputting [uidevicergbcolorspace 0 0.478431 1 1] and 1, which is not set any tint for the entire view hierarchy. The output of a color-related value. As you can see, although we have not set Tintcolor, it still returns the default value of the system, while Tintadjustmentmode returns the original value of normal as default.

Next, we explicitly set the value of Tintadjustmentmode to normal, while setting the Uiimageview picture and rendering mode.

When we click on the "Change Color" button, the following event handling methods are executed:

1234567891011121314

@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 basically randomly generates a color value and assigns a value to the Tintcolor property of Self.view, while updating the Tintcolor value of the progress bar.

Note: The tint color of a particular constituent part of some controls is controlled by a specific property, such as a progress of 2 tint color: one for the progress bar itself and the other for the background.

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

As you can see, we have in the example and have not manually set the color values of UIButton, UISlider, Uistepper, Uiimageview, toolbar and other child views, But as Self.view's Tintcolor attribute color values change, the appearance of these controls changes at the same time. That is, the change in the color value of the Tintcolor attribute of the self.view affects the appearance of all the child views in the entire view hierarchy result with Self.view as the root view.

It seems that Tintcolor is still very powerful.

In the interface there is also a uiswitch, which is used to turn off the dim tint function, the corresponding processing method is as follows:

12345678

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

When Tintadjustmentmode sets dimmed, its actual effect is to darken the entire color value (there is no figure to steal).

In addition, we rewrote the Tintcolordidchange method in the child view CustomView to listen for changes in the Tintcolor to update our custom view, which is implemented as follows:

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

So the box and the "Tint color label" Color are changed with the tintcolor of the child view, and the tintcolor of the child view is inherited from the parent view.

In this example, the interesting thing is the processing of the picture. The image processing is simple and rough, for a pixel, if its alpha value is 1, its color is set to tint color, if not 1, it is set to transparent. This is how the ninja avatar is handled in the example. But we need to set the Imagewithrenderingmode property of the image to alwaystemplate so that when the picture is rendered it renders it as a template and ignores its color information, as shown in the code:

123	varshinobiHead = UIImage(named: "shinobihead")// 设置渲染模式shinobiHead = shinobiHead?.imageWithRenderingMode(.AlwaysTemplate)

Off Topic

Insert a digression, with the theme is not very related.

In color theory (color theory), a tint color is a blend of color and white. Similar to this is shade color and tone color. Shade color is a blend of colors and blacks, and tone color blends colors with grays. They are all based on hues tones. The effects of these several color values are as follows:

Some basic theoretical knowledge can refer to hues, tints, Tones and Shades:what's the difference? or more specialized articles.

Summary

If we want to specify tint color for the entire app, you can set the window's tint color. This tint color is inherited by all child views under the same window.

When an alert or action sheet pops up, IOS7 automatically darkens the tint color of the subsequent view. At this point, we can override the Tintcolordidchange method in the custom view to perform the action we want.

Some complex controls can have multiple tint color, different parts of the tint color control. As mentioned above, uiprogressview such as navigation bars, tab bars, toolbars, search bars, scope bars, and so on, the background coloring colors of these controls can be handled using the Bartintcolor property.

Reference

• UIView Class Reference

• IOS7 Day-by-day:: Day 6:: Tint Color

• Appearance and Behavior

• Tints and Shades

• Hues, tints, Tones and Shades:what ' s the difference?

Detailed UIView Tint Color property