Android中自定義SeekBar的背景顏色，進度條顏色，以及滑塊的圖片

在Android中的控件種類已經足夠我們使用，但是有時候大家需要根據美工的設計來改變一些控件的顏色，式樣，以及背景圖片

最近正好有這方面的需要，用了很久時間，找到了改變基本顏色以及圖片的方法
下面以SeekBar爲例，爲大家描述一下我的做法

首先在layout文件夾中的main.xml內容如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <SeekBar android: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 version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2008 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<!-- This is the thumb on the seek bar. -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true"
          android:state_window_focused="true"
          android:drawable="@drawable/seek_thumb_pressed" />

    <item android:state_focused="true"
          android:state_window_focused="true"
          android:drawable="@drawable/seek_thumb_selected" />

    <item android:state_selected="true"
          android:state_window_focused="true"
          android:drawable="@drawable/seek_thumb_selected" />

    <item android:drawable="@drawable/seek_thumb_normal" />

</selector>

 

它定義的是seekbar的滑塊樣式，內容很簡單，大家應該看得懂，分別對應着按下，選中，以及獲得焦點時滑塊的圖片


另外，我們還可以找到 progress_horizontal.xml,內容如下

<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2008 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="5dip" />
            <gradient
                    android:startColor="#ff9d9e9d"
                    android:centerColor="#ff5a5d5a"
                    android:centerY="0.75"
                    android:endColor="#ff747674"
                    android:angle="270"
            />
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#80ffd300"
                        android:centerColor="#80ffb600"
                        android:centerY="0.75"
                        android:endColor="#a0ffcb00"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android: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 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/bg" />
    <!--全部能量圖  -->
    <item android:id="@+android:id/SecondaryProgress"
        android:drawable="@drawable/bg" />
    <!-- 進和能量圖 -->
    <item android:id="@+android:id/progress" android:drawable="@drawable/bg2" />
</layer-list>

 

thumb.xml

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 按下狀態 -->
    <item android:state_pressed="true" android:drawable="@drawable/bg3" />

    <!-- 普通無焦點狀態 -->
    <item android:state_focused="false" android:state_pressed="false"
        android:drawable="@drawable/bg4" />
</selector>

 

這時運行程序，我的截圖如下，醜了點，但是目的達到了
轉自：http://blog.csdn.net/wangjia55/article/details/8853912