1. 程式人生 > >自定義進度條ProgressBar

自定義進度條ProgressBar

在實際的應用場景中我們有時會自定義進度條。

先看一下效果吧!

一、在佈局中新增控制元件

<ProgressBar
android:id="@+id/progressBarHorizontal"
style="@style/InitProgressBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@+id/tv_download_progress"
android:layout_marginBottom="@dimen/common_10dp"
android
:layout_marginLeft="25dp" android:layout_marginRight="25dp" android:max="100" android:progress="0" />

二、在style中添加布局

<style name="InitProgressBar" parent="@android:style/Widget.ProgressBar.Horizontal">
<!-- 最大高度50dp,最小高度10dp,進度值確定,Drawable樣式檔案引用 -->
<item name="android:maxHeight">50dp</item>
<item name="android:minHeight">10dp</item> <item name="android:indeterminateOnly">false</item> <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item> <item name="android:progressDrawable">@drawable/init_progressbar</item>
</style>

三、在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>
            <stroke android:width="2px" android:color="@color/white" />設定邊框的顏色
            <corners android:radius="10dp"/>
            <gradient
android:angle="270"
android:centerY="0.75"
android:endColor="#000000"
android:startColor="#000000"/>
        </shape>
    </item><item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="0dp"/>
                <gradient
android:angle="270"
android:centerY="0.75"
android:endColor="#CCCCCC"
android:startColor="#CCCCCC"/>
            </shape>
        </clip>
    </item>
<item android:id="@android:id/progress">
        <clip>
            <shape>
<!-- 圓角設定 -->
<corners android:radius="10dp"/>
                <gradient
android:angle="270"
android:centerY="0.75"
android:endColor="#FFFFFF"
android:startColor="#FFFFFF"/>
            </shape>
        </clip>
    </item>
</layer-list>