カラーピッカーをつくってみた(swift)

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

[第一弾（時計）](https://qiita.com/am10/items/0222e6966d58062d2eca)

[第二弾（スピードメーター）](https://qiita.com/am10/items/0fe8cffac7dd7659eb2a)

[第三弾（めくるカレンダー）](https://qiita.com/am10/items/2a929ca8196f33cb1d4a)

[第四弾（グラフ）](https://qiita.com/am10/items/aee964a8a7a9712d66f8#_reference-ca2e5485de5acf8eca97)

[第五弾（日本地図）](https://qiita.com/am10/items/26de3242ee33b4bd4aae)

2019/04/21 せっかくなんでswift5.0対応しました
2019/10/16 せっかくなんでダークモード対応しました

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

[AMColorPicker](https://github.com/adventam10/AMColorPicker)

#見た目
![colorpicker.gif](https://qiita-image-store.s3.amazonaws.com/0/225999/0a8910aa-ddaa-79fb-0d3d-5ab0ff6f53e6.gif)

#機能
３種類の方法で色を選択できる

|  Wheel  |  Table  |  Slider  |
| ---- | ---- | ---- |
|  ![wheel](https://user-images.githubusercontent.com/34936885/35519518-d76bd3ca-0557-11e8-87f6-8f3c380b1583.png)  |  ![table](https://user-images.githubusercontent.com/34936885/35519545-eb43810e-0557-11e8-83a6-420cb32fe54a.png)  |  ![slider](https://user-images.githubusercontent.com/34936885/35519569-f804158e-0557-11e8-95ea-05318a72db47.png)  |

#使い方
1. 画面を表示する  
指定のViewControllerから遷移する
	
	```swift
	let colorPickerViewController = AMColorPickerViewController()
	present(colorPickerViewController, animated: true, completion: nil)
	```
2. 初期選択の色を設定する  
	
	```swift
	let colorPickerViewController = AMColorPickerViewController()
	colorPickerViewController.selectedColor = UIColor.red
	```
	設定しない場合は白色になる

3. デリゲートを設定する  
	
	```swift
	let colorPickerViewController = AMColorPickerViewController()
	colorPickerViewController.delegate = self
	```
	色を選択すると下記のデリゲートが呼ばれる
	
	```swift
	protocol AMColorPickerDelegate: NSObject {
    
    	func colorPicker(_ colorPicker: AMColorPicker, didSelect color: UIColor)
	}
	```

#### Modal
|  Wheel  |  Table  |  Slider  |
| ---- | ---- | ---- |
|  ![modal_w](https://user-images.githubusercontent.com/34936885/66719031-9b681100-ee25-11e9-9c3b-e9b15b5519e6.png) |  ![modal_t](https://user-images.githubusercontent.com/34936885/66719024-9014e580-ee25-11e9-9973-1dac2b90251d.png)  |  ![modal_s](https://user-images.githubusercontent.com/34936885/66719021-825f6000-ee25-11e9-8ebb-dc85a0dc26a9.png)  |

#### Push
|  Wheel  |  Table  |  Slider  |
| ---- | ---- | ---- |
|  ![push_w](https://user-images.githubusercontent.com/34936885/66719044-b63a8580-ee25-11e9-97ef-dbe1aa543378.png)  |  ![push_t](https://user-images.githubusercontent.com/34936885/66719039-ab7ff080-ee25-11e9-9d0c-941c2c42a478.png)  |  ![push_s](https://user-images.githubusercontent.com/34936885/66719035-a327b580-ee25-11e9-80cc-53d01172e792.png)  |

#### Popover
最小の高さは380です。（380以下だとレイアウトがくずれます...）

|  Wheel  |  Table  |  Slider  |
| ---- | ---- | ---- |
|  ![pop_w](https://user-images.githubusercontent.com/34936885/66719052-cf433680-ee25-11e9-9ae8-6c376df192ba.png)  |  ![pop_t](https://user-images.githubusercontent.com/34936885/66719051-c81c2880-ee25-11e9-9230-6d90125fd096.png)  |  ![pop_s](https://user-images.githubusercontent.com/34936885/66719046-bfc3ed80-ee25-11e9-9861-d52fa66dbeb8.png)  |

#### Dark Mode
|  Wheel  |  Table  |  Slider  |
| ---- | ---- | ---- |
|  ![dark_w](https://user-images.githubusercontent.com/34936885/66719020-74a9da80-ee25-11e9-9403-056694fe1ab0.png)  |  ![dark_t](https://user-images.githubusercontent.com/34936885/66719018-6d82cc80-ee25-11e9-8404-3ed4581b326c.png)  |  ![dark_s](https://user-images.githubusercontent.com/34936885/66719011-5cd25680-ee25-11e9-824e-e3e0a2e272a0.png)  |

##いずれかのViewのみ使いたい場合
それぞれのピッカーはViewで分かれているので一部のみの使用も可能

例. Wheelのみ使いたい場合

1. xibにカスタムクラスを設定  
<img width="255" alt="colopicker_customclass.png" src="https://qiita-image-store.s3.amazonaws.com/0/225999/ba950cd8-941b-3701-a002-acba1f428d2d.png">

2. 初期選択の色を設定する  

	```swift
	@IBOutlet weak var colorPickerWheelView: AMColorPickerWheelView!
	colorPickerWheelView.selectedColor = UIColor.red
	```
	設定しない場合は白色
	
3. デリゲートを設定する 
	
	```swift
	@IBOutlet weak var colorPickerWheelView: AMColorPickerWheelView!
	colorPickerWheelView.delegate = self
	```
	色を選択すると下記のデリゲートが呼ばれる
	
	```swift
	protocol AMColorPickerDelegate: NSObject {
    
    	func colorPicker(_ colorPicker: AMColorPicker, didSelect color: UIColor)
	}
	```

TableとSliderも同様の方法で使用可能。

#つくったきっかけ
ある日、[HSV色空間](https://ja.wikipedia.org/wiki/HSV%E8%89%B2%E7%A9%BA%E9%96%93)というものを知った。意味はよく理解できなかったが、これを使えば座標で色が指定できると思った。あのよくみる円のカラーピッカーがつくれるんじゃないかと思いWheelをつくった。その後、どうせならXcodeのカラーピッカーに近づけようとTableとSliderをつくった。

#使わなかった理由
1. 使う機会がない  
つくってから思ったが、アプリ内で色を選択したい場面というのがあまりない。(今のところは遭遇していない)
	
#さいごに
以上の理由から今のところは使用していませんが、もしかしたら今後使う場面があるかもしれません。アプリ内で色選択したい場合ってどういうときだろう?画像編集とかお絵描きアプリとか?...あまり思いつかない。

私はほぼ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)