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

效果

用到的图片 网上找的