Android 可拖動進度條：SeekBar之自定義進度條

目錄

一、自定義進度條樣式 
二、自定義滑塊樣式

一、自定義進度條樣式

1、方式一 
我們還可以找到 progress_horizontal.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">  
        <shape>  
            <corners android:radius="10dip" />  
            <gradient  
                    android:startColor="#ff9d9e90"  
                    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="10dip" />  
                <gradient  
                        android:startColor="#50ff0000"  
                        android:centerColor="#50ff0000"  
                        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="#ffff0000"  
                        android:centerColor="#ffff0000"  
                        android:centerY="0.75"  
                        android:endColor="#ffffcb00"  
                        android:angle="270"  
                />  
            </shape>  
        </clip>  
    </item>  

</layer-list> 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48

2、方式二 
　　我們也可以自己製作進度條圖片，通過seekbar的progressDrable屬性進行調用使用即可。

 android:progressDrawable="@drawable/color"

• 1

• 1

二、自定義滑塊樣式

　　這裏我們新建一個xml文件通過設定它的狀態來改變圖片即可，再在seekbar中通過thumb屬性進行調用即可。 
　xml文件

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

調用

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" 
    android:orientation="vertical">

    <SeekBar
        android:id="@+id/seekbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:progress="30"

       />
    <SeekBar
        android:id="@+id/seekbar2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:progress="30"
        android:thumb="@drawable/seekbarimg"
       /> 
     <SeekBar
        android:id="@+id/seekbar2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:progress="30"
        android:progressDrawable="@drawable/color"
        android:thumb="@drawable/seekbarimg"
</LinearLayout>