雄领IT的专栏

1.案例效果图

2.准备素材

progress1.png(78*78) progress2.png(78*78)

3.原理

采用一张图片作为ProgressBar的背景图片(一般采用颜色比较浅的)。另一张是滚动条的图片(一般采用颜色比较深的图片)。进度在滚动是：滚动图片逐步显示，，背景图片逐步隐藏，达到上面的效果。

4.灵感来自Android控件提供的源码

4.1 默认带进度的滚动条，如下图

<ProgressBarandroid:id="@+id/progressBar2" style="@android:style/Widget.ProgressBar.Horizontal"android:layout_width="268dp"android:layout_height="wrap_content"android:progress="45" />

注意：关键是style属性在起作用

4.2 找到样式定义的位置

鼠标放在style属性值上，按下Ctrl键，出现超链接，点击超链接跳转到样式的定义位置

样式定义的内容如下

重点研究：

android:progressDrawable：滚动条的样式

@android:drawable/progress_horizontal：样式定义的文件

在android-sdk-windows\platforms\android-14\data\res目下搜索progress_horizontal.xml文件，搜索结果如下：

打开progress_horizontal.xml文件，内容如下

<layer-listxmlns:android=""><itemandroid:id="@android:id/background"><shape><cornersandroid:radius="5dip"/><gradientandroid:startColor="#ff9d9e9d"android:centerColor="#ff5a5d5a"android:centerY="0.75"android:endColor="#ff747674"android:angle="270"/></shape> </item><itemandroid:id="@android:id/secondaryProgress"><clip><shape><cornersandroid:radius="5dip"/><gradientandroid:startColor="#80ffd300"android:centerColor="#80ffb600"android:centerY="0.75"android:endColor="#a0ffcb00"android:angle="270"/></shape></clip> </item><itemandroid:id="@android:id/progress"><clip><shape><cornersandroid:radius="5dip"/><gradientandroid:startColor="#ffffd300"android:centerColor="#ffffb600"android:centerY="0.75"android:endColor="#ffffcb00"android:angle="270"/></shape></clip> </item></layer-list>释义：

<item android:id="@android:id/background">：定义滚动条的背景样式

<item android:id="@android:id/secondaryProgress">：第二滚动条的样式

<item android:id="@android:id/progress">：滚动条的样式

思考：如果我想做垂直滚动条，怎么办了？

关键在clip元素的属性上做修改

<clip android:clipOrientation="vertical" 定义滚动的方向 vertical为垂直方向 android:drawable="@drawable/progress1" 定义滚动的图片 android:gravity="bottom" > 定义滚动的开始位置</clip>

5.定义样式文件progress_vertical.xml

progress_vertical.xml文件代码如下

<?xmlversion="1.0"encoding="utf-8"?><layer-listxmlns:android=""> <itemandroid:id="@android:id/progress"><clipandroid:clipOrientation="vertical"android:drawable="@drawable/progress1"android:gravity="bottom"></clip> </item></layer-list>还有不愿面对失败的尴尬。曾经怀有远大理想，拥有完美的憧憬。