級(jí)別： ★★☆☆☆
標(biāo)簽：「iOS顏色漸變」「CAGradientLayer漸變」「CAGradientLayer」
作者： Xs·H
審校： QiShare團(tuán)隊(duì)

在最近的新項(xiàng)目中，設(shè)計(jì)師在一些UI元素上用了漸變色。比如，漸變色的按鈕，如圖1：

圖1 漸變色按鈕設(shè)計(jì)圖

為了實(shí)現(xiàn)如上效果，可以讓設(shè)計(jì)師1:1切圖，設(shè)置為UIButton的Image屬性（-setImage:forState:）;也可以讓設(shè)計(jì)師切出1像素高的漸變圖，設(shè)置backgroundImage屬性填充背景（-setBackgroundImage:forState:）。

當(dāng)然，我們也可以對(duì)控件的layer進(jìn)行操作，使用CAGradientLayer實(shí)現(xiàn)漸變效果。

CAGradientLayer是CALayer的子類，負(fù)責(zé)處理漸變色的層結(jié)構(gòu)。下面使用CAGradientLayer給一張圖片增加漸變色遮罩，如圖2。

實(shí)現(xiàn)效果：

圖2 漸變色遮罩

實(shí)現(xiàn)代碼：

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"qr_qishare"]];
imageView.center = CGPointMake(self.view.bounds.size.width / 2, self.view.bounds.size.height / 3);
imageView.autoresizingMask = UIViewAutoresizingFlexibleTopMargin;
[self.view addSubview:imageView];
            
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = imageView.bounds;
// 設(shè)置漸變顏色數(shù)組
gradientLayer.colors = @[(__bridge id)[[UIColor purpleColor] colorWithAlphaComponent:.7].CGColor, (__bridge id)[[UIColor blueColor] colorWithAlphaComponent:.7].CGColor];
// 設(shè)置漸變起始點(diǎn)
gradientLayer.startPoint = CGPointMake(.0, .0);
// 設(shè)置漸變結(jié)束點(diǎn)
gradientLayer.endPoint = CGPointMake(.0, 1.0);
// 設(shè)置漸變顏色分布區(qū)間，不設(shè)置則均勻分布
// gradientLayer.locations = @[@(0.0), @(1.0)];
// 設(shè)置漸變類型，不設(shè)置則按像素均勻變化
// gradientLayer.type = kCAGradientLayerAxial;// 按像素均勻變化
[imageView.layer addSublayer:gradientLayer];

PS: 代碼中的-colorWithAlphaComponent:方法與CAGradientLayer無(wú)直接關(guān)系，只是用來(lái)控制顏色的透明度，以實(shí)現(xiàn)透明效果。

CAGradientLayer可以通過(guò)colors屬性設(shè)置多個(gè)有序漸變顏色，并在CALayer的坐標(biāo)系內(nèi)對(duì)漸變方向和漸變位置做調(diào)整。CALayer的坐標(biāo)系用(x, y)表示，左上角為(0, 0)，右下角為(1, 1)，如圖3所示：

圖3 CALyaer坐標(biāo)系

// 從上至下（x相同，y控制方向）
gradientLayer.startPoint = CGPointMake(.0, .0);
gradientLayer.endPoint = CGPointMake(.0, 1.0);

// 從下至上（x相同，y控制方向）
gradientLayer.startPoint = CGPointMake(.0, 1.0);
gradientLayer.endPoint = CGPointMake(.0, .0);

// 從左至右（y相同，x控制方向）
gradientLayer.startPoint = CGPointMake(.0, .0);
gradientLayer.endPoint = CGPointMake(1.0, .0);

// 從右至左（y相同，x控制方向）
gradientLayer.startPoint = CGPointMake(1.0, .0);
gradientLayer.endPoint = CGPointMake(.0, .0);

// 從左上至右下（x和y控制方向）
gradientLayer.startPoint = CGPointMake(.0, .0);
gradientLayer.endPoint = CGPointMake(1.0, 1.0);

基于坐標(biāo)系，可以通過(guò)locations屬性設(shè)置顏色組的漸變位置。locations的元素個(gè)數(shù)需要和colors一致，指明第n個(gè)顏色在何處與相鄰的顏色開始漸變。我們比較兩個(gè)效果，見圖4和圖5：

• 紅、綠、藍(lán)均勻變化（不設(shè)置locations屬性）

  
  
  圖4 紅、綠、藍(lán)均勻變化
• 紅、綠、藍(lán)按照指定的locations變化

gradientLayer.locations = @[@(0.25), @(.5), @(.75)];

圖5 紅、綠、藍(lán)按照指定的locations變化

從上方兩圖可知，在不設(shè)置locations屬性時(shí)，相鄰顏色會(huì)充分漸變，也就是說(shuō)在漸變方向上，不會(huì)存在同色值的相鄰像素；而在指定了locations之后，第n個(gè)顏色會(huì)在第n個(gè)location處與相鄰的顏色開始漸變，此location之外的區(qū)域是純色（比如圖5最左邊的紅色和最右邊的藍(lán)色）。

另外：CAGradientLayer配合CAShapeLayer（iOS 繪制圓角中有用到）可以實(shí)現(xiàn)很多漸變的效果。比如：

• 漸變色進(jìn)度條

  
  
  漸變色進(jìn)度條

• 漸變色圓框

漸變色圓框

以上漸變色繪制實(shí)例的實(shí)現(xiàn)方式將在第二篇文章內(nèi)介紹。
源碼可從工程QiGradientLayer中獲取。

了解更多iOS及相關(guān)新技術(shù)，請(qǐng)關(guān)注我們的公眾號(hào)：

關(guān)注我們的途徑有：
QiShare(簡(jiǎn)書)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公眾號(hào))

推薦文章：
奇舞周刊279期