7

次のようなシークバーのカスタム サムを作成したいと考えています。

ここに画像の説明を入力

1 つの解決策は、png 画像を使用して親指を描画するthis oneです。

この親指に非常に似ているため、xmlのみを使用できるはずだと思います。

親指.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <size android:height="30dp" android:width="30dp"/>
    <stroke android:width="18dp" android:color="#882EA5DE"/>
    <solid android:color="#2EA5DE" />
    <corners android:radius="1dp" />

</shape>

ここに画像の説明を入力

異なる画面解像度 (hdpi/mdpi/xhdpi/xxhdpi) のすべての画像をスキップして管理できるように、2 つ目の境界線 (周りに白い線) を追加する必要があります。

「楕円形」と「リング形」を組み合わせてみましたが、期待通りの結果が得られませんでした。どのようにそれを作ることができますか？

4

1 に答える 1

1

私はxmlだけで解決策を見つけることができなかったので、この答えから少し助けて、これを解決するために写真を使用しました:

  1. 親指の画像を作成しseekbar_thumb_icon.png 、さまざまな解像度でres/drawable-*マップに保存しました (hdpi/mdpi/xhdpi/xxhdpi)。

  2. SeekBar に "android:thumb="@layout/seekbar_thumb" を指定:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<item>
<shape>
    <size
        android:height="30dp"
        android:width="30dp" />

    <solid android:color="@android:color/transparent" />
</shape>
</item>
<item android:drawable="@drawable/balance_icon_48px"/>

</layer-list>

ここに画像の説明を入力

他のスタイル:

<SeekBar
android:id="@+id/seekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progressDrawable="@layout/seekbar_style"
android:thumb="@layout/seekbar_thumb" />

seekbar_style.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="match_parent"
    android:layout_width="match_parent">

    <item android:id="@android:id/background"
        android:drawable="@layout/seekbar_background" />

    <item android:id="@android:id/progress">
        <clip android:drawable="@layout/seekbar_progress" />
    </item>
</layer-list>

seekbar_background.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:shape="line">

   <stroke android:width="2dp" android:color="#868686"/>
   <corners android:radius="1dp" />
</shape>

seekbar_progress.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:shape="line">

   <stroke android:width="2dp" android:color="#ffffff"/>
   <corners android:radius="1dp" />
</shape>
于 2015-06-26T09:38:19.307 に答える