iOS CAGradientLayer 漸變圖層

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來繪制出各種形狀里的漸變效果。

示例

  • 線性漸變
    這里寫圖片描述
  1. 首先創建一個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);
  1. 給 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);
  1. 從當前上下文獲取圖像并顯示
// 從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 對象實現漸變效果變得簡單無比。

擴展閱讀

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容