iOS 繪制顏色漸變圓環(huán)
本文主要介紹一種繪制顏色漸變的進(jìn)度圓環(huán). 先上效果圖:
實(shí)現(xiàn)思路:
CAShapeLayer+UIBezierPath+CAGradientLayer
UIBezierPath 用來(lái)繪制圓環(huán)路徑;
CAShapeLayer 根據(jù)UIBezierPath繪制的曲線(xiàn)路徑渲染出圖形, 利用GPU渲染節(jié)省內(nèi)存,提高性能;
CAGradientLayer 用來(lái)繪制顏色漸變的圖層, 最后添加到view的layer用來(lái)展示;
步驟:
先創(chuàng)建一個(gè)UIView, 在其內(nèi)部實(shí)現(xiàn)圓環(huán)的繪制.
@property (strong, nonatomic)UIView? ? ? ? ? ? ? ? *bgview;
_bgview = [[UIView alloc]initWithFrame:CGRectMake(50, 50, 250, 250)];
_bgview.backgroundColor = [UIColor grayColor];
[self.view addSubview:_bgview];
Paste_Image.png
2.繪制背景圓環(huán), 并將其添加到view的layer層上.
//創(chuàng)建背景圓環(huán)
CAShapeLayer*trackLayer = [CAShapeLayerlayer];
trackLayer.frame=self.bounds;
//清空填充色
trackLayer.fillColor= [UIColorclearColor].CGColor;
//設(shè)置畫(huà)筆顏色 即圓環(huán)背景色
trackLayer.strokeColor=? [UIColorcolorWithRed:170/255.0green:210/255.0blue:254/255.0alpha:1].CGColor;trackLayer.lineWidth=20;
//設(shè)置畫(huà)筆路徑
UIBezierPath*path = [UIBezierPathbezierPathWithArcCenter:CGPointMake(self.frame.size.width/2.0,self.frame.size.height/2.0) radius:self.frame.size.width/2.0-10startAngle:- M_PI_2 endAngle:-M_PI_2 + M_PI *2clockwise:YES];
//path 決定layer將被渲染成何種形狀
trackLayer.path= path.CGPath;
[self.layeraddSublayer:trackLayer];
Paste_Image.png
3. 使用CAGradientLayer 繪制漸變的背景色
由于CAShapeLayer不能順著弧線(xiàn)進(jìn)行漸變只能指定兩個(gè)點(diǎn)之間進(jìn)行漸變, 所以四種顏色的漸變只能是將view分成四個(gè)小的部分, 分別實(shí)現(xiàn)兩種顏色間的漸變. 最后在組合在一起, 形成四種顏色的漸變.
CGFloat width = _bgview.frame.size.width;
CGFloat height = _bgview.frame.size.height;
CALayer *gradientLayer = [CALayer layer];
gradientLayer.frame = self.bgview.bounds;
CAGradientLayer *gradientLayer1 = [CAGradientLayer layer];
gradientLayer1.frame = CGRectMake(width/2.0, 0, width/2.0,? height/2.0);
gradientLayer1.colors = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor orangeColor].CGColor];
//startPoint和endPoint屬性，他們決定了漸變的方向。這兩個(gè)參數(shù)是以單位坐標(biāo)系進(jìn)行的定義，所以左上角坐標(biāo)是{0, 0}，右下角坐標(biāo)是{1, 1}
//startPoint和pointEnd 分別指定顏色變換的起始位置和結(jié)束位置.
//當(dāng)開(kāi)始和結(jié)束的點(diǎn)的x值相同時(shí), 顏色漸變的方向?yàn)榭v向變化
//當(dāng)開(kāi)始和結(jié)束的點(diǎn)的y值相同時(shí), 顏色漸變的方向?yàn)闄M向變化
//其余的 顏色沿著對(duì)角線(xiàn)方向變化
gradientLayer1.startPoint = CGPointMake(0.2, 0);
gradientLayer1.endPoint = CGPointMake(0.8, 1);
[gradientLayer addSublayer:gradientLayer1];
CAGradientLayer *gradientLayer2 = [CAGradientLayer layer];
gradientLayer2.frame = CGRectMake(width/2.0, width/2.0, width/2.0,? height/2.0);
gradientLayer2.colors = @[(__bridge id)[UIColor orangeColor].CGColor, (__bridge id)[UIColor yellowColor].CGColor];
[gradientLayer2 setLocations:@[@0.3, @0.8,@1]];
gradientLayer2.startPoint = CGPointMake(0, 0);
gradientLayer2.endPoint = CGPointMake(0, 1);
[gradientLayer addSublayer:gradientLayer2];
CAGradientLayer *gradientLayer3 = [CAGradientLayer layer];
gradientLayer3.frame = CGRectMake(0, width/2.0, width/2.0,? height/2.0);
gradientLayer3.colors = @[(__bridge id)[UIColor yellowColor].CGColor, (__bridge id)[UIColor greenColor].CGColor];
gradientLayer3.startPoint = CGPointMake(0.5, 1);
gradientLayer3.endPoint = CGPointMake(0.5, 0);
[gradientLayer addSublayer:gradientLayer3];
CAGradientLayer *gradientLayer4 = [CAGradientLayer layer];
gradientLayer4.frame = CGRectMake(0, 0, width/2.0,? height/2.0);
gradientLayer4.colors = @[(__bridge id)[UIColor greenColor].CGColor, (__bridge id)[UIColor blueColor].CGColor];
gradientLayer4.startPoint = CGPointMake(0.5, 1);
gradientLayer4.endPoint = CGPointMake(0.5, 0);
[gradientLayer addSublayer:gradientLayer4];
[self.bgview.layer addSublayer:gradientLayer];
4. 將顏色圖層切成圓環(huán)
@property (nonatomic, strong) CAShapeLayer *progressLayer;
_progressLayer = [CAShapeLayer layer];
_progressLayer.frame = self.bounds;
_progressLayer.fillColor = [UIColor clearColor].CGColor;
_progressLayer.strokeColor? = [UIColor colorWithRed:170/255.0 green:210/255.0 blue:254/255.0 alpha:1].CGColor;
_progressLayer.lineWidth = 20;
_progressLayer.path = path.CGPath;
gradientLayer.mask = _progressLayer;
Paste_Image.png
5. 利用locations 屬性調(diào)整顏色空間
根據(jù)上面的運(yùn)行結(jié)果可以看出底部的顏色交接的地方有顏色的斷層. 主要是第三部分底部的黃色區(qū)域較小導(dǎo)致的. 可以利用locations數(shù)組進(jìn)行微調(diào).
默認(rèn)情況下，這些顏色在空間上均勻地被渲染，但是我們可以用locations屬性來(lái)調(diào)整空間。locations屬性是一個(gè)浮點(diǎn)數(shù)值的數(shù)組(以NSNumber包裝)。這些浮點(diǎn)數(shù)定義了colors屬性中每個(gè)不同顏色的位置，同樣的，也是以單位坐標(biāo)系進(jìn)行標(biāo)定。0.0代表著漸變的開(kāi)始，1.0代表著結(jié)束。
[gradientLayer2 setLocations:@[@0.3, @0.8]];
Paste_Image.png
