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

效果

用到的图片 网上找的