【android】seekbar 样式自定义

SeekBar代码:

<SeekBar
	       		    <span style="white-space:pre">	</span>android:layout_weight="2"
			        android:id="@+id/seekbar"
			        android:focusable="true" 
			        style="android:style/Widge.ProgressBar.Horizontal"
			        android:layout_width="fill_parent"
			        android:layout_height="wrap_content" 
				android:maxHeight="40dip"
				android:minHeight="40dip"
			        android:progressDrawable="@drawable/my_bar"
			    	android:layout_gravity="center" 
			        android:thumb="@drawable/my_thumb" />


my_bar代码:

<?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/seekbar_o" />  
    <item android:id="@android:id/secondaryProgress">  
        <scale android:drawable="@drawable/seekbar_c" android:scaleWidth="100%" />  
    </item>  
    <item android:id="@android:id/progress">  
        <scale android:drawable="@drawable/seekbar_c" android:scaleWidth="100%" />  
    </item>  
</layer-list>


my_thumb代码:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
     <item android:state_focused="true" android:state_pressed="false" android:drawable="@drawable/thumb_o" />  
    <item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/thumb_c" />  
    <item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/thumb_c" />
    <item android:drawable="@drawable/thumb_o" />
</selector>

图片的制作:


进度条:

【android】seekbar 样式自定义_第1张图片

【android】seekbar 样式自定义_第2张图片

在正中间填充一个像素。保存为png。

打开draw9patch.bat 使用draw9patch,直接将刚才保存的图片拖入程序中

【android】seekbar 样式自定义_第3张图片

【android】seekbar 样式自定义_第4张图片

这样绘制。


thumb:

打开PhotoShop新建40*40。

【android】seekbar 样式自定义_第5张图片

这样。


我的最开始的代码图片源文件效果如下

  seekbar_o.9.png 

  seekbar_c.9.png  

   thumb_o.png

   thumb_c.png


你可能感兴趣的:(【android】seekbar 样式自定义)