CAGradientLayer

CAGradientLayer是用來生成兩種或更多顏色平滑漸變的。

用Core Graphics複製一個CAGradientLayer並將內容繪製到一個普通圖層的寄宿圖也是有可能的，但是CAGradientLayer的真正好處在於繪製使用了硬件加速。

基礎漸變

我們將從一個簡單的紅變藍的對角線漸變開始（見清單6.6）.這些漸變色彩放在一個數組中，並賦給colors屬性。這個數組成員接受CGColorRef類型的值（並不是從NSObject派生而來），所以我們要用通過bridge轉換以確保編譯正常。

CAGradientLayer也有startPoint和endPoint屬性，他們決定了漸變的方向。這兩個參數是以單位座標系進行的定義，所以左上角座標是{0, 0}，右下角座標是{1, 1}。代碼運行結果如圖6.6

清單6.6 簡單的兩種顏色的對角線漸變：

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *containerView;

@end

@implementation ViewController

- (void)viewDidLoad
{
  [super viewDidLoad];
  //create gradient layer and add it to our container view
  CAGradientLayer *gradientLayer = [CAGradientLayer layer];
  gradientLayer.frame = self.containerView.bounds;
  [self.containerView.layer addSublayer:gradientLayer];

  //set gradient colors
  gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor blueColor].CGColor];

  //set gradient start and end points
  gradientLayer.startPoint = CGPointMake(0, 0);
  gradientLayer.endPoint = CGPointMake(1, 1);
}
@end

圖6.6 用CAGradientLayer實現簡單的兩種顏色的對角線漸變：

多重漸變

如果你願意，colors屬性可以包含很多顏色，所以創建一個彩虹一樣的多重漸變也是很簡單的。默認情況下，這些顏色在空間上均勻地被渲染，但是我們可以用locations屬性來調整空間。locations屬性是一個浮點數值的數組（以NSNumber包裝）。這些浮點數定義了colors屬性中每個不同顏色的位置，同樣的，也是以單位座標系進行標定。0.0代表着漸變的開始，1.0代表着結束。

locations數組並不是強制要求的，但是如果你給它賦值了就一定要確保locations的數組大小和colors數組大小一定要相同，否則你將會得到一個空白的漸變。

清單6.7展示了一個基於清單6.6的對角線漸變的代碼改造。現在變成了從紅到黃最後到綠色的漸變。locations數組指定了0.0，0.25和0.5三個數值，這樣這三個漸變就有點像擠在了左上角。（如圖6.7）

清單6.7 在漸變上使用locations：

- (void)viewDidLoad {
  [super viewDidLoad];

  //create gradient layer and add it to our container view
  CAGradientLayer *gradientLayer = [CAGradientLayer layer];
  gradientLayer.frame = self.containerView.bounds;
  [self.containerView.layer addSublayer:gradientLayer];

  //set gradient colors
  gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id) [UIColor yellowColor].CGColor, (__bridge id)[UIColor greenColor].CGColor];

  //set locations
  gradientLayer.locations = @[@0.0, @0.25, @0.5];

  //set gradient start and end points
  gradientLayer.startPoint = CGPointMake(0, 0);
  gradientLayer.endPoint = CGPointMake(1, 1);
}

圖6.7 用locations構造偏移至左上角的三色漸變：