IOS project development practice-custom circular progress prompt control

IOS project development practice-custom circular progress prompt control

The default progress bar in iOS is a horizontal progress bar, which often cannot meet our needs. However, we can customize a progress prompt control similar to the circular one, which is mainly implemented using the Drawing Mechanism in iOS. Here, we need to implement the effect of clicking through the button and then the circular progress prompt continuously increasing.

(1) create a Cocoa Touch Class and inherit from UIView. This is the class for drawing graphics, drawing a circular background and the progress of the slice. The specific implementation is as follows:

 

Import UIKitclass ProgressControl: UIView {override init (frame: CGRect) {super. init (frame: frame) self. backgroundColor = UIColor (white: 1, alpha: 0) // initialize the drawing background to white;} required init (coder aDecoder: NSCoder) {super. init (coder: aDecoder)} private var _ progressValue: CGFloat = 0 // This is the current progress; func getProgressValue ()-> CGFloat {return _ progressValue} func setProgressvalue (value: CGFloat) {// set the progress; _ progressValue = value setNeedsDisplay ()} override func drawRect (rect: CGRect) {// draw the circular background and slice progress; var context = UIGraphicsGetCurrentContext () var r = rect. width/2 CGContextAddArc (context, r, 0, 3.1415926*2, 0) CGContextSetRGBFillColor (context, 0.5, 0.5, 0.5, 1) CGContextFillPath (context) CGContextAddArc (context, r, 0, 3.1415926*2 * _ progressValue, 0) CGContextAddLineToPoint (context, r, r) CGContextSetRGBFillColor (context, 0, 0, 1, 1) CGContextFillPath (context )}}

(2) drag a button to the interface and drag the Action event. Implement the following in ViewController:

 

 

Import UIKitclass ViewController: UIViewController {var progressControl: ProgressControl! Override func viewDidLoad () {super. viewDidLoad () progressControl = ProgressControl (frame: CGRect (x: 100, y: 100, width: 100, height: 100) self. view. addSubview (progressControl)} // click the button to add Progress @ IBAction func addProgressValuePressed (sender: UIButton) {progressControl. setProgressvalue (progressControl. getProgressValue () + 0.1)} override func didReceiveMemoryWarning () {super. didReceiveMemoryWarning () // Dispose of any resources that can be recreated .}}

(3) The final implementation result is as follows:

 

.

 

.

 

You can also use this custom circular progress control to prompt other trigger events.