【Code-Snippet】ProgressBar

概述

progressBar，進度條，能夠設置自定義的樣式，其派生出不少控件，如SeekBar，RatingBar，還有ProgressDialog。

1. 基本用法

最經常使用的用法，就是直接在XML佈局文件中聲明，制定style就能夠了。其style有不少種，有橫向長方形的，也有圓圈的。

<ProgressBar
        android:max="100"
        android:progress="20"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/progressBar"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />
複製代碼

其中，咱們比較關注的幾個屬性是：

android:max制定進度條的最大值

android:progress進度條的初始值，默認爲0

style="@android:style/Widget.ProgressBar.Horizontal"指定了其樣式

以上的效果圖以下：

固然，android中自帶的樣式有不少：（這裏的是API 19）

style="@android:style/Widget.ProgressBar"灰色圓形

style="@android:style/Widget.ProgressBar.Inverse"灰色圓形，旋轉方向根上面的相反

style="@android:style/Widget.ProgressBar.Large"大號的灰色圓形

style="@android:style/Widget.ProgressBar.Large.Inverse"大號灰色圓形，帶有Inverse，因此旋轉方向相反

style="@android:style/Widget.ProgressBar.Small"小號灰色圓形

style="@android:style/Widget.ProgressBar.Small.Inverse"小號灰色圓形，帶有Inverse，因此旋轉方向相反

style="@android:style/Widget.ProgressBar.Horizontal"黃色進度，橫向進度條

其實，還有不少不一樣系列的。。。hole系列的 等等，咱們只須要知道幾個關鍵的地方便可：Large，small，Inverse，Horizontal。

Holo系列：

Material系列：（須要API 21）

DeviceDefault系列： 跟當前的API等級是同樣的樣式。

2. 自定義風格的進度條

首先，在src/main/res/values/styles.xml中自定義本身的樣式：

<style name="mprogressbar"> <item name="android:indeterminateOnly">false</item> <item name="android:progressDrawable">@drawable/progressbar_diy</item> <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item> <item name="android:minHeight">20dip</item> <item name="android:maxHeight">20dip</item> </style>
複製代碼

這裏，我定義的是mprogressbar。屬性說明：從上到下：

• indeterminateOnly 表示進度條的進度值是否肯定。
• progressDrawable 咱們自定義的文件
• indeterminateDrawable 進度條的進度值的風格，定義一寫時間之類 的。
• minHeight 最小高
• maxHeight 最大高

咱們主要是重寫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">
        <shape>
            <corners android:radius="1dip" />
            <solid android:color="@android:color/darker_gray"/>
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="1dip" />
                <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="1dip" />
               <solid android:color="@android:color/holo_orange_dark"/>
            </shape>
        </clip>
    </item>
</layer-list>
複製代碼

經過一個 layer-list 根標籤套住，三個item分別是：

• background：背景， 主要是 shape 形狀的設置
• secondaryProgress：第二進度條樣式
• progress：主進度條樣式

3. 豎立的進度條

設計思路，在Draw的時候把其旋轉便可。。。

public class VerticalProgressBar extends ProgressBar {

	public VerticalProgressBar(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
	}

	public VerticalProgressBar(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	public VerticalProgressBar(Context context) {
		super(context);
	}
	
	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
		super.onSizeChanged(h, w, oldh, oldw);
	}
	
	@Override
	protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
	}
	
	@Override
	protected synchronized void onDraw(Canvas canvas) {
		canvas.rotate(-90);
		canvas.translate(-getHeight(), 0);
		super.onDraw(canvas);
	}
}
複製代碼