android 自定義進度條 seekbar

水平進度條  自定義實現原理

要自定義 就要知道原生如何實現 進入ProgressBar裏面 

發現  * <pre>
 * &lt;ProgressBar
 *     style="@android:style/Widget.ProgressBar.Horizontal"
 *     ... /&gt;</pre>

很多這種註釋 在開始的位置  

同時 你可以分析 ProgressBar的 水平 圓形 等等是根據style來展示不同的 所以我們基本可以確定 style裏面有我們想要的 

進去 android_sdk\platforms\android-18\data\res\values 裏面的styles.xml 查找progressbar 

用搜索就行 

可以看到這些

既然 這樣 我們就可以自己定義一個自己的在 values裏面的styles.xml加上自己的樣式

這裏把這段 複製過去 改成如下

 <!-- 自定義水平進度條 -->
   

<style name="my_pb_hor" parent="@android:style/Widget.ProgressBar.Horizontal">
      <item name="android:progressDrawable">@drawable/progress_hor_slef</item>
  </style>

這個是必須要加的 不然 在佈局文件引用 系統不認識 這個就是繼承  承認這個是 水平進度條可以用

parent="@android:style/Widget.ProgressBar.Horizontal"

這個是我們想要的  再看原生的

android:progressDrawable

在原生的drawable文件夾裏面 找到 複製出來一份 用everything 很快能找到

然後再 自己的工程的 drawable裏面新建一個自己的(一開始複製系統的 然後自己修改) 這個就是水平進度條的 顯示效果

系統如下

<?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="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>

改成自己的

<?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/black"/>
    <item
        android:id="@android:id/progress"
        android:drawable="@drawable/green"/>

        <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>

</layer-list>

然後這樣基本 自定一個樣式 用於進度條水平的

在主佈局文件使用 如下  只是改變style而已 

現在看看效果

<ProgressBar
                android:id="@+id/progressBar1"
                style="@style/my_pb_hor"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:progress="20"
                android:secondaryProgress="50"
                />

效果如下

自定義SeekBar  一樣的原理 步驟實現 再來一次

1：找到原生的

<style name="Widget.SeekBar">
        <item name="android:indeterminateOnly">false</item>
        <item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
        <item name="android:indeterminateDrawable">@android:drawable/progress_horizontal</item>
        <item name="android:minHeight">20dip</item>
        <item name="android:maxHeight">20dip</item>
        <item name="android:thumb">@android:drawable/seek_thumb</item>
        <item name="android:thumbOffset">8dip</item>
        <item name="android:focusable">true</item>
        <item name="android:mirrorForRtl">true</item>
    </style>

2：在values裏面的styles裏面改成自己的 

parent必須的 系統識別標誌

<style name="my_seekbar_self" parent="@android:style/Widget.SeekBar">
        <item name="android:progressDrawable">@drawable/progress_horizontal_self</item>
         <item name="android:thumb">@drawable/seek_thumb_self</item>
        <item name="android:thumbOffset">8dip</item>
        <item name="android:focusable">true</item>
    </style>

3：在drawable裏面模擬系統的創建

android:progressDrawable    <pre name="code" class="html">android:thumb  這是滑動塊

progressDrawable

<?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/black"/>
    <item
        android:id="@android:id/progress"
        android:drawable="@drawable/green"/>

    <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>

</layer-list>

thumb

<?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/thumb_dn" />

    <!-- 焦點狀態 -->
    <item android:state_focused="true"
        android:drawable="@drawable/thumb_up" />

    <!-- 默認狀態 -->
    <item android:drawable="@drawable/thumb_up" />

</selector>

4：主佈局裏面調用

<SeekBar
          style="@style/my_seekbar_self"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_alignParentLeft="true"
          android:layout_below="@+id/progressBar2"
          android:max="100"
          android:padding="2dp"
          android:progress="20" />

效果

用到的圖片 網上找的