IOS fast implementation of circular gradient progress bar _ios

Objective

Progress bar believe that we are not unfamiliar, often we need to use a circular progress bar. This article gives you a quick look at how to use iOS to quickly implement a circular progress bar.

First, make a progress bar with no color gradient

Custom one cycleView , implementing methods in. M drawRect

-(void) DrawRect: (cgrect) rect {

  Cgcontextref ctx = Uigraphicsgetcurrentcontext ();//Get context

  cgpoint Center = Cgpointmake (100, 100); Set Center position
  cgfloat radius = 90;//Set radius
  cgfloat starta =-m_pi_2;//round start position
  cgfloat enda =-m_pi_2 + m_pi * 2 * _progress; Round End Position

  uibezierpath *path = [Uibezierpath bezierpathwitharccenter:center radius:radius Startangle:starta Endangle:enda Clockwise:yes];

  Cgcontextsetlinewidth (CTX, 10); Set line width
  [[Uicolor Bluecolor] setstroke];//Set Stroke color

  cgcontextaddpath (CTX, path. Cgpath); Add path to Context

  Cgcontextstrokepath (CTX);//Render

}

Because the drawRect method is only executed once when the view just appears, we need to use the

[Self setneedsdisplay];

This method is used to redraw the

Add one to the controller slider and slide slider to control the change in the schedule

-(void) Drawprogress: (cgfloat) Progress
{
  _progress = progress;
  [Self setneedsdisplay];
}

Look at the effect.

If the progress bar doesn't need to be discolored, then a few lines of code are done here.

Below to implement a progressive color with the progress bar, the principle is very simple, just painted a default is a black line, we replace the black with a gradient of the line can be.

Making of annular gradient lines:

First step

With CAShapeLayer drawing out the gradient layer, you should only specify a gradient between two points, so here are two, one to the CAShapeLayer left and one to the right.

Code implementation

Generate gradient
  calayer *gradientlayer = [Calayer layer];

  Left gradient
  cagradientlayer *leftlayer = [Cagradientlayer layer];
  Leftlayer.frame = CGRectMake (0, 0, SELF.BOUNDS.SIZE.WIDTH/2, self.bounds.size.height);  Subsection setting gradient
  leftlayer.locations = @[@0.3, @0.9, @1];
  Leftlayer.colors = @[(ID) [Uicolor yellowcolor]. Cgcolor, (ID) [Uicolor greencolor]. Cgcolor];
  [Gradientlayer Addsublayer:leftlayer];

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

This gradient layer is just an intermediate variable that can't be displayed, I'm just demonstrating here, and now we've got the gradient layer gradientlayer.

Second Step

We need to make a circular path

First look at the effect:

Code implementation:

Cgpoint Center = cgpointmake (m);
  CGFloat radius = n;
  CGFloat Starta =-m_pi_2; Set the progress bar start position
  cgfloat enda =-m_pi_2 + m_pi * 2 * _progress;//Set progress bar End position

  //Get ring path (Draw a circle, fill color transparent, set wireframe width to 10, This obtains a ring)
  _progresslayer = [Cashapelayer layer];//creates a track shape layer
  _progresslayer.frame = self.bounds;
  _progresslayer.fillcolor = [[Uicolor clearcolor] cgcolor];//Fill color is colorless
  _progresslayer.strokecolor = [[Uicolor Redcolor] Cgcolor]; Specifies the rendering color for path, where you can set any opaque color
  _progresslayer.opacity = 1;//Background color transparency
  _progresslayer.linecap = kcalinecapround;//the edge of the specified line is a circle
  _progresslayer.linewidth = The width of the 10;//line
  uibezierpath *path = [Uibezierpath The Bezierpathwitharccenter:center Radius:radius Startangle:starta Endangle:enda clockwise:yes];//above illustrates the use of building a circular
  _ Progresslayer.path =[path Cgpath]; Pass path to layer, then layer will handle the corresponding rendering, the entire logic and coregraph are consistent.
  [Self.layer Addsublayer:_progresslayer];

The third and final step.

Use the loop path we generated in step two to intercept the gradient layer generated by the first step

[Gradientlayer Setmask:_progresslayer]; Using Progresslayer to intercept the gradient layer
self.layer addsublayer:gradientlayer];

The intercepted layer layer is the last thing we need to see what we get when we finally intercept.

Here, we have finished 99%, the last step, according to their own needs to let it show how much proportion of the completed. Proportional control in the second part of the progress property, the ratio between 0-1, look at the final effect.

Summarize

The above is the entire content of this article, I hope the content of this article for everyone's study and work can bring certain help, if you have questions you can message exchange.