【swift】GradientCircularProgressを試してみる

今回はカスタマイズ可能なプログレスを表示できる「GradientCircularProgress」を試していきたいと思います。ライセンスはMITです。

keygx/GradientCircularProgress
Customizable progress indicator library in Swift. Contribute to keygx/GradientCircularProgress development by creating an account on GitHub.

では、いきましょう

手順

1.まずはプロジェクトを作成して、podで該当ライブラリをインストール&xcworkspaceを起動します。

pod 'GradientCircularProgress', :git => 'https://github.com/keygx/GradientCircularProgress'

2.サンプルのスタイルを利用することもできるのですが、今回はカスタマイズした(といってもサンプルの数値をちょこっといじっただけ)スタイルを作成します。

  「CustomProgressStyle.swift」という名前で下記内容のファイルを作成しました。

import UIKit
import GradientCircularProgress

public struct CustomProgressStyle: StyleProperty {
    // Progress Size
    public var progressSize: CGFloat = 260
    
    // Gradient Circular
    public var arcLineWidth: CGFloat = 20.0
    public var startArcColor: UIColor = ColorUtil.toUIColor(r: 0.0, g: 122.0, b: 255.0, a: 1.0)
    public var endArcColor: UIColor = UIColor.cyan
    
    // Base Circular
    public var baseLineWidth: CGFloat? = 5.0
    public var baseArcColor: UIColor? = UIColor(red:0.0, green: 0.0, blue: 0.0, alpha: 0.2)
    
    // Ratio
    public var ratioLabelFont: UIFont? = UIFont(name: "Verdana-Bold", size: 30.0)
    public var ratioLabelFontColor: UIColor? = UIColor.white
    
    // Message
    public var messageLabelFont: UIFont? = UIFont.systemFont(ofSize: 30.0)
    public var messageLabelFontColor: UIColor? = UIColor.white
    
    // Background
    public var backgroundStyle: BackgroundStyles = .dark
    
    // Dismiss
    public var dismissTimeInterval: Double? = nil // 'nil' for default setting.
    
    public init() {}
}

3.ViewController.swiftで表示します。ボタンを押したら表示されるようにしてみました。

import UIKit
import GradientCircularProgress

class ViewController: UIViewController {
    
    var gcp = GradientCircularProgress()

    override func viewDidLoad() {
        super.viewDidLoad()
        
    }
        
    @IBAction func start(_ sender: Any) {
        self.gcp.show(message: "Loading", style: CustomProgressStyle())
    }
    
}

4.実行結果です(動いてなくてすみません。。。実際はクルクルしています)

以上で完了です。

いい感じに表示できました。今回は「進捗率なし」のパターンでしたが、「進捗率あり」パターンも簡単に実装できそうなので、そのうち試してみたいと思います。

コメント