CAGradientLayer 漸變圖層
CAGradientLayer 是 CALayer 的子類，用來制作漸變效果的圖層。
屬性介紹
colors //漸變顏色的數組(CGColorRef對象)
locations //漸變顏色位置，[0-1]范圍，遞增，數量和colors數量相等，否則無效
startPoint //漸變的起點,[0,0]-[1,1]。[0,0]是左下角，[1,1]是右上角。默認值分別為[.5,0]和[.5,1]
endPoint //漸變的終點,[0,0]-[1,1]。
示例
-
矩形漸變圖層
這里寫圖片描述
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = CGRectMake(0, 64, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height-64); //設置顯示的frame
gradientLayer.colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor greenColor].CGColor,(id)[UIColor blueColor].CGColor]; //設置漸變顏色
// gradientLayer.locations = @[@0.0, @0.2, @0.5]; //顏色的起點位置，遞增，并且數量跟顏色數量相等
gradientLayer.startPoint = CGPointMake(0, 0); //
gradientLayer.endPoint = CGPointMake(1, 0); //
[self.view.layer addSublayer:gradientLayer]; //將圖層添加到視圖的圖層上
- 不規則形狀
由于 CAGradientLayer 不支持路徑填充，所以只能繪制矩形的漸變。我們可以通過遮罩層 來顯示不規則漸變圖層，使用 CAShapeLayer 賦值給 CAGradientLayer 的 mask 屬性，及可實現不規則圖形的漸變效果。mask 也可以是圖像等其他內容，重疊的部分會被顯示，否則被隱藏。
這里寫圖片描述
// 獲取隨機數
#define getRandomNumberFromAtoB(A,B) (int)(A+(arc4random()%(B-A+1)))
// 貝塞爾曲線，生成隨機路徑
UIBezierPath *path = [UIBezierPath bezierPath];
NSInteger num = 50;
CGFloat itemWidth = [UIScreen mainScreen].bounds.size.width/num;
for (int i=0; i<=num; i++) {
if (i) {
[path addLineToPoint:CGPointMake(i*itemWidth, getRandomNumberFromAtoB(100, 200))];
}
else{
[path moveToPoint:CGPointMake(i*itemWidth, getRandomNumberFromAtoB(100, 200))];
}
}
[path addLineToPoint:CGPointMake([UIScreen mainScreen].bounds.size.width, 300)];
[path addLineToPoint:CGPointMake(0, 300)];
[path closePath];
// 創建 ShapeLayer
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.path = path.CGPath;
// 設置漸變層的 mask 遮罩層
gradientLayer.mask = maskLayer;
Core Graphics 實現漸變色
CAGradientLayer 是對 Core Graphics 底層的一個面向對象的封裝實現，我們直接使用 Core Graphics 來實現漸變色。Core Graphics 庫中有兩個方法用于繪制漸變顏色：CGContextDrawLinearGradient、CGContextDrawRadialGradient，前者可生成線性漸變，后者可生成徑向漸變。Core Graphics 可以通過 CGMutablePathRef來繪制出各種形狀里的漸變效果。
示例
- 線性漸變
這里寫圖片描述
- 首先創建一個path（形狀）
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 0, 100);
CGPathAddLineToPoint(path, NULL, [UIScreen mainScreen].bounds.size.width, 150);
CGPathAddLineToPoint(path, NULL, [UIScreen mainScreen].bounds.size.width, 400);
CGPathAddLineToPoint(path, NULL, 0, 350);
CGPathCloseSubpath(path);
- 給 path 設置漸變效果
NSArray *colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor greenColor].CGColor,(id)[UIColor blueColor].CGColor]; // 漸變色數組
//為了將上下文本中的內容生成圖像
UIGraphicsBeginImageContext(self.view.bounds.size);
//創建CGContextRef
CGContextRef context = UIGraphicsGetCurrentContext(); // 上下文
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
//CGFloat locations[] = { 0.0, 0.3, 1.0 }; // 顏色位置設置,要跟顏色數量相等，否則無效
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) colors, NULL); // 漸變顏色效果設置
//獲取到起止點
CGRect pathRect = CGPathGetBoundingBox(path);
CGPoint startPoint = CGPointMake(CGRectGetMinX(pathRect), CGRectGetMidY(pathRect));
CGPoint endPoint = CGPointMake(CGRectGetMaxX(pathRect), CGRectGetMidY(pathRect));
CGContextSaveGState(context);
CGContextAddPath(context, path); // 上下文添加路徑
CGContextClip(context);
// 繪制線性漸變
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, kCGGradientDrawsBeforeStartLocation);
CGContextRestoreGState(context);
// 需要手動釋放
CGGradientRelease(gradient);
CGColorSpaceRelease(colorSpace);
CGPathRelease(path);
- 從當前上下文獲取圖像并顯示
// 從Context中獲取圖像，并顯示在界面上
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIImageView *imgView = [[UIImageView alloc] initWithImage:img];
[self.view addSubview:imgView];
-
徑向漸變
這里寫圖片描述
NSArray *colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor greenColor].CGColor,(id)[UIColor blueColor].CGColor]; //漸變色數組
UIGraphicsBeginImageContext(self.view.bounds.size);
//創建CGContextRef
CGContextRef context = UIGraphicsGetCurrentContext(); //上下文文本
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) colors, NULL); // 漸變顏色效果設置
//獲取圓心和半徑
CGRect pathRect = CGPathGetBoundingBox(path);
CGPoint center = CGPointMake(CGRectGetMidX(pathRect), CGRectGetMidY(pathRect));
CGFloat radius = MAX(pathRect.size.width / 2.0, pathRect.size.height / 2.0) * sqrt(2);
CGContextSaveGState(context);
CGContextAddPath(context, path); //添加路徑
CGContextClip(context);
//繪制徑向漸變
CGContextDrawRadialGradient(context, gradient, center, 0, center, radius, kCGGradientDrawsBeforeStartLocation);
CGContextRestoreGState(context);
//需要手動釋放
CGGradientRelease(gradient);
CGColorSpaceRelease(colorSpace);
CGPathRelease(path);
Demo地址
總結
使用 Core Graphics 實現漸變效果相對麻煩，幸好官方幫你進行了封裝產生了 CAGradientLayer 漸變圖層對象。有了 CAGradientLayer 對象實現漸變效果變得簡單無比。
