android - 自定义 SeekBar Drawable Android

Question

我想将默认的 Android 搜索栏个性化为：

我阅读了大约九个补丁图像并创建了 6 个 png 图像。前三个为灰色进度条（progressDrawable），如下图：

1. 右图

   

2. 中心图像

   

3. 左图

   

结果应该是：

蓝色图像代表进度，如下：

1. 右图

   

2. 中心图像

   

3. 左图

   

大拇指如下：

我的问题是，我如何使用九个补丁图像来生成与第一张图片完全相同的自定义搜索栏，以及如何将其应用于我的搜索栏？

Answer 1

我认为它不应该很复杂。您不必制作 6 张图像来满足您的需求。只需为背景、进度创建 2 个九个补丁。还有拇指.png。这是您的 XML：

<SeekBar
  android:id="@+id/my_seekbar"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:progressDrawable="@drawable/seekbar_progress"
  android:thumb="@drawable/thumb">

在你的seekbar_progress：

 <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item android:id="@android:id/background">
    <nine-patch android:src="@drawable/progressbar_bg" android:dither="true"/>
</item>
<item android:id="@android:id/progress">
    <clip xmlns:android="http://schemas.android.com/apk/res/android"
        android:clipOrientation="horizontal"
        android:gravity="left">
        <nine-patch android:src="@drawable/progressbar_status" android:dither="true"/>
    </clip>
 </item>
</layer-list>

请记住，thumb创建时您的顶部应该有空白区域，这样看起来就像您想要的那样。希望这可以帮助。

Answer 2

您可以使用 Java 代码使用自定义搜索栏...并将图层列表添加为可绘制对象...希望这段代码对您有所帮助。

1.LayerList 可绘制

<layer-list 
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item 
        android:id="@android:id/background">
        <nine-patch 
            android:src="@drawable/your_nine_patch_image"
            android:tileMode="repeat">
        </nine-patch>
    </item>
    <item 
        android:id="@android:id/progress">
        <layer-list 
            xmlns:android="http://schemas.android.com/apk/res/android" >
            <item>
                <clip >
                    <bitmap 
                        xmlns:android="http://schemas.android.com/apk/res/android"
                        android:src="@drawable/clipimage_for_progress"
                        android:tileMode="repeat"/>
                </clip>
            </item>
        </layer-list>
    </item>
</layer-list>

这将是您的 customSeekbar 类，您可以在您的应用程序中使用此自定义搜索栏

public class CustomSeekbar {
    public CustomSeekbar(Context context) {
        super(context);
        setCustomUI();
    }

    public CustomSeekbar(Context context, AttributeSet attrs) {
        super(context, attrs);
        setCustomUI();
    }

    public CustomSeekbar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        setCustomUI();
    }

    void setCustomUI() {

        this.setProgressDrawable(getResources().getDrawable(
                R.drawable.yourBackground));
    }
}

Answer 3

1) 转到AndroidSDK -> 工具并运行draw9patch.bat

你会看到黑色的窗口

2）将你的图片拖入窗口并启动9补丁：

开始修补你的图片

3) 现在转到文件菜单并单击保存 9-patch...

最后提示：您的图片必须是 .PNG 格式，并且只包含内容而不是其周围的可用空间。例如，我将您的图片保存在我的电脑中，并看到您图片的蓝色部分下方有很多未使用的空间。

现在申请到你的搜索栏：

只需点击链接即可

创建自定义滑动条

对不起; 我没有足够的声誉来插入图片