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

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

Image for post
Image for post

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)
Image for post
Image for post

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

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

Image for post
Image for post

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

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

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

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

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

stackoverflowさん

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

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

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

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

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

https://twitter.com/yukimonkey3

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store