iOS 繪製漸變·基礎篇

QiShare發表於2018-10-22
iOS

級別： ★★☆☆☆
標籤：「iOS顏色漸變」「CAGradientLayer漸變」「CAGradientLayer」
作者： Xs·H
審校： QiShare團隊

在最近的新專案中，設計師在一些UI元素上用了漸變色。比如，漸變色的按鈕，如圖1：

圖1 漸變色按鈕設計圖

為了實現如上效果，可以讓設計師1:1切圖，設定為UIButton的Image屬性（-setImage:forState:）;也可以讓設計師切出1畫素高的漸變圖，設定backgroundImage屬性填充背景（-setBackgroundImage:forState:）。

當然，我們也可以對控制元件的layer進行操作，使用CAGradientLayer實現漸變效果。

CAGradientLayer是CALayer的子類，負責處理漸變色的層結構。下面使用CAGradientLayer給一張圖片增加漸變色遮罩，如圖2。

實現效果：

圖2 漸變色遮罩

實現程式碼：

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;
// 設定漸變顏色陣列
gradientLayer.colors = @[(__bridge id)[[UIColor purpleColor] colorWithAlphaComponent:.7].CGColor, (__bridge id)[[UIColor blueColor] colorWithAlphaComponent:.7].CGColor];
// 設定漸變起始點
gradientLayer.startPoint = CGPointMake(.0, .0);
// 設定漸變結束點
gradientLayer.endPoint = CGPointMake(.0, 1.0);
// 設定漸變顏色分佈區間，不設定則均勻分佈
// gradientLayer.locations = @[@(0.0), @(1.0)];
// 設定漸變型別，不設定則按畫素均勻變化
// gradientLayer.type = kCAGradientLayerAxial;// 按畫素均勻變化
[imageView.layer addSublayer:gradientLayer];
複製程式碼

PS: 程式碼中的-colorWithAlphaComponent:方法與CAGradientLayer無直接關係，只是用來控制顏色的透明度，以實現透明效果。

CAGradientLayer可以通過colors屬性設定多個有序漸變顏色，並在CALayer的座標系內對漸變方向和漸變位置做調整。CALayer的座標系用(x, y)表示，左上角為(0, 0)，右下角為(1, 1)，如圖3所示：

圖3 CALyaer座標系
基於座標系，可以通過startPoint和endPoint兩個屬性設定漸變方向。下面是一些常用的漸變方向實現方式：

// 從上至下（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);
複製程式碼

基於座標系，可以通過locations屬性設定顏色組的漸變位置。locations的元素個數需要和colors一致，指明第n個顏色在何處與相鄰的顏色開始漸變。我們比較兩個效果，見圖4和圖5：

  • 紅、綠、藍均勻變化（不設定locations屬性）
    圖4 紅、綠、藍均勻變化
  • 紅、綠、藍按照指定的locations變化
gradientLayer.locations = @[@(0.25), @(.5), @(.75)];
複製程式碼

圖5 紅、綠、藍按照指定的locations變化

從上方兩圖可知，在不設定locations屬性時，相鄰顏色會充分漸變，也就是說在漸變方向上，不會存在同色值的相鄰畫素；而在指定了locations之後，第n個顏色會在第n個location處與相鄰的顏色開始漸變，此location之外的區域是純色（比如圖5最左邊的紅色和最右邊的藍色）。

另外：CAGradientLayer配合CAShapeLayer（iOS 繪製圓角中有用到）可以實現很多漸變的效果。比如：

  • 漸變色進度條

    漸變色進度條

  • 漸變色圓框

漸變色圓框

以上漸變色繪製例項的實現方式將在第二篇文章內介紹。 原始碼可從工程QiGradientLayer中獲取。

關注我們的途徑有：
QiShare(簡書)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公眾號)

推薦文章：
奇舞週刊279期

相關文章