iOS 開發技巧 製作環形進度條

2022-09-06 17:48:11 字數 3309 閱讀 8496

這篇部落格寫的不錯，不過看上去還是略微複雜了，我自己根據自己的思路整理了一下，當然目的是為了更加簡潔易懂。

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

- (void)drawrect:(cgrect)rect
因為drawrect方法只是在檢視剛剛出現的時候執行一次，所以我們需要使用

[self setneedsdisplay];

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

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

- (void)drawprogress:(cgfloat )progress
看一下效果

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

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

環形漸變色線條的製作：

使用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 環形進度條

1 首先先將自定義的view和進度條的值關聯起來 ibaction progresschange uislider sender2 drawrect方法裡畫弧線 cgfloat radius rect.size.width 2 cgpoint center cgpointmake rect.size...

環形進度條

在專案中做廣告頁，需要乙個5s倒計時的進度條。就用了calayer寫了乙個簡單的進度條。直接上 import inte ce circularprogressview uiview void start void stop import circularprogressview.h import i...

環形進度條

先上效果圖 不多。直接貼 html 0 css body box rotate left right center popu left before left after input radius bg radius dot radius dot before radius dot before s...