【Android】SeekbarでスイッチなUIを作る
IT技術
SeekbarでスイッチなUIを作ってみた
(株)ライトコードでモバイルアプリケーション開発をしている笹川(ささがわ)です!
今日はSeekbarをカスタマイズしてスイッチっぽいUIを作ってみたいと思います
※イメージ図
丸いUIパーツを作成
目盛りとなる部分の丸いUIパーツを作成します
今回はshapeをで作成していきます
1<?xml version="1.0" encoding="utf-8"?>
2<shape xmlns:android="http://schemas.android.com/apk/res/android"
3 android:shape="oval">
4 <size
5 android:width="8dp"
6 android:height="8dp" />
7 <solid android:color="@color/gray_BBB" />
8</shape>
これで灰色で直径が8dpの円ができました
ラインのパーツを作成
次にSeekbarにおけるラインをカスタムするためにUIパーツを作成します
こちらは特に指定しない場合だとハンドルを右に動かすたびに太くなっていくようになってしまうので、今回のようにスイッチ風にするためにカスタムします
@android:id/background と @android:id/progress をIDでそれぞれ指定をすることでハンドルを動かす前と後のラインの状態をカスタムできます
1<?xml version="1.0" encoding="utf-8"?>
2<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
3 <item
4 android:id="@android:id/background"
5 android:height="2dp"
6 android:gravity="center">
7 <shape android:shape="rectangle">
8 <solid android:color="@color/gray_BBB" />
9 </shape>
10 </item>
11 <item
12 android:id="@android:id/progress"
13 android:height="2dp"
14 android:gravity="center">
15 <clip>
16 <shape android:shape="rectangle">
17 <solid android:color="@color/gray_BBB" />
18 </shape>
19 </clip>
20 </item>
21</layer-list>
これで背景が灰色で高さ2dpのラインが2本できました
ハンドル部分を作成
ハンドル部分ですがデフォルトでも問題はないのですが、ちょっとシャドウをいれて操作できる感を向上したいと思います
もちろん画像を当てても問題ないのですが、今回はlayer-listで作成します
作り方としては白→灰色と中心からグラデーションする円を作成し、その上に白い円を乗せるように作ります
1<?xml version="1.0" encoding="utf-8"?>
2<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
3
4 <item>
5
6 <shape android:shape="oval" >
7 <gradient
8 android:angle="270"
9 android:endColor="#3D000000"
10 android:gradientRadius="24dp"
11 android:startColor="@color/white"
12 android:type="radial" />
13
14 <size
15 android:width="24dp"
16 android:height="24dp" />
17 </shape>
18 </item>
19 <item
20 android:bottom="2dp"
21 android:left="2dp"
22 android:right="2dp"
23 android:top="2dp">
24
25 <shape android:shape="oval">
26 <solid android:color="@color/white" />
27
28 </shape>
29
30 </item>
31
32</layer-list>
AndroidStuido上だとグラデーション部分がはっきりと灰色で微妙に思えるのですが、24dpのサイズで当て込んでみるとシャドウ付きの白円に見えるはずです
Seekbarに設定
それぞれ作ったパーツをSeekbarに設定します
ライン部分はandroid:progressDrawable、ハンドル部分はandroid:thumb、目盛り部分はandroid:tickMarkに設定します
1 <SeekBar
2 android:id="@+id/seek_bar"
3 android:layout_width="match_parent"
4 android:layout_height="wrap_content"
5 android:max="2"
6 android:progressDrawable="@drawable/bar_progress"
7 android:thumb="@drawable/bar_thumb"
8 android:tickMark="@drawable/bar_tick" />
これでイメージ通りのスイッチ風なSeekbarができたはずです!
サンプル
こちらのリポジトリにサンプルを置いておきますので参考にどうぞ
ライトコードでは、エンジニアを積極採用中!
ライトコードでは、エンジニアを積極採用しています!社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。
採用情報へ
新潟生まれ新潟育ち本業はモバイルアプリエンジニア。 日々、猫(犬)エンジニアとして活躍中!