Blog

We believe there is something unique at every business that will ignite the fuse of innovation.

iOS 7 has introduced a new property on UIView named 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];

Since 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 UIViews.

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 tintColor, the 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:

- (void)tintColorDidChange

The default implementation of this method will handle “standard” updates. This means that if you are subclassing a UIImageView and the image hadrenderingMode 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 newtintColorproperty 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.

Attachments