tintColor ios7特性學習

http://blog.kingiol.com/blog/2014/01/09/ios7-day-by-day-day6-tint-color/

天天品嚐iOS7甜點 :: Day 6 :: Tint Color

2014-01-09 THU

這篇文章是天天品嚐iOS7甜點系列的一部分，你可以查看完整的系列目錄：天天品嚐iOS7甜點

---

在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組件串聯。