Effect chart
Realize the idea
To implement a drawing, it is often necessary to customize a UIView subclass, overriding the parent-(void) DrawRect: (CGRect) Rect method, which implements drawing operations in the method
To display the download progress, you only need to instantiate a custom subclass object (in the case of a storyboard control, simply modify the control's Class property to a custom subclass name)
The effect of the image shown is actually to draw an arc, the dynamic change in the end of the position, and eventually reached a closed circle
The middle text is a Uilabel control, changing the reality of the text according to the progress dynamically
Implementation steps
Customizing a UIView Subclass
Provides a member property to receive download progress values
@property (nonatomic, assign) cgfloat progress;
overriding a member property progress setter
Each time the value of the member property progress is changed, its setter
-(void) Setprogress: (cgfloat) Progress
{
_progress = progress is invoked;
Manually invoke the Redraw method
[self setneedsdisplay] when the download progress changes;
Rewrite-(void) DrawRect: (cgrect) rect (CORE)
-(void) DrawRect: (cgrect) Rect {//Set radius of arc cgfloat radius = rect.size.width * 0.5;
Set the center of the arc cgpoint Center = cgpointmake (radius, radius);
Set the starting angle of the arc (radians) cgfloat startangle =-m_pi_2;
Set the end angle of the arc cgfloat endangle =-m_pi_2 + 2 * m_pi * self.progress; Use the Uibezierpath class to draw arcs uibezierpath *path = [Uibezierpath bezierpathwitharccenter:center radius:radius-5:
StartAngle Endangle:endangle Clockwise:yes];
Renders the drawn arc to a layer (that is, displayed) [path stroke]; }