前言
以前不用自己切圖，現(xiàn)在要自己切圖，看到設(shè)計(jì)稿有好多不同規(guī)格的漸變色的背景，一個(gè)一個(gè)切的話好麻煩，沒(méi)有想到iOS本來(lái)就可以實(shí)現(xiàn)漸變色。也就是今天的主角CAGradientLayer。
漸變色使用的類是CAGradientLayer，有兩個(gè)要素，漸變顏色的起點(diǎn)和終點(diǎn)、漸變的顏色集合
簡(jiǎn)單示例：
//設(shè)置漸變顏色 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圖層類的子類，用于處理漸變色的層結(jié)構(gòu)。
2、CAGradientLayer的坐標(biāo)系統(tǒng)是從坐標(biāo)（0，0）到（1，1）繪制的矩形。
3、CAGradientLayer的frame值的size不為正方形的話，坐標(biāo)系統(tǒng)會(huì)被拉伸。
4、CAGradientLayer的startPoint與endPoint會(huì)直接影響顏色的繪制方向。
5、CAGradientLayer的顏色分割點(diǎn)是以0~1的比例來(lái)計(jì)算的，顏色分割點(diǎn)為漸變色開(kāi)始或終止的地方。
CAGradientLayer屬性介紹
CAGradientLayer例子
最簡(jiǎn)單的三原色漸變例子
效果展示
代碼示例
UIView * myView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 200, 200)]; [self.view addSubview:myView]; CAGradientLayer * gradientLayer = [CAGradientLayer layer]; gradientLayer.frame = myView.bounds;// 設(shè)置漸變顏色數(shù)組 gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,(__bridge id)[UIColor greenColor].CGColor,(__bridge id)[UIColor blueColor].CGColor];// 漸變顏色的區(qū)間分布 gradientLayer.locations = @[@0.25,@0.5,@0.75];// 起始位置 gradientLayer.startPoint = CGPointMake(0, 0);// 結(jié)束位置 gradientLayer.endPoint = CGPointMake(0, 1); [myView.layer addSublayer:gradientLayer];
當(dāng)然,實(shí)際使用的肯定比這個(gè)顏值高很多的,效果展示:
代碼如下:
#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];
是不是美美噠?當(dāng)然你可以把它封裝成一個(gè)類別,以便下次使用.
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)VEVB武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
