自從iOS7， UIView 有了一個新的屬性 tintColor ，它是用來在視覺上說明螢幕上哪些控件是活躍的或者有相關的活動。例如 bar button items 和 tab bar items 預設使用tintColor 。如果一個 view 沒有顯示地指定 tintColor ，它将繼承父視圖的 tintColor ，是以在整個視圖層次結構中将有一個連鎖反應。最簡單的情況是你可以通過一行代碼來給整個 APP 指定一個顔色主題:
[[UIApplication sharedApplication] keyWindow].tintColor = [UIColor orangeColor]; 因為 UIWindow 繼承自 UIView ，是以我們可以指定一個 tintColor ，然後應用内的所有子視圖将繼承這個顔色。為了證明 tintColor 對各種使用者界面元素的影響，接下來将舉一個 tabbar 應用的例子，第一個頁面有6個按鈕，每個按鈕會改變 UIWindow 的 tintColor 為一個顔色。第二個頁面将展示 tintColor 對不用界面元素的影響。左上角的 red 按鈕會設定 UIView 的 tintColor ，右上角的 blue 按鈕會設定 UIButton 自身和 tabbar 的 tintColor 。最後 UISegmentedControl 将控制整個蘋果圖示的外觀。當我們按下第一頁的按鈕的時候， UIButton 的文本就會自動适應按鈕指定的顔色。相似的， tabbar上的圖示和文本也會适應新的顔色。
相似地，我們可以設定指定視圖的 tintColor ,假設一個有 tabbar 應用設定的UIWindow 的 tintColor 為藍色，為了區分出tab和主界面，我們可以設定主界面的tintColor 為紅色。iOS7之前實作要用很多行顔色設定的代碼，但是現在隻需要簡單的一行代碼改變主視圖的 tintColor 來設定主視圖自身和它所有子視圖的顔色。
self.view.tintColor = [UIColor redColor];
設定按鈕的 tintColor 會改變按鈕上文本的顔色，但是不會改變按鈕兄弟視圖和父視圖的顔色。
myButton.tintColor = [UIColor blueColor]; 
iOS7還能夠在 alert 或者 action sheet 出現的時候去色或者“暗”着色。這向使用者表明這些控件目前不可用。按下第二個頁面的步進控件就會看到這個效果，如下圖：
iOS7中 UIImage 添加了一個新的屬性 renderingMode ，可以和 tintColor 結合着使用， renderingMode 有三個選項，第一個是 UIImageRenderingModeAutomatic ,正如字面的意思自動根據 UIImage 的使用場景和 tintColor 來填充顔色，例如UIImageView 不會根據 tintColor 渲染 UIImage ，而 UIBarButtonItem 會根據tintColor 自動填充 UIImage 。第二個選項是 UIImageRenderingModeAlwaysOriginal， UIImage 總是會根據自身的顔色渲染圖像。第三個是UIImageRenderingModeAlwaysTemplate ，這個模式将會用tintColor渲染所有UIImage不透明的地方，也就是說設定為這個屬性的UIImage被當做了一個模闆，如果你希望圖像的哪些部分不用tintColor渲染的話，你需要把哪些部分設定成完全透明的。在例子中的第二個界面中的 Segmented 控件展示了這個功能。
正如我們看到的， tintColor 和 renderingMode 兩個屬性給了我們很用的功能，但是使用 tintColor 有幾件事情我們需要注意， 第一是 tintColor 不支援 UIAppearance 。這是非常不幸的，因為如果支援的話，我們可能通過幾行代碼就會改變整個APP的顔色，例如我們想要每一個 UIButton 以一個特殊顔色凸現出來，我們不得不單獨的設定每一個按鈕的 tintColor 。第二當擷取一個 UIView 的 tintColor 的時候，總是傳回一個有效的顔色。這是因為如果視圖的 tintColor 是nil就會傳回父視圖的 tintColor 。如果所有的視圖包括 UIWindow 的 tintColor 都是nil的話， UIWindow 總會傳回一個預設的值，這個值是RGB(0,122,255). 第三如果你自定義了一個視圖并且用到了 tintColor ，你應該實作 tintColorDidChange 方法以便于我們可以在必要的時候更新視圖的渲染。
- (void)tintColorDidChange {
[super tintColorDidChange];
}
這個方法的預設實作是執行标準的更新。例如你子類化了一個 UIImageView 并且 image 的 renderingImage 設定為 UIImageRenderingModeAlwaysTemplate 或者子類了 UIButton ，當tintColor更新的時候自動重繪。覆寫這個方法的目的是為了當 tintColor 改變的時候自定義一些行為。例如我們可以子類一個 UIView 來根據使用者的選擇改變顔色主題。例子中的顔色主題是橘色和黑色兩個選項，當使用者選擇一個選項的時候，我們可以自定義 UIView 和設定 tintColor 為橙色，接下來可以設定子視圖的 tintColor 為黑色。在iOS6中也有 tintColor 屬性但是這個屬性是用于 navigation bars 、 tab bars 、 toolbars 、 search bars 和 scope bar 的北京顔色。在iOS7中我們要設定這些控件的背景顔色我們應該使用 barTintColor 。
tintColor 十分有用并且非常容易使用，通過這個屬性使用者就可以通過觀看視圖來判斷目前哪些控件是活躍的并且有相關的活動。
轉自：http://blog.csdn.net/joywii/article/details/38784869?utm_source=tuicool&utm_medium=referral 譯：http://captechconsulting.com/blog/steven-beyers/ios-7-tutorial-series-tint-color-and-easy-app-theming
原文：
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 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
tintColor
property 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
Tint