android SeekBar 樣式設置（包含自定義樣式）

  UI參考

 

 

 

 

 

 

 

 
 

 

<SeekBar
       android:id="@+id/seekbar"
       style="?android:attr/progressBarStyleHorizontal"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:progressDrawable="@layout/seekbar_style"
       android:thumb="@layout/thumb" />

 

 

方式一：通過背景圖片設置實現

seekbar_style.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">
        <!-- 背景圖 :這裏使用9文件，因此這麼配置,
        如果使用的是普通圖片可直接使用<drawable />標籤，或者使用<shape />標籤，自定義圖形 -->
        <nine-patch android:src="@drawable/skin_bg" />
    </item>
    <!-- 進度圖 -->
    <item android:id="@android:id/progress">
     <clip >
            <nine-patch android:src="@drawable/skin_bg2" />
     </clip>
     </item>
</layer-list>

 

thumb.xml

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- seekbar的滑塊樣式 -->
    <!-- 按下狀態 -->
    <item android:drawable="@drawable/menu_bg" android:state_pressed="true"/>
    <!-- 普通無焦點狀態 -->
    <item android:drawable="@drawable/menu_bg" android:state_focused="false" android:state_pressed="false"/>

</selector>

 

 

 

方式二：通過<shape  />標籤爲SeekBar設置背景和進度的xml配置文件

seekbar_style.xml

 

<?xml version="1.0" encoding="utf-8"?>
<!-- ChenJianLi Code: View: Seekbar
        滑動時的背景效果 -->

<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="#ffffffff"
                    android:centerColor="#fffffff0"
                    android:centerY="0.75"
                    android:endColor="#fffffafa"
                    android:angle="270"
            />
        </shape>
    </item>
    <!--  第二進度條  -->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#8000cdcd"
                        android:centerColor="#8000bfff"
                        android:centerY="0.75"
                        android:endColor="#a000b2ee"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>
    <!--  第一進度條  -->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#ff00ffff"
                        android:centerColor="#ff00ced1"
                        android:centerY="0.75"
                        android:endColor="#ff00f5ff"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>

 方式三：

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- 使用<drawable />標籤設置背景圖片 -->
    <!-- 背景項 -->

    <item
        android:id="@android:id/background"
        android:drawable="@drawable/timeline1"></item>
    <!-- 進度圖 -->

    <item
        android:id="@android:id/progress"
        android:drawable="@drawable/timeline2"></item>

</layer-list>

 

• SeekBar_仿天天動聽.zip (55.1 KB)
• 下載次數: 481