Android中自定义SeekBar的背景颜色，进度条颜色，以及滑块的图片

在Android中的控件种类已经足够我们使用，但是有时候大家需要根据美工的设计来改变一些控件的颜色，式样，以及背景图片
最近正好有这方面的需要，用了很久时间，找到了改变基本颜色以及图片的方法
下面以SeekBar为例，为大家描述一下我的做法

首先在layout文件夹中的main.xml内容如下

Xml代码

<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"android:layout_width="fill_parent"
android:layout_height="fill_parent">
<SeekBarandroid:id="@+id/seek"android:layout_width="300px"
android:layout_height="wrap_content"android:max="100"
android:progress="50"android:progressDrawable="@drawable/seekbar_img"
android:thumb="@drawable/thumb"/>
</LinearLayout>

很简单，只有一个SeekBar控件，注意它的android:progressDrawable="@drawable/seekbar_img"以及android:thumb="@drawable/thumb"它们分别对应的是进度条的图片以及拖动滑块的图片，这里的图片也可以是我们自定义的drawable中的xml文件，可以理解成这两个属性应该如何显示的意思,而@drawable/seekbar_img和@drawable/thumb它们分别对应着 drawable 文件夹中的文件seekbar_img.xml和thumb.xml，它们表示着如何去显示进度条与滑块

当初我想的是在网上找SeekBar的原始样式文件是如何定义，这样就可以照搬代码，修改一些我需要的图片以及颜色和大小就行了，于是就开始搜索,这里要用到的是Android的系统源码，具体下载办法网上很多，需要用到cygwin,大家可以参考http://tech.it168.com/a2009/0529/579/000000579026.shtml

下好源代以后，可以在 C:\cygwin\home\android\frameworks\base\core\res\res\drawable 这个路径下找到很多图片与android的原始控件样式（即xml文件)
找一下，哈哈，好东西可不少，以后要改样式全靠它们了
我们可以在这是里面找到seek_thumb.xml，内容如下

Xml代码

<?xmlversion="1.0"encoding="utf-8"?>
<!--Copyright(C)2008TheAndroidOpenSourceProject
LicensedundertheApacheLicense,Version2.0(the"License");
youmaynotusethisfileexceptincompliancewiththeLicense.
YoumayobtainacopyoftheLicenseat
http://www.apache.org/licenses/LICENSE-2.0
Unlessrequiredbyapplicablelaworagreedtoinwriting,software
distributedundertheLicenseisdistributedonan"ASIS"BASIS,
WITHOUTWARRANTIESORCONDITIONSOFANYKIND,eitherexpressorimplied.
SeetheLicenseforthespecificlanguagegoverningpermissionsand
limitationsundertheLicense.
-->
<selectorxmlns:android="http://schemas.android.com/apk/res/android">
<itemandroid:state_pressed="true"
android:state_window_focused="true"
android:drawable="@drawable/seek_thumb_pressed"/>
<itemandroid:state_focused="true"
android:state_window_focused="true"
android:drawable="@drawable/seek_thumb_selected"/>
<itemandroid:state_selected="true"
android:state_window_focused="true"
android:drawable="@drawable/seek_thumb_selected"/>
<itemandroid:drawable="@drawable/seek_thumb_normal"/>
</selector>

它定义的是seekbar的滑块样式，内容很简单，大家应该看得懂，分别对应着按下，选中，以及获得焦点时滑块的图片

另外，我们还可以找到 progress_horizontal.xml,内容如下

Xml代码

<?xmlversion="1.0"encoding="utf-8"?>
<!--Copyright(C)2008TheAndroidOpenSourceProject
LicensedundertheApacheLicense,Version2.0(the"License");
youmaynotusethisfileexceptincompliancewiththeLicense.
YoumayobtainacopyoftheLicenseat
http://www.apache.org/licenses/LICENSE-2.0
Unlessrequiredbyapplicablelaworagreedtoinwriting,software
distributedundertheLicenseisdistributedonan"ASIS"BASIS,
WITHOUTWARRANTIESORCONDITIONSOFANYKIND,eitherexpressorimplied.
SeetheLicenseforthespecificlanguagegoverningpermissionsand
limitationsundertheLicense.
-->
<layer-listxmlns:android="http://schemas.android.com/apk/res/android">
<itemandroid:id="@android:id/background">
<shape>
<cornersandroid:radius="5dip"/>
<gradient
android:startColor="#ff9d9e9d"
android:centerColor="#ff5a5d5a"
android:centerY="0.75"
android:endColor="#ff747674"
android:angle="270"
/>
</shape>
</item>
<itemandroid:id="@android:id/secondaryProgress">
<clip>
<shape>
<cornersandroid:radius="5dip"/>
<gradient
android:startColor="#80ffd300"
android:centerColor="#80ffb600"
android:centerY="0.75"
android:endColor="#a0ffcb00"
android:angle="270"
/>
</shape>
</clip>
</item>
<itemandroid:id="@android:id/progress">
<clip>
<shape>
<cornersandroid:radius="5dip"/>
<gradient
android:startColor="#ffffd300"
android:centerColor="#ffffb600"
android:centerY="0.75"
android:endColor="#ffffcb00"
android:angle="270"
/>
</shape>
</clip>
</item>
</layer-list>

有了这两个文件的源代码，我们就可以依样画葫芦了
首先在自己的工程下drawable文件夹中建立seek_bar.xml文件与thumb.xml文件
我写的两个文件内容如下
seekbar_img.xml

Xml代码

<?xmlversion="1.0"encoding="utf-8"?>
<layer-listxmlns:android="http://schemas.android.com/apk/res/android">
<itemandroid:id="@+android:id/background"android:drawable="@drawable/bg"/>
<itemandroid:id="@+android:id/SecondaryProgress"
android:drawable="@drawable/bg"/>
<itemandroid:id="@+android:id/progress"android:drawable="@drawable/bg2"/>
</layer-list>

thumb.xml

Xml代码

<?xmlversion="1.0"encoding="UTF-8"?>
<selectorxmlns:android="http://schemas.android.com/apk/res/android">
<itemandroid:state_pressed="true"android:drawable="@drawable/bg3"/>
<itemandroid:state_focused="false"android:state_pressed="false"
android:drawable="@drawable/bg4"/>
</selector>

装载自：http://www.iteye.com/topic/788978

更多相关文章

随机推荐