下の画像のようなシークバーのスタイルを作りたいと思いました。
.
デフォルトのシークバーを使用すると、以下のようになります。
.
そこで、私が必要としているのは、色の変更だけです。余分なスタイルは必要ありません。これを実現するための簡単な方法はないのでしょうか、それとも独自のドローアブルを作るべきなのでしょうか?
カスタムdrawableを作ってみましたが、上記のような正確なものはできませんでした。 カスタムdrawableを使用した後、私が得たものは以下の通りです。
.
もしカスタムメイドのものを作る必要があるなら、プログレスラインの幅を小さくする方法と形状を提案してください。
私のカスタム実装です。
background_fill.xmlです。
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="90"
android:centerColor="#FF555555"
android:endColor="#FF555555"
android:startColor="#FF555555" />
<corners android:radius="1dp" />
<stroke
android:width="1dp"
android:color="#50999999" />
<stroke
android:width="1dp"
android:color="#70555555" />
</shape>
progress_fill.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="90"
android:centerColor="#FFB80000"
android:endColor="#FFFF4400"
android:startColor="#FF470000" />
<corners android:radius="1dp" />
<stroke
android:width="1dp"
android:color="#50999999" />
<stroke
android:width="1dp"
android:color="#70555555" />
</shape>
progress.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@android:id/background"
android:drawable="@drawable/background_fill"/>
<item android:id="@android:id/progress">
<clip android:drawable="@drawable/progress_fill" />
</item>
</layer-list>
thumb.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<gradient
android:angle="270"
android:endColor="#E5492A"
android:startColor="#E5492A" />
<size
android:height="20dp"
android:width="20dp" />
</shape>
seekbarです。
<SeekBar
android:id="@+id/seekBarDistance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="88dp"
android:progressDrawable="@drawable/progress"
android:thumb="@drawable/thumb" >
</SeekBar>
Androidのソースコードからdrawablesとxmlを抽出して、その色を赤に変更します。 ここではmdpiのdrawableを対象にした例を紹介します。
カスタムred_scrubber_control.xml
(res/drawableに追加)。
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/red_scrubber_control_disabled_holo" android:state_enabled="false"/>
<item android:drawable="@drawable/red_scrubber_control_pressed_holo" android:state_pressed="true"/>
<item android:drawable="@drawable/red_scrubber_control_focused_holo" android:state_selected="true"/>
<item android:drawable="@drawable/red_scrubber_control_normal_holo"/>
</selector>
カスタム: red_scrubber_progress.xml
.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@android:id/background"
android:drawable="@drawable/red_scrubber_track_holo_light"/>
<item android:id="@android:id/secondaryProgress">
<scale
android:drawable="@drawable/red_scrubber_secondary_holo"
android:scaleWidth="100%" />
</item>
<item android:id="@android:id/progress">
<scale
android:drawable="@drawable/red_scrubber_primary_holo"
android:scaleWidth="100%" />
</item>
</layer-list>
次に、Androidのソースコードから必要なdrawableをコピーします。私はこのリンクから取得しました1。
これらのdrawableは、hdpi、mdpi、xhdpiごとにコピーするのが良いでしょう。例えば、私はmdpiしか使いません。
次にPhotoshopで色を青から赤に変更します。
red_scrubber_control_disabled_holo.png: .
red_scrubber_control_focused_holo.png:! を参照してください。
RED_SCRUBBER_CONTROL_NORMAL_HOLO.PNG:! のようになります。
red_scrubber_control_pressed_holo.png:! のようになります。
red_scrubber_primary_holo.9.pngです。 を参照してください。
red_scrubber_secondary_holo.9.pngです。 を参照してください。
RED_SCRUBBER_TRACK_HOLO_LIGHT.9.pngです。 を参照してください。
SeekBarをレイアウトに追加しました。
<SeekBar
android:id="@+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progressDrawable="@drawable/red_scrubber_progress"
android:thumb="@drawable/red_scrubber_control" />
結果。
.