iOS中利用CAGradientLayer繪制漸變色的方法實(shí)例
前言
以前不用自己切圖,現(xiàn)在要自己切圖,看到設(shè)計(jì)稿有好多不同規(guī)格的漸變色的背景,一個(gè)一個(gè)切的話好麻煩,沒有想到iOS本來就可以實(shí)現(xiàn)漸變色。也就是今天的主角CAGradientLayer。
漸變色使用的類是CAGradientLayer,有兩個(gè)要素,漸變顏色的起點(diǎn)和終點(diǎ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的比例來計(jì)算的,顏色分割點(diǎn)為漸變色開始或終止的地方。
CAGradientLayer屬性介紹
- colors:漸變顏色數(shù)組
- locations:漸變顏色的區(qū)間分布(分割點(diǎn)),locations的數(shù)組長度和colors一致。這個(gè)屬性可不設(shè),默認(rèn)是nil,系統(tǒng)會(huì)平均分布顏色如果有特定需要可設(shè)置,數(shù)組設(shè)置為0 ~ 1之間單調(diào)遞增。
- startPoint:映射locations中起始位置,用單位向量表示。比如(0, 0)表示從左上角開始變化。默認(rèn)值是:(0.5, 0.0)。
- endPoint:映射locations中結(jié)束位置,用單位向量表示。比如(1, 1)表示到右下角變化結(jié)束。默認(rèn)值是:(0.5, 1.0)。
- type:默認(rèn)值是kCAGradientLayerAxial,表示按像素均勻變化。
CAGradientLayer例子
最簡單的三原色漸變例子
效果展示
代碼示例
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é)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
iOS開發(fā)使用GDataXML框架解析網(wǎng)絡(luò)數(shù)據(jù)
GDataXML是Google開發(fā)的一個(gè)XML解析庫,輕便,特點(diǎn)使用非常簡單,支持XPath。今天把前兩天弄的IOS XML解析記錄下來,也供大家參考。2016-02-02iOS tableView實(shí)現(xiàn)頭部拉伸并改變導(dǎo)航條漸變色
這篇文章主要為大家詳細(xì)介紹了iOS tableView實(shí)現(xiàn)頭部拉伸并改變導(dǎo)航條漸變色,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-05-05iOS中模態(tài)Model視圖跳轉(zhuǎn)和Push視圖跳轉(zhuǎn)的需求實(shí)現(xiàn)方法
這篇文章主要介紹了iOS中模態(tài)Model視圖跳轉(zhuǎn)和Push視圖跳轉(zhuǎn)的需求實(shí)現(xiàn),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12全面解析iOS應(yīng)用中自定義UITableViewCell的方法
這篇文章主要介紹了iOS應(yīng)用開發(fā)中自定義UITableViewCell的方法,示例為傳統(tǒng)的Obejective-C語言,需要的朋友可以參考下2016-04-04iOS開發(fā)中Quartz2D控制圓形縮放和實(shí)現(xiàn)刷幀效果
這篇文章主要介紹了iOS開發(fā)中Quartz2D控制圓形縮放和實(shí)現(xiàn)刷幀效果的方法,代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下2015-12-12IOS 下獲取 rootviewcontroller 的版本不同的問題解決辦法
這篇文章主要介紹了IOS 下獲取 rootviewcontroller 的版本不同的問題解決辦法的相關(guān)資料,希望通過本文能幫助到大家,讓大家遇到這種問題可以解決,需要的朋友可以參考下2017-10-10iOS實(shí)現(xiàn)支持小數(shù)的星星評(píng)分組件實(shí)例代碼
程序中需要打分的功能,在網(wǎng)上找了幾個(gè),都不是很滿意。所以自己動(dòng)手實(shí)現(xiàn)了一個(gè),下面這篇文章主要給大家介紹了關(guān)于利用iOS實(shí)現(xiàn)支持小數(shù)的星星評(píng)分組件的相關(guān)資料,需要的朋友可以參考借鑒,下面來一起看看吧。2017-08-08