Android组件篇--ProgressBar(二)改变滚动条样式

Android API提供的滚动条样式有时可能不满足我们的界面风格，这时就需要我们改变滚动条样式。

 

一般的滚动条分两种，圆形的和条形的。如下图



该图中绿色的样式是我自定义的样式，右边的圆形滚动条是系统默认滚动条。

圆形滚动条：

<ProgressBar
android:id="@+id/progressBar2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/progressBar1"
android:layout_alignLeft="@+id/textView1"
android:indeterminateDrawable="@drawable/progress_circle_bg"
/>

不需要设置style属性，默认为圆形，加上style属性的：

<ProgressBar
android:id="@+id/progressBar1"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView1"
android:layout_marginTop="26dp"
android:layout_toLeftOf="@+id/button2"
/>
<ProgressBar
android:id="@+id/progressBar3"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="200dp"
android:layout_height="6dp"
android:layout_alignLeft="@+id/progressBar2"
android:layout_below="@+id/progressBar2"
android:layout_marginTop="18dp"
android:max="100"
android:progress="30"
android:progressDrawable="@drawable/progress_bg"
/>

上面两个是设置系统提供的样式分别为：大圆形以及水平条形滚动条。

水平条形滚动条样式的改变是通过下面定义的图形资源progress_bg.xml：

<?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="10dp"/>
<gradient android:startColor="#6B747D" android:endColor="#6B747D"/>
</shape>
</item>
<!-- 设置滚动条进度的颜色 -->
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="10dp"/>
<gradient android:startColor="#97C95E" android:endColor="#97C95E"/>
</shape>
</clip>
</item>

</layer-list>

圆形旋转滚动条的样式改变时通过progress_circle_bg.xml：

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360" 	<!-- 定义旋转动画 -->
>
<!-- 定义要旋转的图形，此处为环形 -->
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="8"
android:useLevel="false" >
<gradient
android:centerColor="#FFFFFF"
android:centerY="0.50"
android:endColor="#97C95E"
android:startColor="#97C95E"
android:type="sweep"
android:useLevel="false" />
</shape>

</rotate>

通过以上方式改变滚动条样式，也可通过图片来替换。