先讓我們看看，能實(shí)現(xiàn)的最終效果：
1450806559781.png
首先，我們需要稍微理清一下CAGradientLayer、CALayer，UIView和mask的大概關(guān)系。
在iOS中，能看得見摸的著的基本都是UIView，如按鈕、圖片等。UIView之所以能看得見是因?yàn)槔锩嬗幸粋€圖層（即
CALayer對象）。對UIView的位置大小的操作，實(shí)際上就是對圖層（即CALayer對象）的操作。可以把圖層看成是沒有事件的UIView，而對應(yīng)UIView則是這個圖層的控制者。所以如果直接在圖層上添加（addSublayer）圖層，就會直接覆蓋在上面。CAGradientLayer是繼承CALayer的，用于畫出漸變圖層。圖層A有一個屬性是mask，mask實(shí)際上也是一個圖層，該圖層設(shè)置為圖層B。mask層工作原理是按照透明度裁剪，只保留非透明部分，所以圖層B并非覆蓋在圖層A上，而是根據(jù)圖層B不透明的部分去顯示圖層A。若圖層B是個藍(lán)色圓環(huán)，而圖層A是個紅色的長方形，那么最終顯示的就是紅色的圓環(huán)。（所以說設(shè)置蒙版mask并不會改變原來圖層的顏色）
實(shí)例一：
1450792777714.png
1450804026188.png
漸變思路(適合文字漸變和圖片不透明部分漸變)：UILabel本身的圖層其實(shí)就是文字，所以我們需要創(chuàng)建一個漸變層到UILabel的父視圖圖層（即superview的layer對象），然后使用UILabel本身的圖層作為漸變層的mask即可。
UILabel *label4 = ({
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(64, 300, 200, 15)];
label.text = @"你好啊";
[self.view addSubview:label];
//設(shè)置漸變層，實(shí)際上有這個漸變層就可以顯示了。
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = label.frame;
// 設(shè)置漸變層的顏色
gradientLayer.colors = @[(id)beforeColor.CGColor,(id)afterColor.CGColor];
//水平漸變添加下面兩行即可
// gradientLayer.startPoint = CGPointMake(0, .5);
// gradientLayer.endPoint = CGPointMake(1, .5);
// 疑問:漸變層能不能加在label上
// 不能，如果添加漸變層到label圖層上,則會遮蓋label的文字圖層；如果作為label圖層的mask，由于mask是完全不透明漸變層，所以是正常顯示，這種情況如果消失了，說明mask的frame.origin沒有設(shè)置正確。
// 添加漸變層到控制器的view圖層上
[self.view.layer addSublayer:gradientLayer];
gradientLayer.mask = label.layer;
//由于label.layer從self.view.layer中移動到漸變層gradientLayer中作為蒙版，所以坐標(biāo)改變了需要重新調(diào)整。
label.layer.frame = gradientLayer.bounds;
label;
});
實(shí)例二：
1450804128723.png
1450804110590.png
漸變思路(適合文字背景漸變和圖片透明部分漸變)：創(chuàng)建漸變圖層添加到圖標(biāo)或文字的父視圖圖層（既superview的layer），然后把圖標(biāo)或文字的圖層addSublayer到漸變層即可。
UIImageView *imageView5 = ({
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(64, 400, 200, 30)];
imageView.contentMode = UIViewContentModeScaleAspectFit;
imageView.image = [UIImage imageNamed:@"abc.png"];
startY +=35;
[self.view addSubview:imageView];
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = imageView.frame;
gradientLayer.colors = @[(id)beforeColor.CGColor,(id)afterColor.CGColor];
//添加漸變層到view圖層上
[self.view.layer addSublayer:gradientLayer];
//將原來的圖標(biāo)圖層或者文字圖層添加到漸變層上
[gradientLayer addSublayer:imageView.layer];
//由于imageView.layer從self.view.layer中移動到漸變層gradientLayer中，所以坐標(biāo)改變了需要重新調(diào)整。
imageView.layer.frame = imageView.layer.bounds;
imageView;
});
實(shí)例三：
有時候可能還需要制作成這種圖片：
1450805634345.png
這時候只需要將UIImageView的寬高設(shè)置成相等的，并且在實(shí)例二的基礎(chǔ)上對漸變層的cornerRadius和masksToBounds處理即可。相信大家對這兩個屬性都比較熟悉了。
在漸變層做圓角處理，處理成圓：
gradientLayer.cornerRadius = imageView.frame.size.width/2;
gradientLayer.masksToBounds = YES;
演示Demo下載:GraduatedColor
