iOS 繪制顏色漸變圓環 --- 值得一看

iOS 繪制顏色漸變圓環

本文主要介紹一種繪制顏色漸變的進度圓環. 先上效果圖:

實現思路:

CAShapeLayer+UIBezierPath+CAGradientLayer

UIBezierPath 用來繪制圓環路徑;

CAShapeLayer 根據UIBezierPath繪制的曲線路徑渲染出圖形, 利用GPU渲染節省內存,提高性能;

CAGradientLayer 用來繪制顏色漸變的圖層, 最后添加到view的layer用來展示;

步驟:

先創建一個UIView, 在其內部實現圓環的繪制.

@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.繪制背景圓環, 并將其添加到view的layer層上.

//創建背景圓環

CAShapeLayer*trackLayer = [CAShapeLayerlayer];

trackLayer.frame=self.bounds;

//清空填充色

trackLayer.fillColor= [UIColorclearColor].CGColor;

//設置畫筆顏色 即圓環背景色

trackLayer.strokeColor=? [UIColorcolorWithRed:170/255.0green:210/255.0blue:254/255.0alpha:1].CGColor;trackLayer.lineWidth=20;

//設置畫筆路徑

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不能順著弧線進行漸變只能指定兩個點之間進行漸變, 所以四種顏色的漸變只能是將view分成四個小的部分, 分別實現兩種顏色間的漸變. 最后在組合在一起, 形成四種顏色的漸變.

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屬性,他們決定了漸變的方向。這兩個參數是以單位坐標系進行的定義,所以左上角坐標是{0, 0},右下角坐標是{1, 1}

//startPoint和pointEnd 分別指定顏色變換的起始位置和結束位置.

//當開始和結束的點的x值相同時, 顏色漸變的方向為縱向變化

//當開始和結束的點的y值相同時, 顏色漸變的方向為橫向變化

//其余的 顏色沿著對角線方向變化

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. 將顏色圖層切成圓環

@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 屬性調整顏色空間

根據上面的運行結果可以看出底部的顏色交接的地方有顏色的斷層. 主要是第三部分底部的黃色區域較小導致的. 可以利用locations數組進行微調.

默認情況下,這些顏色在空間上均勻地被渲染,但是我們可以用locations屬性來調整空間。locations屬性是一個浮點數值的數組(以NSNumber包裝)。這些浮點數定義了colors屬性中每個不同顏色的位置,同樣的,也是以單位坐標系進行標定。0.0代表著漸變的開始,1.0代表著結束。

[gradientLayer2 setLocations:@[@0.3, @0.8]];


Paste_Image.png

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

推薦閱讀更多精彩內容