スライダーで色を選択するUIをつくれる「Color Slider」

はじめに

iOS開発では、様々なGUIパーツがデフォルトで用意されています。 しかしながらカラーピッカーの類は存在しません。 標準のUISliderのように、スライダーにより色設定が出来ればと思い調べるとライブラリを発見しました。

ColorSlider

github.com

機能は名前のとおりで、色のついたスライダーをドラッグして色を選択できるUIパーツを提供するライブラリです。

使用例

下がUISldierで上がColorSlider

使い方

GitHubのドキュメントなどをかいつまんで以下に示します。

let colorSlider = ColorSlider(orientation: .vertical, previewSide: .left)
colorSlider.frame = CGRect(x: 0, y: 0, width: 12, height: 150)
view.addSubview(colorSlider)

インスタンス生成時に、sliderの方向（orientation）とpreviewViewの位置（previewSide）を指定します。 orientationが.verticalならば、previewSideは.leftまたは.rightである必要があります。 一方、orientationが.horizontalならば、previewSideは.topまたは.bottomである必要があります。

previewViewとは、sliderをドラッグしている最中に現在の色を表示するビューです。 デフォルトのままでも、それなりに良い感じに表示されますが、previewViewの位置など、より詳細な設定が必要な場合、previewViewをカスタムする事が出来ます。 その場合、以下のとおりインスタンス生成の構文が若干変わります。

let previewView = DefaultPreviewView()
previewView.side = .top
previewView.animationDuration = 0.2 //色の更新間隔
previewView.offsetAmount = 0 //sliderからの距離

let colorSlider = ColorSlider(orientation: .horizontal, previewView: previewView)

animationDurationは色の更新間隔（のはず）です。 私の場合、現在色をslider上でプレビューしたかったので、offsetAmountを0としています（この数値が大きければそれだけ、.top方向に移動する）。