1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

- (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); //渲染

}

1

[self setneedsdisplay];

1

2

3

4

5

- (void)drawprogress:(cgfloat )progress

{

_progress = progress;

[self setneedsdisplay];

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

//生成渐变色

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];

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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];

1

2

[gradientlayer setmask:_progresslayer]; //用progresslayer来截取渐变层

self.layer addsublayer:gradientlayer];