【swift】 色々なIndicator比較

# Indicatorとは
　`Indicator`とは、ロード中などを示すクルクルするアレです。このクルクルを表示することで、ユーザーにロード中であるということや、場合によっては今は操作できないということを伝えることができます。
　Swiftには`ActivityIndicatorView`という`Indicator`が標準で備わっていますが、そのほかにも様々な`Indicator`をライブラリを使うことで利用することができます。この記事では、それぞれの`Indivator`がどのような見た目なのか、どうやって使用するものなのか見ていきます。

この記事で紹介する`Indicator`は以下の通りです。
* ActivityIndicatorView
* PKHUD
* NVActivityIndicator
* GradientCircularProgress
* KRProgressHUD

### ActivityIndicatorView
![AIVGIF.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2763612/61902e1d-aac9-30e4-6faa-f4fdfa02b99b.gif)
（なんか赤くなってますが、実際は赤らんだ感じはないです。）

　`ActivityIndicatorView`は今回紹介する中で唯一ライブラリを必要としないものになります。
iPhoneにデフォルトで入っているアプリでよく使われていいるため、iPhoneユーザにとっては一番よく見る`Indicator`だと思います。

コードは以下の通りです。
```swift
var activityIndicator: UIActivityIndicatorView!
activityIndicator = UIActivityIndicatorView()
activityIndicator.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height)

//アニメーションを止めたときにIndicatorを非表示にするかどうか。falseにすると止めた後も止まった状態のIndicatorが表示され続ける。
activityIndicator.hidesWhenStopped = true

//ActivityIndicatorViewの表示の大きさを変更する。large、medium、whiteLargeを選択できる。
activityIndicator.style = .large
activityIndicator.color = .white
self.view.addSubview(activityIndicator)

//クルクル開始
activityIndicator.startAnimating()

//クルクル終わり
activityIndicator.stopAnimating()

```
かなりシンプルな見た目なので、とても使いやすいです。また、多くのiPhoneユーザーにとって見慣れたものなので、場面やアプリの雰囲気に関係なく使えるものだと思います。

### PKHUD
https://github.com/pkluz/PKHUD

![PKHUDGIF.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2763612/4628fbfb-7e95-d739-e3dd-be1fff7518b2.gif)

`PKHUD`も`ActivityIndicatorView`と同様によく使われているものだと思います。このライブラリは`Indicator`以外にも数種類のアラートを表示させることができるのでかなり便利です。コードは以下の通りです。

```swift
import PKHUD

HUD.show(.progress, onView: self.view)
HUD.hide()
```
たった２行で実装することができます。`Indicator`の表示を適用したViewは薄灰色になるのでよりロード中であることが分かりやすくなっています。
ただ、`Indicator`の色は変更できないようなので（調べ不足かもしれません）、カラフルな`Indicator`を表示するのには向いていません。

### NVActivityIndicatorView
https://github.com/ninjaprox/NVActivityIndicatorView

![NVAIVGIF.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2763612/5915ff56-8011-a771-23bb-c9b7f9e882ca.gif)

`NVActivityIndicatorView`は１６種類の`Indicator`を実装することのできるライブラリです。
```swift
import NVActivityIndicatorView

var nvActivatorIndicator: NVActivityIndicatorView = NVActivityIndicatorView(frame: CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height), type: NVActivityIndicatorType.circleStrokeSpin, color: .red, padding: 400)
view.addSubview(nvActivatorIndicator)

nvActivatorIndicator.startAnimating()

nvActivatorIndicator.stopAnimating()
```
色や大きさのカスタマイズが簡単にできるだでなく、１６種類ものアニメーションが用意されているので、作成しているアプリに合わせた`Indicator`の表示を行えます。

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

![GCProgressGIF.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2763612/c1c2d9ec-73d5-e4cb-88d5-a1b7c058f016.gif)
`GradientCircularProgress`はカラフルなクルクルを実装することのできるライブラリです。

```swift
import GradientCircularProgress

class ViewContorller: UIViewContorller{

    override func viewDidLoad(){
        super.viewDidLoad()

        let gCProgress = GradientCircularProgress()
        let gcProgressView = gCProgress.show(frame: CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height), message: "Now Loading", style: CGProgressStlye())
        view.addSubview(gcProgressView!)
        
        gcProgress.dismiss(progress: gcProgressView!)
    }
}

//上記のGif画像で真ん中のIndicator
public struct CGProgressStlye1: StyleProperty{
    public var progressSize: CGFloat = 100
    
    public var arcLineWidth: CGFloat = 10
    
    public var startArcColor: UIColor = .red
    
    public var endArcColor: UIColor = .orange
    
    public var baseLineWidth: CGFloat? = 3
    
    public var baseArcColor: UIColor? = .white
    
    public var ratioLabelFont: UIFont? = .systemFont(ofSize: 10)
    
    public var ratioLabelFontColor: UIColor? = .black
    
    public var messageLabelFont: UIFont? = .systemFont(ofSize: 10)
    
    public var messageLabelFontColor: UIColor? = .black
    
    public var backgroundStyle: BackgroundStyles = .none
    
    public var dismissTimeInterval: Double? = 2.0
    
    public init() {}
}
```
`GradientCircularProgress`は今まで紹介したIndicatorの中でも実装するのに必要なコード量が多めですが、その分細かいカスタマイズが可能です。特に、クルクルの最初と最後の色を別のものにすることができるので、上手い色の組み合わせを作ることができればアプリにあったIndicatorを実装することができます。

### KRProgressHUD
https://github.com/krimpedance/KRProgressHUD/blob/master/README_Ja.md

![KRPGIF.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2763612/e0230394-20c3-5d36-a2aa-24b22a895185.gif)

`KRProgressHUD`は`PKHUD`と同様に`Indicator`以外のアラートも表示することのできるライブラリです。

```swift
import KRProgressHUD

KRProgressHUD.show()

//カスタマイズする場合
KRProgressHUD.set(activityIndicatorViewColors: [.red, .white]).set(style: .custom(background: .black, text: .white, icon: nil)).show(withMessage: "Now Loading")

KRProgressHUD.dismiss()
```
手軽に表示できる上にかなり簡単にカスタマイズもできます。


## 終わりに
ここで紹介した以外にも`Indicator`を表示するライブラリはいくつかあるようです。アプリのUI向上のためにも、アプリのデザインや雰囲気にあった`Indicator`を見つけてあげましょう！