LoginSignup
24
17

More than 3 years have passed since last update.

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

Last updated at Posted at 2018-01-27

はじめに

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

第一弾(時計)

第二弾(スピードメーター)

第三弾(めくるカレンダー)

第四弾(グラフ)

第五弾(日本地図)

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

GitHub

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

AMColorPicker

見た目

colorpicker.gif

機能

3種類の方法で色を選択できる

Wheel Table Slider
wheel table slider

使い方

  1. 画面を表示する

    指定のViewControllerから遷移する

    let colorPickerViewController = AMColorPickerViewController()
    present(colorPickerViewController, animated: true, completion: nil)
    
  2. 初期選択の色を設定する

    let colorPickerViewController = AMColorPickerViewController()
    colorPickerViewController.selectedColor = UIColor.red
    

    設定しない場合は白色になる

  3. デリゲートを設定する

    let colorPickerViewController = AMColorPickerViewController()
    colorPickerViewController.delegate = self
    

    色を選択すると下記のデリゲートが呼ばれる

    protocol AMColorPickerDelegate: NSObject {
    
        func colorPicker(_ colorPicker: AMColorPicker, didSelect color: UIColor)
    }
    

Modal

Wheel Table Slider
modal_w modal_t modal_s

Push

Wheel Table Slider
push_w push_t push_s

Popover

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

Wheel Table Slider
pop_w pop_t pop_s

Dark Mode

Wheel Table Slider
dark_w dark_t dark_s

いずれかのViewのみ使いたい場合

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

例. Wheelのみ使いたい場合

  1. xibにカスタムクラスを設定

    colopicker_customclass.png

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

    @IBOutlet weak var colorPickerWheelView: AMColorPickerWheelView!
    colorPickerWheelView.selectedColor = UIColor.red
    

    設定しない場合は白色

  3. デリゲートを設定する

    @IBOutlet weak var colorPickerWheelView: AMColorPickerWheelView!
    colorPickerWheelView.delegate = self
    

    色を選択すると下記のデリゲートが呼ばれる

    protocol AMColorPickerDelegate: NSObject {
    
        func colorPicker(_ colorPicker: AMColorPicker, didSelect color: UIColor)
    }
    

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

つくったきっかけ

ある日、HSV色空間というものを知った。意味はよく理解できなかったが、これを使えば座標で色が指定できると思った。あのよくみる円のカラーピッカーがつくれるんじゃないかと思いWheelをつくった。その後、どうせならXcodeのカラーピッカーに近づけようとTableとSliderをつくった。

使わなかった理由

  1. 使う機会がない
    つくってから思ったが、アプリ内で色を選択したい場面というのがあまりない。(今のところは遭遇していない)

さいごに

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

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

つくったのまとめ

動作確認用にまとめたプロジェクト

24
17
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
24
17