73
69

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

カスタマイズ可能なプログレス表示のライブラリをSwiftで書いてみた

Posted at

これまでSVProgressHUDに大変お世話になってきたのですが、SwiftのプロジェクトではSwiftで書かれたライブラリを使いたいですし、見映えもアプリに合わせてカスタマイズできるとうれしいので、Swiftの勉強の一環としてライブラリを書いてみました。

Github: keygx/GradientCircularProgress
https://github.com/keygx/GradientCircularProgress

Cocoa Controls: GradientCircularProgress for iOS
https://www.cocoacontrols.com/controls/gradientcircularprogress
Cocoa Controls にも掲載してもらえたので、こちらもw

  • 下のスクリーンショットはプリセットスタイルのBlueDarkStyle

BlueDarkStyle.png

Githubに上げたインチキ英語のREADMEには使い方をうまく書けなかったので、こちらに改めて書いておきたいと思います。

##概要
・独自のスタイルを複数定義可能
・進捗率 あり/なし の2パターンの表示が可能
・2色のグラデーションによる円弧表示が可能
・背景は4種から選択可能(UIBlurEffectの3種+背景なし)

##インストール
CocoaPods、Carthageに対応しています。詳細はGithubへ。
※動作環境は、iOS8以上になります。

##スタイルのカスタマイズ
各種パラメータを定義しているStyleクラスを継承したサブクラスにてパラメータを上書きし、独自のスタイルを作成してください。

※設定可能なパラメータはこちらです。(下記のコードと合わせてご覧ください)

properties.png

Style.swift(一部抜粋)
// Progress Size
public var progressSize: CGFloat

// Gradient Circular
public var arcLineWidth: CGFloat
public var startArcColor: UIColor
public var endArcColor: UIColor

// Base Circular
public var baseLineWidth: CGFloat
public var baseArcColor: UIColor

// Ratio
public var ratioLabelFont: UIFont
public var ratioLabelFontColor: UIColor

// Message
public var messageLabelFont: UIFont
public var messageLabelFontColor: UIColor

// Background
public var backgroundStyle: BackgroundStyles

// 背景は以下から選択
public enum BackgroundStyles : Int {
    case None = 0
    case ExtraLight
    case Light
    case Dark
}

サンプルとしていくつかのプリセットスタイルを用意していますので、それらをそのまま使っていただいても構わないのですが、自由にスタイルをカスタマイズできるのが本ライブラリの特徴なので、ぜひそれぞれのアプリに合わせたカスタムスタイルを定義して使ってもらえたらうれしいですね。

カスタムスタイルの書き方のサンプルファイルは Sample/MyStyle.swift にあります。

MyStyle.swift
import GradientCircularProgress

public class MyStyle : Style {
    
    override init() {
        super.init()
        /*** style properties ***/
        // Progress Size
        self.progressSize = 200
        
        // Gradient Circular
        self.arcLineWidth = 18.0
        self.startArcColor = UIColor.darkGrayColor()
        self.endArcColor = UIColor.greenColor()
        
        // Base Circular
        self.baseLineWidth = 19.0
        self.baseArcColor = UIColor.darkGrayColor()
        
        // Percentage
        self.ratioLabelFont = UIFont(name: "Verdana-Bold", size: 16.0)!
        self.ratioLabelFontColor = UIColor.whiteColor()
        
        // Message
        self.messageLabelFont = UIFont.systemFontOfSize(16.0)
        self.messageLabelFontColor = UIColor.whiteColor()
        
        // Background
        self.backgroundStyle = .Dark
        /*** style properties ***/
    }
}

###【参考】プリセットのスタイルと呼び出し
#####Style Source/Style.swift

GCProgress().show(message: "Loading...")

scr_Style.png
※デフォルトになります。
(わかりにくいですが、背景ありは下にある画面がぼやけて透けます)

#####BlueDarkStyle Source/BlueDarkStyle.swift

GCProgress().showAtRatio(style: BlueDarkStyle())

scr_BlueDarkStyle.png
※通常はアプリのキーカラーをベースにグラデーションを設定するのが良いでしょう。

#####OrangeDarkStyle Source/OrangeDarkStyle.swift

GCProgress().show(message: "Loading...", style: OrangeDarkStyle())

scr_OrangeDarkStyle.png
※2色のうち1色を背景に近い色にすれば、消えていくようなグラデーション表現も可能です。

#####IndicatorStyle Source/IndicatorStyle.swift

GCProgress().showAtRatio(display: false, style:IndicatorStyle())

scr_IndicatorStyle.png
※小さいサイズも定義できます。この場合進捗は非表示に。でないと文字が重なりますw

#####BlueIndicatorStyle Source/BlueIndicatorStyle.swift

GCProgress().show(style: BlueIndicatorStyle())

scr_BlueIndicatorStyle.png
※背景なしの場合は当然画面の操作が可能です。

このサンプルアプリの画面ではカッコつかないなぁ

##使い方
GCProgressクラスに以下のメソッドが用意されています。

// 進捗率ありで表示
public func showAtRatio(display: Bool = true, style: Style = Style())

// 進捗率の更新
public func updateRatio(ratio: CGFloat)

// 進捗率なしで表示
public func show(style: Style = Style())

// 進捗率なしで表示(メッセージ付)
public func show(#message: String, style: Style = Style())

// 表示終了
public func dismiss()

スタイルの定義をまるっと外出しできたので、呼び出しのコードはとてもシンプルになっています。

####進捗率あり

import GradientCircularProgress

// 表示開始
var gcp = GCProgress()
gcp.showAtRatio(style: MyStyle())


// 進捗率の更新
let ratio: CGFloat = 進捗率を0〜1で取得  
gcp.updateRatio(ratio)

// 表示終了
gcp.dismiss()

####進捗率なし

import GradientCircularProgress

// 表示開始
GCProgress().show(message: "Loading...", MyStyle())

// 表示終了
GCProgress().dismiss()

Swiftだとこのようにワンライナーでも書けます。

##まとめ
いかがでしょうか。スタイルの設定を複数使い分けることもできますので、背景あり(モーダル表示)と背景なしで、プログレスの大きさなどを変えたりもできます。また、スタイルの設定もプログラムですので、ある程度動的な設定も可能でしょう。
いろいろと使える場面は多いかと思います。

73
69
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
73
69

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?