自定义SeekBar Drawable Android

时间:2013-08-07 06:11:49

标签: android seekbar

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

enter image description here

我读了大约九张补丁图片并创建了6张png图片。前三个用于灰色进度条(progressDrawable),如下所示:

  1. 右图

    enter image description here

  2. 中心图片

    enter image description here

  3. 左图

    enter image description here

  4. 结果应为:

    enter image description here

    蓝色图像代表进度,如下:

    1. 右图

      enter image description here

    2. 中心图片

      enter image description here

    3. 左图

      enter image description here

    4. 拇指如下:

      enter image description here

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

3 个答案:

答案 0 :(得分:16)

我认为它不应该很复杂。您无需制作6张图像即可满足您的需求。只需为背景,进度创建2个九个补丁。和thumb.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在创建时应该在顶部留空空间,因此它看起来像您想要的那样。 希望这会有所帮助。

答案 1 :(得分:8)

您可以使用自定义搜索栏使用Java代码...并添加图层列表作为drawables ...这段代码将帮助您,我希望。

1.LayerList drawable

<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));
    }
}

答案 2 :(得分:1)

1)转到 AndroidSDK - &gt;工具并运行 draw9patch.bat

你会看到黑色的窗口

2)将你的照片拖到窗口并启动9补丁:

开始修补照片

3)现在转到文件菜单,然后点击保存9-patch ...

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

现在应用于您的搜索栏

只需点击链接

即可

Create Custom Slide Bar

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