iOS 7 has introduced a new property on
tintColor. It is used to visually indicate which controls on the screen are active or have an action associated with them. For example, bar button items and tab bar items use tint color by default. If a view does not have an explicit tint color, it inherits its superview’s tint color, which leads to a convenient cascading effect for an entire view hierarchy. In the simplest case, this means you can give your entire app a color theme with one simple line of code:
[[UIApplication sharedApplication] keyWindow].tintColor = [UIColor orangeColor];
UIWindow inherits from
UIView, you can set its
tintColor, which will be inherited by all subviews in the application.
To demonstrate the effect of tintColor on various user interface elements, this post includes an example tab bar application. The first page will have a series of six buttons, each of which will change the
UIWindow’s tint color to the corresponding color. The second tab of app will is used to show the effects of tint color on different UI elements. The “Red” button on the top left will set the tint color of this
UIView, the “Blue” button on the top right will set the tint color of the
UIButton itself and the bar tint color of the tab bar. Finally, the
UISegmentedControl will control the appearance of the large Apple.
As you tap the buttons on the first page, notice that all
UIButton elements automatically adopt the tint color as the color of the text in those buttons. Similarly, the icon and text on the active bar button item adapt to the new tint color.
Similarly, we can set the tint color for a specific view. Imagine a banking app that has set a blue
tintColor. The app’s designer has decided to visually distinguish the “Transfers” tab of the application with a red
tintColor. Previously, this would have required many lines of color-setting code, however in iOS 7 its as easy as setting the tint color of the main UIView for this feature to change it and all of its subviews with one line:
self.view.tintColor = [UIColor redColor];
Again, setting a tint color on a button will change the color of the text on that button but not the color of sibling or parent
myButton.tintColor = [UIColor blueColor];
Both of these can be demonstrated on the second tab of the sample app. First, tap the “Red” button then tap the “Blue” button.
iOS 7 also has the capability to desaturate or “dim” the tint color if an alert or action sheet is presented. This will visually indicate to the user that those controls are not currently usable. Pressing the stepper control on the second tab in the sample app produces this result. In the following screen shot you can see that the colors have all been changed to a much darker color as a result.
iOS 7 has also given us a new property on the
UIImage class, the
renderingMode property, which is used in conjunction with the
tintColor property. There are three options for rendering mode. The first is
UIImageRenderingModeAutomatic and as this suggests it automatically decides which rendering mode to use based on where the image is being displayed. This is the default value for images and you have already seen this in use in previous screen shots. If you noticed, the large Apple icon has been rendered in black, which is the true color of the image. However, the icon in the active tab bar item has been rendered as orange since we previously set the tint color on the window to orange.
The second option is
UIImageRenderingModeAlwaysOriginal. When this is applied the tint color is never applied to the image so the original color is always used when rendering the image. Selecting “Original” in the segmented control on the second tab will set the rendering mode on the large image as previously discussed. In this case, the result will be identical to selecting “Automatic”.
The third and final option is
UIImageRenderingModeAlwaysTemplate. This mode will replace all non-transparent colors on a
UIImage with the tint color which means that when you are creating an image that will take advantage of being rendered as a template, the entire background and any portion of the image that you do not wish to render using the tint color must be completely transparent. To see this in the sample app, select “Template” on the segmented control.
As you can see, there are many very useful options that these two new properties give us. However, there are a couple of things that you should be aware of when using
tintColor. First, it is not supported by
UIAppearance. This is unfortunate since it would be very nice to set the colors of almost the entire app in just a few lines of code. For example, if an app wanted to make every
UIButton to stand out with a specific color, the tint color would have to be set on each button individually. Second, when retrieving the
tintColor property of a
UIView, a valid color value will always be returned. This is because if the view’s
tintColor is nil it will return the superview’s
tintColor. If all views up to the
UIWindow have a nil
UIWindow will always return the default value, which is a shade of blue (RGB value of 0, 122, 255). Third, if you are using a custom view subclass and you are using the
tintColor property, you should implement
tintColorDidChange: so that you can update the rendering of your view when necessary:
The default implementation of this method will handle “standard” updates. This means that if you are subclassing a
UIImageView and the image had
renderingMode set to
UIImageRenderingModeAlwaysTemplate or a
UIButton, the views will be automatically redrawn with the updated tint color. The purpose for overriding this method is to customize what happens when the tint color changes. As an example, imagine subclassing a
UIView that you want to follow a color scheme to be selected by the user. One of the options for theme colors is orange and black. When that option is selected by the user, your custom
UIView& could have the tint color set to orange, and it in turn would set the tint color of specific subviews to black which would result in the color scheme that the user selected. Finally, iOS 6 had a property called
tintColor that was used for the background color of navigation bars, tab bars, toolbars, search bars and scope bars. To set the background of those items you should now use the property
barTintColor as we have seen by pressing the “Blue” button on the second tab of our sample app.
Now that we have all tint color properties set in our sample app, we can see the final product: a very colorful app with very little code. Clearly, the new
tintColorproperty is very powerful and easy to use. Using this property we can quickly set styling for any view in our app and quickly let users know which controls are active or have an associated action simply by viewing the screen. With this iOS 7 feature Apple has continued to not only provide ways to enhance user experience but also ease the development process to do so.