[SWIFT] Implement ProgressBar using library


I decided to introduce a Progress Bar to tell the count app currently under development how much it is to reach the goal. In this article, I will output what I tried at that time.

Completed form


Library used

・ MBCircularProgressBar →https://github.com/MatiBot/MBCircularProgressBar

Install using CocoaPods

Install SwiftConfettiView using CocoaPods.

pod "MBCircularProgressBar"

Enter the above in the Podfile and pod install.

Place parts on Storyboard

スクリーンショット 2020-12-30 19.10.16.png Place the View in the ViewContoroller. ![スクリーンショット 2020-12-30 19.08.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/930365/c8a7d4dc-7e8d-5017-22aa-6351c968a558.png) Set the Class of Custom Class to `` MBCircularProgressBarView``. スクリーンショット 2020-12-30 19.17.17.png A circular Progress Bar will appear. スクリーンショット 2020-12-30 19.22.26.png Button and Text Field are installed.



    var number: Float = 0
    var paersent: Float!
    var targetNumber: Float!
    @IBOutlet weak var targetNumberTextField: UITextField!
    @IBOutlet weak var countNumberLabel: UILabel!
    @IBOutlet weak var progressView: MBCircularProgressBarView!

Declare variables and associate parts.

 @IBAction func countButton(_ sender: Any) {
        //Get the target number of times
        targetNumber = Float(targetNumberTextField.text!)
        //Add 1 to number
        number += 1
        //Display the number obtained by adding 1 to number
        countNumberLabel.text = "\(number)"
        //Calculate percentage
        paersent = number / targetNumber * 100
        //Show percentage
        progressView.value = CGFloat(paersent)

Processing when the countButton is pressed.

    @IBAction func resetButton(_ sender: Any)
        number = 0
        progressView.value = CGFloat(number)

Processing when the resetButton is pressed.


This time, we set a target number of times and visualized how much it was left as a percentage. The library can also customize bar colors and more. Please refer to the following URL for customization.


・ MBCircularProgressBar →https://github.com/MatiBot/MBCircularProgressBar -[IOS] [Swift] MBCircularProgressBar realizes a circular progress bar! →https://dev.classmethod.jp/articles/mbcircularprogressbar/ -Circular progress bar implementation (MBCircularProgressBar) →https://qiita.com/Walkdream24/items/440b1c2757048b340920

Recommended Posts

Implement ProgressBar using library
Implement category function using ancestory
[Swift] Implement UITableView using xib
Implement declarative retry processing using Spring Retry
Implement user management functionality using Devise
Implement search functionality using LIKE clauses
[Java] Try to implement using generics
Implement pagination using SpringData Pageable + Thymeleaf
[Swift5] How to implement animation using "lottie-ios"
How to implement image posting using rails
Implement button transitions using link_to in Rails