ios弧形進度條 iOS快速實現環形漸變進度條

2021-10-16 18:21:30 字數 3404 閱讀 5607

前言

一:先製作乙個不帶顏色漸變的進度條

自定義乙個cycleview,在.m 中實現drawrect方法

- (void)drawrect:(cgrect)rect {

cgcontextref ctx = uigraphicsgetcurrentcontext();//獲取上下文

cgpoint center = cgpointmake(100, 100); //設定圓心位置

cgfloat radius = 90; //設定半徑

cgfloat starta = - m_pi_2; //圓起點位置

cgfloat enda = -m_pi_2 + m_pi * 2 * _progress; //圓終點位置

uibezierpath *path = [uibezierpath bezierpathwitharccenter:center radius:radius startangle:starta endangle:enda clockwise:yes];

cgcontextsetlinewidth(ctx, 10); //設定線條寬度

[[uicolor bluecolor] setstroke]; //設定描邊顏色

cgcontextaddpath(ctx, path.cgpath); //把路徑新增到上下文

cgcontextstrokepath(ctx); //渲染

因為drawrect方法只是在檢視剛剛出現的時候執行一次,所以我們需要使用

[self setneedsdisplay];

這個方法來進行重新繪製,

在控制器裡面加乙個slider,滑動slider來控制進度變化

- (void)drawprogress:(cgfloat )progress

_progress = progress;

[self setneedsdisplay];

看一下效果

如果進度條不需要加漸變色,那麼這兒幾行**就完成了。

下面來實現一下帶有漸變色的進度條,原理很簡單,剛剛畫的是一條預設是黑色的線條,我們把黑色替換成一條漸變色的線條就可以了。

環形漸變色線條的製作:

第一步使用cashapelayer繪製出漸變層,應為它只能指定兩個點之間進行漸變,所以這裡需要兩個cashapelayer,左邊乙個和右邊乙個,看一下效果圖

**實現

//生成漸變色

calayer *gradientlayer = [calayer layer];

//左側漸變色

cagradientlayer *leftlayer = [cagradientlayer layer];

leftlayer.frame = cgrectmake(0, 0, self.bounds.size.width / 2, self.bounds.size.height); // 分段設定漸變色

leftlayer.locations = @[@0.3, @0.9, @1];

leftlayer.colors = @[(id)[uicolor yellowcolor].cgcolor, (id)[uicolor greencolor].cgcolor];

[gradientlayer addsublayer:leftlayer];

//右側漸變色

cagradientlayer *rightlayer = [cagradientlayer layer];

rightlayer.frame = cgrectmake(self.bounds.size.width / 2, 0, self.bounds.size.width / 2, self.bounds.size.height);

rightlayer.locations = @[@0.3, @0.9, @1];

rightlayer.colors = @[(id)[uicolor yellowcolor].cgcolor, (id)[uicolor redcolor].cgcolor];

[gradientlayer addsublayer:rightlayer];

這個漸變層只是乙個中間變數,是不能顯示出來的,我這裡只是演示一下,現在我們已經拿到了漸變層gradientlayer。

第二步我們需要製作乙個環形路徑

先看一下效果:

**實現:

cgpoint center = cgpointmake(100, 100);

cgfloat radius = 90;

cgfloat starta = - m_pi_2; //設定進度條起點位置

cgfloat enda = -m_pi_2 + m_pi * 2 * _progress; //設定進度條終點位置

//獲取環形路徑(畫乙個圓形,填充色透明,設定線框寬度為10,這樣就獲得了乙個環形)

_progresslayer = [cashapelayer layer];//建立乙個track shape layer

_progresslayer.frame = self.bounds;

_progresslayer.fillcolor = [[uicolor clearcolor] cgcolor]; //填充色為無色

_progresslayer.strokecolor = [[uicolor redcolor] cgcolor]; //指定path的渲染顏色,這裡可以設定任意不透明顏色

_progresslayer.opacity = 1; //背景顏色的透明度

_progresslayer.linecap = kcalinecapround;//指定線的邊緣是圓的

_progresslayer.linewidth = 10;//線的寬度

uibezierpath *path = [uibezierpath bezierpathwitharccenter:center radius:radius startangle:starta endangle:enda clockwise:yes];//上面說明過了用來構建圓形

_progresslayer.path =[path cgpath]; //把path傳遞給layer,然後layer會處理相應的渲染,整個邏輯和coregraph是一致的。

[self.layer addsublayer:_progresslayer];

第三步,也是最後一步了

用我們在第二步生成的環形路徑去擷取第一步生成的漸變層

[gradientlayer setmask:_progresslayer]; //用progresslayer來擷取漸變層

self.layer addsublayer:gradientlayer];

擷取的layer層就是我們最後需要的,看一看我們最後擷取後得到的

到這裡,我們已經完成了99%了,最後一步,根據自己的需要讓它顯示多少的比例就完成了。比例的控制在第二部的progress屬性,比例在0-1之間,看一看最後的效果。

總結

ios弧形進度條 iOS 圓形進度條

釋放雙眼,帶上耳機,聽聽看 今天產品要弄乙個圓形的進度條 有很多開源的進度條不用,非要弄這種效果,就不吐槽了,還是想想怎麼實現 廢話就不多說了 直接上 import inte ce roundprogressview uiview 進度條顏色 property strong,nonatomic ui...

ios弧形進度條 ios 圓形進度條

今天產品要弄乙個圓形的進度條 有很多開源的進度條不用,非要弄這種效果,就不吐槽了,還是想想怎麼實現 廢話就不多說了 直接上 import inte ce roundprogressview uiview 進度條顏色 property strong,nonatomic uicolor progress...

ios弧形進度條 iOS快速實現環形漸變進度條

前言 一 先製作乙個不帶顏色漸變的進度條 自定義乙個cycleview,在.m 中實現drawrect方法 void drawrect cgrect rect cgcontextref ctx uigraphicsgetcurrentcontext 獲取上下文 cgpoint center cgpo...