UIPickerView に UILabel を表示するライブラリをつくった

タイトルの通り、 UIPickerView に UILabel を表示するライブラリを作りました。

これを使うとこんな感じにコンポーネントごとに簡単にラベルを表示することができます。
なお、Carthage からインストールできます。

f:id:komaji504:20170629235343p:plain

使い方

LabelPickerComponent

LabelPickerComponent という、コンポーネントとラベルをまとめたクラスのインスタンスを用意します。

let hours = (0...23).map { "\($0)" }
let attributes = [
    NSFontAttributeName: UIFont.systemFont(ofSize: 16.0)
]

let components  = [
    LabelPickerComponent(
        items: hours,
        itemAttributes: attributes
        maxItemWidth: 20.0,
        labelName: "hours",
        labelAttributes: attributes,
        labelNameWidth: 50.0
   )
]

maxItemWidth が item を表示するために必要な width で、items の中で最も大きい item に合わせて指定してください。
labelNameWidth は labelName を表示するために必要な width を指定してください。

LabelPicker

上記で用意したインスタンスを、 PickerView となる LabelPicker クラスのインスタンスにセットし、コンポーネントを表示する height を指定すると、ラベルの位置が自動で計算されます。

let pickerView = LabelPickerView()
pickerView.components = components
pickerView.rowHeight = 30.0

view.addSubview(pickerView)

PickerView の frame や maxItemWidth, labelNameWidth を使ってごりごり計算しているので、意図した表示にならない場合には maxItemWidth と labelNameWidth を調整して試してみてください。

オプション

オプションで見た目をちょっと変更できるプロパティを LabelPicker に２つ用意しました。

componentsWidthEqual

全コンポーネントの width を等しくするかどうかの設定です。
true にすると全ての width が等しくなり、 false にするとコンポーネント間のスペースが等しくなるようにレイアウトされます。
（下の画像だと少しわかりづらいですね、、）

true ( デフォルト )	false

contentSeparateWidth

item と labelName 間のスペースを指定できます。

0.0 ( デフォルト )	15.0

最後に

先日アプリを公開したのですが、このアプリの時間指定する UI に LabelPicker を使っているので、よかったら確認してみてください。

バイブアラームー音が鳴らずに秒まで指定できるー

Tatsuya Kojima
ライフスタイル
無料

この記事を書いていて色々使いづらそうな点に気づいたので、そのうち修正してみようと思います。

初めてのライブラリ作成だったので、ライブラリ開発の流れや、Carthage でインストールできるようにするための手順や、 CI でのテストの回し方等、あらゆるところでで色々つまづいたので、その辺りをまたブログにまとめようと思います。