スピードメーターをつくってみた（swift）

#はじめに
objective-cでつくったはいいけど**使っていない**クラスをswiftに書き換えてgithubにあげてみたので、そのクラスについて紹介したいと思います。自分はまだ使う場面がない（今のところ思いつかない）ので、あわよくばだれかに使ってもらえたらいいなと思います。(第二弾)

[前回のやつ](https://qiita.com/am10/items/0222e6966d58062d2eca)

2019/04/21 せっかくなんでswift5.0対応しました
2019/10/16 せっかくなんでSwiftPM対応しました

#GitHub
今回はこちらの２つのクラスについて紹介します。

* [AMMeterView](https://github.com/adventam10/AMMeterView)
* [AMSpeedMeterView](https://github.com/adventam10/AMSpeedMeter)

#見た目
##AMMeterView

![meter.gif](https://qiita-image-store.s3.amazonaws.com/0/225999/b549c63c-ddc8-45f3-b540-13080df6d707.gif)

##AMSpeedMeterView

![speedmeter.gif](https://qiita-image-store.s3.amazonaws.com/0/225999/f8477b23-49e1-b997-8674-3351b06db76c.gif)

#機能
##AMMeterView
時計の文字盤を利用して選択肢から１つの値を取得するためのView

* 文字盤、枠線、目盛りの文字、目盛り、針などの色の設定ができる

##AMSpeedMeterView
timerなどで一定の間隔で値を渡してやると車のスピードメーターのように針がアニメーションして振れるView

* 文字盤、枠線、目盛りの文字、目盛り、針などの色の設定ができる
* 目盛りの文字のフォントが設定できる

#使い方
##AMMeterView
1. xibにカスタムクラスを設定  
<img width="256" alt="custom_class.png" src="https://qiita-image-store.s3.amazonaws.com/0/225999/9db01858-aa07-bf6b-1648-8009215212e3.png">

2. 線の太さ、色や文字盤などを設定  
<img width="255" alt="IBInspectable.png" src="https://qiita-image-store.s3.amazonaws.com/0/225999/1addf21c-cbff-9d4d-be27-5b8fcfe95316.png">

3. デリゲートを設定する  
デリゲートはtableViewを意識してつくりました。

	```swift
	@IBOutlet weak var meterView: AMMeterView!
	meterView.delegate = self
	meterView.dataSource = self
	```
	
	目盛りの数を設定する

	```swift
	func numberOfValue(in meterView: AMMeterView) -> Int
	```
	
	目盛りに表示する文字列を設定する

	```swift
	func meterView(_ meterView: AMMeterView, valueForIndex index: Int) -> String
	```
	
	目盛りに表示する文字の色とフォントを設定する

	```swift
	func meterView(_ meterView: AMMeterView, textColorForValueAtIndex index: Int) -> UIColor // default is black
func meterView(_ meterView: AMMeterView, textFontForValueAtIndex index: Int) -> UIFont // default is System 15.0
	```

	針を動かして値を選択すると下記が呼ばれる

	```swift
	func meterView(_ meterView: AMMeterView, didSelectAtIndex index: Int)
	```
	
	引数のindexは目盛りの位置を表しており、12時の位置から時計回りに0,1,2...となります。

色々設定するとこんな感じです。
<img width="345" alt="meter.png" src="https://user-images.githubusercontent.com/34936885/66727449-3db1e400-ee7a-11e9-8003-217c14ebb2ef.png">

##AMSpeedMeterView
1. xibにカスタムクラスを設定  
<img width="256" alt="custom_class.png" src="https://qiita-image-store.s3.amazonaws.com/0/225999/1ead6961-4fee-51bf-172d-ee8a3353c07f.png">

2. 線の太さ、色や文字盤などを設定  
<img width="257" alt="IBInspectable_1.png" src="https://qiita-image-store.s3.amazonaws.com/0/225999/9eead32c-462a-ed47-3f6f-796ea540c853.png">

3. 目盛りの最大値、最小値、目盛りの数を設定  
<img width="256" alt="IBInspectable_2.png" src="https://qiita-image-store.s3.amazonaws.com/0/225999/6c08f1b5-670d-3635-672d-fbdfeb9fb72b.png">

4. タイマーなどで値を渡す

	```swift
	@IBOutlet weak var speedmeterView: AMSpeedMeterView!
	
	// タイマーのアクション
	@objc func timerAction(teimer:Timer) {
        
        // 何か値を渡す
        speedmeterView.currentValue = value
    }
	```

色々設定するとこんな感じです。
<img width="333" alt="speedmeter.png" src="https://user-images.githubusercontent.com/34936885/66710713-e435b080-edb8-11e9-8107-9c6bacc8f8ae.png">

#つくったきっかけ
##AMMeterView
前回の[時計](https://qiita.com/am10/items/0222e6966d58062d2eca)を作った際に、時計を何か他の形で利用できないかと思いつくりました。
##AMSpeedMeterView
AMMeterViewと同じような理由です。

#使わなかった理由
##AMMeterView
1. 場所をとる  
パンジェスチャにより針を動かすため、快適に使おうと思うとある程度の大きさが必要になる。用途としては、ラジオボタンやドロップダウンのように選択肢から１つの値を選択する場合を想定していたが、わざわざこれを使う理由がない。
2. 表示文字数が限られる  
目盛りに表示する文字が、円上に表示するため表示できる文字数が少ない。（３文字か多くても５文字程度）

##AMSpeedMeterView
録音アプリで録音中の音の大きさを表示したらどうだろうと思ったが、録音アプリをつくる機会がなかった。

#さいごに
以上の理由から今のところは使用していませんが、もしかしたら今後使う場面があるかもしれません（もしくは思いつくかもしれない）。一定間隔で値を取得して表示したい場合ってなんだろう...

私はほぼObjective-Cしか使ったことがないペーペーのプログラマーなので記事内容やgithubのコードにおかしなところがあればご指摘いただければ幸いです。

#つくったのまとめ
* [アナログ時計を描画してみた（swift）](https://qiita.com/am10/items/0222e6966d58062d2eca)
* [スピードメーターをつくってみた（swift）](https://qiita.com/am10/items/0fe8cffac7dd7659eb2a)
* [めくるカレンダーをつくってみた(swift)](https://qiita.com/am10/items/2a929ca8196f33cb1d4a)
* [グラフを描画してみた(swift)](https://qiita.com/am10/items/aee964a8a7a9712d66f8#_reference-ca2e5485de5acf8eca97)
* [ちからわざで日本地図を描いてみた(swift)](https://qiita.com/am10/items/26de3242ee33b4bd4aae)
* [カラーピッカーをつくってみた(swift)](https://qiita.com/am10/items/82a4adb2267979841c9e)
* [面積比がそれっぽいベン図を描いてみた(swift)](https://qiita.com/am10/items/858041f70be4d8de5090)
* [UIViewを燃やしてみた（swift）](https://qiita.com/am10/items/f7b32ea5725feeb1469f)

##動作確認用にまとめたプロジェクト
* [Carthageで入れたやつ](https://github.com/adventam10/TestCarthage)
* [CocoaPodsで入れたやつ](https://github.com/adventam10/TestCocoaPods)
* [SwiftPMで入れたやつ](https://github.com/adventam10/TestSwiftPM)