UISliderのデフォルトのつまみのデザインでサイズを変更する

yukimonkey
4 min readJul 19, 2020

↓こんな感じのつまみのサイズが変更できるスライダーを作ります。(※メモリの実装は説明に含まれていません。)

UISliderのデフォルトのつまみ(thumb)のデザインでつまみのサイズを変える、またはドラッグ中は一回り大きくするみたいな実装をしてみました。

今回の実装は

UISliderのデフォルトのつまみはサイズを変えることができないのでデフォルトと類似のデザインを作成してthumbに設定する内容になっています。

まず全体図から

UISliderをカスタマイズしたクラスを作成します。

ざっっっくりとした実装内容は↓のような感じです。

  • バー(truck)の高さを設定
  • つまみ(thumb)の直径を設定
  • つまみのデザインをUIViewに設定
  • つまみのframeと角丸を設定し、描写
  • バーを描写

あとはつまみの大きさを変えたいUISliderに作成したカスタムクラスを当てはめてください。

もう少し詳しく解説

恐らくコードを読んでいて、つまみを描写する部分のboundsの数値が少し理解しにくいと思うので、詳しく解説します。

まず、x,yの説明を飛ばしてwidthとheightですが、つまみより一回り(コードでは1.5倍)ほど大きくなるように設定しています。

これはつまみの影を切れずに表示させるためです。

もし下のコードみたいにつまみと同じ大きさに設定してしまうと、

CGRect(x: 0, y: 0, width: diameter, height: diameter)

影が切れて最悪のUIになってしまいます。笑

じゃあ一回り大きく設定してみよう!とwidthとheightを数倍すると

今度は位置がずれてしまいます😭

なので、大きくした分の半分だけx、y軸ずらしてあげると

UIGraphicsImageRenderer(bounds: CGRect(x: -(diameter * 0.5 / 2), y: -(diameter * 0.5 / 2), width: diameter * 1.5, height: diameter * 1.5))

綺麗にバーのy軸中心につまみの中心が来るようになります。

この倍率は影の位置や大きさによって変えてください。

どこから参照したの?

stackoverflowさん

本当はデフォルトのつまみのデザインでサイズを変更したかったのですが、なかなか資料が見つからず…😭

「デフォルトのつまみはサイズ変更不可」とゆう事実を知り、落胆した時に奇跡的にこの記事に出会いました✨

(※結構検索上位に出てくる)

この回答を少し改造して実装させていただきました!

ぜひツイッターにも遊びに来てください。

https://twitter.com/yukimonkey3

--

--

yukimonkey

アプリ作ったことないのに社長の思いつきで開発することになったエンジニア