iOSアプリにおけるHUD(HeadUp-Display)を自作するためのライブラリを作ってみた

# iOSアプリにおけるHUD(HeadUp-Display)を自作するためのライブラリを作ってみた
こんにちは、[natmark](https://qiita.com/natmark)です。

今回、[HUDMakerKit](https://github.com/natmark/HUDMakerKit)というHUDを自作するためのライブラリを作ってみたので、そちらを紹介します。

## HUD(HeadUp-Display)とは
![gif](https://camo.githubusercontent.com/6ed028acbf67707d622344e0ef1bc3b098425b50/687474703a2f2f662e636c2e6c792f6974656d732f32473146315a304d306b306832553356317033392f535650726f67726573734855442e676966)
よくみる画面上にポップアップして、インジゲータなどを表示するやつです。

iOSでこのHUDを実装したいとき、以下のようなライブラリがよく使われます。

- [SVProgressHUD](https://github.com/SVProgressHUD/SVProgressHUD)
- [MBProgressHUD](https://github.com/jdg/MBProgressHUD)
- [PKHUD](https://github.com/pkluz/PKHUD)

単純にくるくるを表示するだけであれば、上のようなライブラリを使うことで簡単に実現できますが、凝ったアニメーション付きのHUDを作ろうと思うと、自作する必要がでてきます。

そこで、凝ったアニメーション付きHUDの実装を助けるライブラリとして、アニメーションの描画をシンプルな描画関数で行える[ProcessingKit](https://github.com/natmark/ProcessingKit)を用いて作成してみました。


## 作ったもの
![Header](https://github.com/natmark/HUDMakerKit/raw/master/Resources/header.png?raw=true)

HUDMakerKit: https://github.com/natmark/HUDMakerKit

[ProcessingKit](https://github.com/natmark/ProcessingKit)を利用し、シンプルな描画関数でアニメータブルなHUDを実装できるようになっています。

ProcessingKitの説明は[こちら](https://qiita.com/natmark/items/e4d88f949fd6760939bf)

## サンプル
![](https://github.com/natmark/HUDMakerKit/raw/master/Resources/simple.gif?raw=true)
例えば、上のような動きをするHUDを作りたい場合、下のようなコードを書くことで実装可能です。
![](https://github.com/natmark/HUDMakerKit/raw/master/Resources/simpleHUD.png?raw=true)
見慣れない関数が含まれていますが、`clear()`や`translate()`、`point()`などが`ProcessingKit`が提供している描画関数になります。

ProcessingKitでは、[Processing](http://processing.org/)というプログラミング言語の描画関数を同じインタフェースで提供しているため、このようなシンプルな構文で描画や図形変換を行うことができます。

## 導入
`Carthage`もしくは`CocoaPods`を使用して導入することができます。

### Carthageを利用する場合
```:Cartfile
github "natmark/HUDMakerKit" ~> 0.2.4
```

```zsh
$ carthage update --platform iOS --no-use-binaries
```

参考: https://qiita.com/yutat93/items/97fe9bc2bf2e97da7ec1

### CocoaPodsを利用する場合
```zsh
$ pod init
```

```ruby:Podfile
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'HUDMakerKitExample' do
  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks!

  # Pods for PKPodsExample
  pod "HUDMakerKit","~>0.2.4"
end
```

## 実装
1. `HUDMaker` を継承した、カスタムクラスを作る

```swift:SimpleHUD
import HUDMakerKit

class SampleHUD: HUDMaker {
    func draw(frameCount: Int) {
      // HUDが表示されている間、毎フレーム呼ばれる関数
    }
}
```

2. `func draw(frameCount:Int)`関数の中に、描画処理を書いていく

```swift:SampleHUD
class SampleHUD: HUDMaker {
    func draw(frameCount: Int) {
        // MARK: Examples
        fill(255, 0, 0) // 赤色で塗りつぶす
        ellipse(50, 50, 100, 100) // x:50, y50を中心に、幅100、高さ100の円を描く
    }
}
```

3. `HUDRunner`の`customHUD`プロパティに作成したカスタムHUDクラスを設定して、表示する

```swift:ViewController.swift
import UIKit
import HUDMakerKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        let customHUD = SampleHUD(frame: CGRect(x: 0, y: 0, width: 150, height: 150)) // カスタムHUDクラスのインスタンスを作る
        customHUD.backgroundColor = UIColor(red: 0.1, green: 0.1, blue: 0.1, alpha: 0.3) // HUDの背景色を設定したり
        customHUD.layer.cornerRadius = 10 // 角丸にしたり

        HUDRunner.shared.customHUD = customHUD // HUDRunnerのcustomHUDにカスタムHUDクラスのインスタンスを設定する
    }

    @IBAction func didTapShowButton(_ sender: Any) {
        HUDRunner.shared.show() // HUDを表示する
    }
}
```

## サンプルについて
- natmark/HUDMakerKitのなかに[HUDMakerKitDemo](https://github.com/natmark/HUDMakerKit/tree/master/HUDMakerKitDemo)というデモ用アプリを用意しています