在安卓中为SeekBar自定义拇指

Question

我希望创建一个自定义的拖动条缩略图，效果应该像这样：。其中一种解决方案是使用这个，通过使用png图片来绘制缩略图。

我相信可以只使用xml来实现，因为它与这个缩略图非常相似：thumb.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）管理所有这些图片。

我尝试了使用“椭圆形”和“环形”等不同形状的组合，但无法获得所需的结果。您如何做到这一点？

- Andrey Prokhorov

Answer 1

我无法仅使用xml找到解决方案，这就是为什么我使用图片来解决这个问题，并从this answer获得了一点帮助：

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>

- Andrey Prokhorov

---

这个工作吗？android:thumb="@layout/seekbar_thumb"？ - Shoeb Siddique