IOS development skills-making a ring progress bar and ios development skills

IOS development skills-making a ring progress bar and ios development skills

Several blogs have written about how to implement a ring progress bar. Most of them are implemented using Core Graph, which is a little complicated and inefficient. It is just a small progress bar, we certainly use the simplest and most efficient method.

First look at this blog, blog address: http://www.brighttj.com/ios/ios-implement-loop-progress.html
This blog is well written, but it still looks a little complicated. I sorted it out based on my own ideas. Of course, the purpose is to be more concise and easy to understand.

I. Create a progress bar without a gradient.

Customize a cycleView and implement the drawRect method in. m.

-(Void) drawRect :( CGRect) rect {CGContextRef ctx = UIGraphicsGetCurrentContext (); // obtain the context CGPoint center = CGPointMake (100,100); // set the center position CGFloat radius = 90; // set the radius 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 ); // set the line width [[UIColor blueColor] setStroke]; // set the stroke color CGContextAddPath (ctx, path. CGPath); // Add the path to the context CGContextStrokePath (ctx); // rendering}

 

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

[self setNeedsDisplay];

This method is used to re-draw,
Add a slider to the Controller and slider to control progress changes.

- (void)drawProgress:(CGFloat )progress{    _progress = progress;    [self setNeedsDisplay];}

Check the effect

0. png

If the progress bar does not require gradient, several lines of code are complete.

The following shows the progress bar with gradient color. The principle is very simple. We just drew a line that is black by default. We can replace the black with a gradient line.
Ring gradient line production:

Step 1

Use CAShapeLayer to draw a gradient layer. You should specify a gradient between only two vertices. So here we need two CAShapeLayer, one on the left and one on the right. Let's take a look.

3. jpg

Code Implementation

// Generate gradient CALayer * gradientLayer = [CALayer layer]; // The left-side gradient CAGradientLayer * leftLayer = [CAGradientLayer]; leftLayer. frame = CGRectMake (0, 0, self. bounds. size. width/2, self. bounds. size. height); // sets the gradient leftLayer. locations = @ [@ 0.3, @ 0.9, @ 1]; leftLayer. colors = @ [(id) [UIColor yellowColor]. CGColor, (id) [UIColor greenColor]. CGColor]; [gradientLayer addSublayer: leftLayer]; // gradient CAGradientLayer * rightLayer = [CAGradientLayer]; 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 only an intermediate variable and cannot be displayed. I will demonstrate it here. Now we have obtained the gradientLayer.

Step 2

We need to create a circular path.
First look at the effect:

2. jpg

Code implementation:

CGPoint center = CGPointMake (100,100); CGFloat radius = 90; CGFloat startA =-M_PI_2; // set the start position of the progress bar CGFloat endA =-M_PI_2 + M_PI * 2 * _ progress; // set the end position of the progress bar // obtain the circular path (draw a circle with transparent fill color and set the width of the box to 10, so that a ring is obtained) _ progressLayer = [CAShapeLayer layer]; // creates a track shape layer _ progressLayer. frame = self. bounds; _ progressLayer. fillColor = [[UIColor clearColor] CGColor]; // The fill color is colorless _ progressLayer. strokeColor = [[UI Color redColor] CGColor]; // specifies the rendering Color of the path. Here, you can set any opacity Color _ progressLayer. opacity = 1; // transparency of the background color _ progressLayer. lineCap = kCALineCapRound; // specify that the edge of the line is a circle _ progressLayer. lineWidth = 10; // line width UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter: center radius: radius startAngle: startA endAngle: endA clockwise: YES]; // The above describes how to build a circular _ progressLayer. path = [path CGPath]; // pass the path to the layer, and then the layer will process the corresponding rendering, the entire logic and Co ReGraph is consistent. [Self. layer addSublayer: _ progressLayer];

Step 3 is the last step.

Use the ring path generated in step 2 to capture the gradient layer generated in step 1.

[GradientLayer setMask: _ progressLayer]; // uses the progressLayer to intercept the gradient layer self. layer addSublayer: gradientLayer];

The intercepted layer is what we need at last. Let's take a look at what we get after the last screenshot.

4. jpg

By now, we have completed 99%. The last step is to display the ratio of the number of records as needed. The proportion is controlled in the progress attribute of the second part, and the proportion is between 0 and 1. Let's take a look at the final effect.

1. jpg