溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
以前不用自己切圖，現在要自己切圖，看到設計稿有好多不同規格的漸變色的背景，一個一個切的話好麻煩，沒有想到iOS本來就可以實現漸變色。也就是今天的主角CAGradientLayer。
漸變色使用的類是CAGradientLayer，有兩個要素，漸變顏色的起點和終點、漸變的顏色集合
簡單示例：
//設置漸變顏色 CAGradientLayer *gradientLayer = [CAGradientLayer layer]; gradientLayer.frame = view.bounds; [gradientLayer setColors:[NSArray arrayWithObjects:(id)[RGB(139, 48, 164) CGColor],(id)[RGB(61, 189, 255) CGColor],(id)[RGB(37, 182, 82) CGColor], nil nil]]; [view.layer addSublayer:gradientLayer];
效果如下圖左：
原理詳解
1、CAGradientLayer是CALayer圖層類的子類，用于處理漸變色的層結構。
2、CAGradientLayer的坐標系統是從坐標（0，0）到（1，1）繪制的矩形。
3、CAGradientLayer的frame值的size不為正方形的話，坐標系統會被拉伸。
4、CAGradientLayer的startPoint與endPoint會直接影響顏色的繪制方向。
5、CAGradientLayer的顏色分割點是以0~1的比例來計算的，顏色分割點為漸變色開始或終止的地方。
CAGradientLayer屬性介紹
CAGradientLayer例子
最簡單的三原色漸變例子
效果展示
代碼示例
UIView * myView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 200, 200)]; [self.view addSubview:myView]; CAGradientLayer * gradientLayer = [CAGradientLayer layer]; gradientLayer.frame = myView.bounds; // 設置漸變顏色數組 gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,(__bridge id)[UIColor greenColor].CGColor,(__bridge id)[UIColor blueColor].CGColor]; // 漸變顏色的區間分布 gradientLayer.locations = @[@0.25,@0.5,@0.75]; // 起始位置 gradientLayer.startPoint = CGPointMake(0, 0); // 結束位置 gradientLayer.endPoint = CGPointMake(0, 1); [myView.layer addSublayer:gradientLayer];
當然,實際使用的肯定比這個顏值高很多的,效果展示:
代碼如下:
#define FHCColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0] UIView * myView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 200, 200)]; [self.view addSubview:myView]; CAGradientLayer * gradientLayer = [CAGradientLayer layer]; gradientLayer.frame = myView.bounds; gradientLayer = [CAGradientLayer layer]; gradientLayer.colors = @[(__bridge id)FHCColorFromRGB(0x01b6ff).CGColor, (__bridge id)FHCColorFromRGB(0x4392f6).CGColor]; gradientLayer.locations = @[@0.1, @1.0]; gradientLayer.startPoint = CGPointMake(0, 0); gradientLayer.endPoint = CGPointMake(1.0, 0); [myView.layer addSublayer:gradientLayer];
是不是美美噠?當然你可以把它封裝成一個類別,以便下次使用.
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
