在UIView中一個相對來說比較小的屬性，tintColor屬性是相當的強大。今天我們就來看看如何使用他，包含使用tint color進行着色標准控件、我們自定義控件甚至重新着色圖像。
本章的實例程序能夠在github上面進行訪問，訪問地址:github.com/ShinobiControls/iOS7-day-by-day
Tint color of existing iOS controller – 使用tint color為iOS中已經存在的控件進行着色
在iOS7中，UIView新增了一個屬性tintColor.這是一個UIColor，被使用在UIView中改變應用程序的外觀的。默認tintColor的值為nil，這表示它將會運用父視圖層次的顏色來進行着色。如果父視圖中沒有設置tintColor，那么默認系統就會使用藍色。因此，可以通過設置root view controller的tintColor來改變系統整體的顏色。
為了證明這一點，我們需要知道tintColor如何改變標准控件的外觀，可以看看我們已經寫好的ColorChanger應用程序。
在storyboard中包含了一系列的控件，包括UIButton, UISlider和UIStepper,在view controller中我們有一個改變顏色的按鈕關聯到下面的方法:
1
2 3 4 5 6 7 8 |
- (IBAction)changeColorHandler:(id)sender { // Generate a random color CGFloat hue = (arc4random() % 256 / 256.0); CGFloat saturation = (arc4random() % 128 / 256.0) + 0.5; CGFloat brightness = (arc4random() % 128 / 256.0) + 0.5; UIColor *color = [UIColor colorWithHue:hue staturation:saturation brightness:brightnee alpha:1]; self.view.tintColor = color; }
|
這個方法的主體就是生成一個隨機的顏色， 最后一行設置tint color。
有一個UI control並不是響應tintColor的變化，它就是UIProgressView.是因為它具有兩個tint colors(一個是設置進度條本身，一個設置進度軌道色的)，為了能夠改變，我們需要添加一個方法:
1
2 3 |
- (void)updateProgressViewTint { self.progressView.progressTintColor = self.view.tintColor; }
|
當調用changeColorHandler:方法之后:
Tint Dimming – 顏色變暗
除了能夠設置色調顏色(tintColor),還有另外的一個屬性在UIView中，它可以使tint color變暗, 因此整個視圖層次變暗。這個屬性是tintAdjustmentMode,並且它可以在三個值里面選擇一個設置(UIViewTintAdjustmentModeNormal, UIViewTintAdjustmentModeDimmed和UIViewTintAdjustmentModeAutomatic)
為了展示這個效果，我們需要添加一個UISwitch控件並且綁定它的valueChanged:事件到下面的方法上面:
1
2 3 4 5 6 7 8 9 |
- (IBAction)dimTintHandler:(id)sender { if (self.dimTintSwitch.isOn) { self.view.tintAdjustMentMode = UIViewTintAdjustmentModeDimmed; }else { self.view.tintAdjustmentMode = UIViewTintAdjustmentModeNormal; } [self updateProgressViewTint]; }
|
當你點擊UISwitch之后，整個頁面變暗了，這樣的很方便進行彈出框的效果，展示彈出框的時候，后面的頁面變暗，以免分散用戶的注意力。
Using tint color in custom views – 給自定義發視圖進行着色
UIView中有一個新的方法，當tintColor或者tintAdjustmentMode屬性發生變化的時候就會調用這個方法。
為了查看它是如何工作的，我們需要創建一個UIView的子類，它包含一個整個的色塊，一個標簽的文本顏色和tint color相同，還有一個一直保持灰色的標簽。
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
@implementation SCSampleCustomControl { UIView *_tintColorBlock; UILabel *_greyLabel; UILabel *_tintColorLabel; } - (id)initWithCoder:(NSCoder *)aDecoder { self = [super initWithCoder:aDecoder]; if (self) { self.backgroundColor = [UIColor clearColor]; [self prepareSubViews]; } } - (void)prepareSubviews { _tintColorBlock = [[UIView alloc] init]; _tintColorBlock.backgroundColor = self.tintColor; [self addSubview:_titnColorBlock]; _greyLabel = [[UILabel alloc] init]; _greyLabel.text = @"Grey label"; _greyLabel.textColor = [UIColor grayColor]; [_greyLabel sizeToFit]; [self addSubview:_greyLabel]; _tintColorLabel = [[UILabel alloc] init]; _tintColorLabel.text = @"Tint color label"; _tintColorLabel.textColor = self.tintColor; [_tintColorLabel sizeToFit]; [self addSubview:_tintColorLabel]; } - (void)layoutSubviews { _tintColorBlock.frame = CGRectMake(0, 0, CGRectGetWidth(self.bounds) / 3, CGRectGetHeight(self.bounds)); CGRect frame = _greyLabel.frame; frame.origin.x = CGRectGetWidth(self.bounds) / 3 + 10; frame.origin.y = 0; _greyLabel.frame = frame; frame = _tintColorLabel.frame; frame.origin.x = CGRectGetWidth(self.bounds) / 3 + 10; frame.origin.y = CGRectGetHeight(self.bounds) / 2; _tintColorLabel.frame = frame; } @end
|
到目前為止，我們都沒有做什么新鮮的事情，只是搭建了一個簡單的UIView的子類。有趣的內容現在就來了。我們復寫一個新的方法tintColorDidChange:
1
2 3 4 |
- (void)tintColorDidChange { _tintColorLabel.textColor = self.tintColor; _tintColorBlock.backgroundColor = self.tintColor; }
|
我們做的就是根據當前view的tintColor進行設置一些控件的顏色。
就是這么的簡單。在view controller中的代碼並不需要修改，因為設置tintColor只是在UIView層次中進行賦值。
Tinting images with tintColor – 給圖像着色
最后有關tintColor比較cool的能力就是，它可以為一個圖像着色。圖像着色的時候會把所有像素alpha為1的全部變換成tintColor的顏色，其他的顏色就會設置成透明。
在這個demo中，我將會展示如何着色圖片。
我們需要在storyboard中添加一個UIImageView,並且設置關聯為tintedImageView,然后在viewDidLoad中添加如下代碼:
1
2 3 4 5 6 7 |
// Load the image UIImage *shinobiHead = [UIImage imageNamed:@"shinobihead"]; // Set the rendering mode to respect tint color shinobiHead = [shinobiHead imageWithRenderingMode:UIImageRenderingModeAlwarysTemplate]; // And set to the image view self.tintedImageView.image = shinobiHead; self.tintedImageView.contentMode = UIViewContentModeScaleAspectFit;
|
首先我們加載一個圖像，然后我們調用imageWithRenderingMode:方法來改變圖像渲染模式為UIImageRenderingModeAlwaysTemplate,其他兩個選項是UIImageRenderingModeAlwaysOriginal和andUIImageRenderingModeAutomatic。默認是andUIImageRenderingModeAutomatic,在這個情況下，根據上下文來改變圖像，例如標簽欄、工具欄等都是設置成模板對象。
一旦你設置圖像的模式為模板圖像，並且設置比例，確保圖不失真。
Conclusion – 總結
表面上tintColor很簡單的UIView,然而,它實際上代表了一些令人難以置信的強大的外觀定制功能。如果你創建自己的UIView子類或自定義控件,然后,我鼓勵你,實現tintColorDidChange——它會讓你的工作更多的與標准UIKit組件串聯。
