【Swift】シンプルでオシャレなNVActivityIndicatorView使ってみた【例のくるくる】

今回も備忘録です．


綺麗なローディングのあれ（くるくる回る奴）を自作しようとしたところ
おしゃれなライブラリがすでにあったので使ってみた．

![スクリーンショット 2016-11-11 2.07.08.png](https://qiita-image-store.s3.amazonaws.com/0/137949/418706b0-acd6-18d3-1397-cd56789c568e.png)

アイツの正式名称，インジケーターというらしい，初めて知った

##環境

Xcode8，Sierra，Swift3，cocoapodsインストール済み

cocoapods のインストール方法は先人の偉い人がたくさん書いてるのでそっちを見てください．


##導入

1.まず，プロジェクトを立てる（名前は任意で）．

2.ターミナルで，さっき作ったプロジェクトに移る
>`cd documents/swift/{プロジェクト名}`

3.Podfileの作成．以下をターミナルで実行
>`pod init`

4.Podfileを開く．これもターミナルで
>`open Podfile`

5.Podfileに　`pod 'NVActivityIndicatorView'`を追加
![スクリーンショット 2016-11-11 2.20.46.png](https://qiita-image-store.s3.amazonaws.com/0/137949/a42a7b74-570f-08b9-59d9-4acd80a01859.png)

6.ライブラリのインストール.ターミナr(ry
>`pod install`

おkっぽかったらおk．　次のステップへ


##実装

1.　{プロジェクト名}.xcworkspaseという白っぽいファイルを開く．

2.　{プロジェクト名}　>　Main.storyboard　を開く．

3.　右下からViewを真ん中っぽいところにドラッグ＆ドロップで置く．

4.追加したViewを選択して，　Identity　inspectorを開いて,ClassとModuleをNVActivityIndicatorに変更．
>![スクリーンショット 2016-11-11 2.37.10.png](https://qiita-image-store.s3.amazonaws.com/0/137949/c73cac72-3660-728b-bd23-326119534b0a.png)

5.assistant editor を開いて，　追加したViewをドラッグ＆ドロップでソースコードに配置．
nameはactiveIndicatorとでもしときましょう．

6.NVActivityIndicatorをインポートする
>`import NVActivityIndicator`

7.viewDidLoad()の中に１行を追加．実際のコードだとこう

```swift:SettingViewController.swift
import UIKit
import NVActivityIndicatorView

class SettingViewController: UIViewController {

    @IBOutlet weak var activeIndicatorView: NVActivityIndicatorView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //ここの１行を追加
        activeIndicatorView.startAnimating()

        // Do any additional setup after loading the view.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
```

8.結果
![スクリーンショット 2016-11-11 2.51.50.png](https://qiita-image-store.s3.amazonaws.com/0/137949/63fcfb5a-4ba5-eaba-2418-32dcf7b5fca0.png)


できた！！！！


##カスタマイズ

NVActivityIndicatorはこのくるくる以外にもカッコいいインジケーターがたくさんある．

![activeIndicator.gif](https://qiita-image-store.s3.amazonaws.com/0/137949/fcf41a29-7b8e-1d56-dcd4-1b586cd4c6f0.gif)

| 1 | 2 | 3 | 4 |
|:-:|:-:|:-:|:-:|
|1. BallPulse |2. BallGridPulse |3. BallClipRotate |4. SquareSpin |
|5. BallClipRotatePulse|6. BallClipRotateMultiple |7. BallPulseRise |8. BallRotate |
|9. CubeTransition|10. BallZigZag|11. BallZigZagDeflect|12. BallTrianglePath|
|13. BallScale|14. LineScale|15. LineScaleParty|16. BallScaleMultiple|
|17. BallPulseSync|18. BallBeat|19. LineScalePulseOut|20. LineScalePulseOutRapid|
|21. BallScaleRipple|22. BallScaleRippleMultiple|23. BallSpinFadeLoader|24. LineSpinFadeLoader|
|25. TriangleSkewSpin|26. Pacman|27. BallGridBeat|28. SemiCircleSpin|
|29. BallRotateChase|30. Orbit|31. AudioEqualizer|


もし，１２番のくるくるが使いたかったら，

1.ストーリーボードから，activeIndicatorのView　　>　attribute Inspector　を選択し
Type Nameに表の文字を入れる.
**※数字は入れないでください**

2.enterを押す

Identity Inspectorに移動すると
![スクリーンショット 2016-11-11 3.07.32.png](https://qiita-image-store.s3.amazonaws.com/0/137949/d0ba7433-622f-d7fa-7319-4c589c2b1b44.png)

User Defined Runtime Attributesのところに自分の追加したいくるくるの名前が入ってたらおk

![スクリーンショット 2016-11-11 3.07.13.png](https://qiita-image-store.s3.amazonaws.com/0/137949/e546bdea-2ffa-fa73-69e7-bb5858ca0aa9.png)

できた！！！！！！！！！！！！！！！！！！！！！！！！！！！


##まとめ

公式サイトが懇切丁寧に解説してることを汚い日本語に直しただけ
[https://github.com/ninjaprox/NVActivityIndicatorView](https://github.com/ninjaprox/NVActivityIndicatorView)

くるくるの始まりは，`activityIndicatorView.startAnimating()`

終わりは，`activityIndicatorView.stopAnimating()`

とするらしい．

終わりの時のメソッドってどこで使うの？w

色もボタンで変えれるので，めっちゃ簡単．良い


*いや，ならないよ．もっとこうしろ！面白いもっとやれ　などなどありましたら，
コメント欄にお願いします．*