水平进度条 自定义实现原理
要自定义 就要知道原生如何实现 进入ProgressBar里面
发现 * <pre>
* <ProgressBar
* style="@android:style/Widget.ProgressBar.Horizontal"
* ... /></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" />
效果
用到的图片 网上找的