I am trying to create a custom-styled seekbar. I have two nine-patch images one is a gray stretching bar search_progress.9.png (background color) and the other is a green stretching bar search_progress_bar.9.png (foreground color).
我正在尝试创建一个定制风格的seekbar。我有两个9个补丁的图像一个是灰色的拉伸条search_progress9。png(背景色)和另一个是一个绿色的拉伸条search_progress_bar.9。png(前景颜色)。
I use this xml as my seekbar's progressDrawable:
我使用这个xml作为我的seekbar的progressDrawable:
<?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/search_progress"></item>
<item android:id="@android:id/progress" android:drawable="@drawable/search_progress_bar"></item>
</layer-list>
My problem is that, instead of the bar filling up to my thumb position, the entire bar is green all the time (search_progress_bar image). How can I get the same effect as Android's progress_horizontal.xml with my own images (I do not want to use shapes to draw my bar)?
我的问题是,与填充到我的拇指位置的bar不同,整个bar始终是绿色的(search_progress_bar映像)。我怎样才能获得与Android的progress_level相同的效果呢?用我自己的图像(我不想用形状来画我的吧)?
2 个解决方案
#1
16
e_x_p's version works just fine but the even simpler version is
e_x_p的版本很好,但是更简单的版本是
<?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>
#2
11
I solved this problem using a ClipDrawable. This is what worked for me:
我用可剪贴画解决了这个问题。这就是对我起作用的地方:
Set @drawable/search_progress_drawable as the progressDrawable.
设置@drawable/search_progress_drawable作为progressDrawable。
search_progress_drawable.xml:
search_progress_drawable.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/search_progress"></item>
<item android:id="@android:id/progress" android:drawable="@drawable/search_progress_clip"></item>
</layer-list>
search_progress_clip.xml:
search_progress_clip.xml:
<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/search_progress_bar"
android:clipOrientation="horizontal"
android:gravity="left">
</clip>
#1
16
e_x_p's version works just fine but the even simpler version is
e_x_p的版本很好,但是更简单的版本是
<?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>
#2
11
I solved this problem using a ClipDrawable. This is what worked for me:
我用可剪贴画解决了这个问题。这就是对我起作用的地方:
Set @drawable/search_progress_drawable as the progressDrawable.
设置@drawable/search_progress_drawable作为progressDrawable。
search_progress_drawable.xml:
search_progress_drawable.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/search_progress"></item>
<item android:id="@android:id/progress" android:drawable="@drawable/search_progress_clip"></item>
</layer-list>
search_progress_clip.xml:
search_progress_clip.xml:
<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/search_progress_bar"
android:clipOrientation="horizontal"
android:gravity="left">
</clip>