安卓自定義控件--垂直進度條

安卓只給我們提供了水平的進度條和環形進度條，沒有垂直的進度條，下面我們來開發個垂直的進度條。

效果圖如下：

 

一、工作原理

其實就是畫一個矩形，改變矩形的高度就能模擬進度的變化。當進度變化時，改變矩形的高度，然后重繪即可。

二、代碼如下

1.VerticalProgressBar.java:

public class VerticalProgressBar extends View {

    private Paint paint;// 畫筆
    private int progress;// 進度值
    private int width;// 寬度值
    private int height;// 高度值

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

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

    public VerticalProgressBar(Context context) {
        super(context);
        init();
    }

    private void init() {
        paint = new Paint();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getMeasuredWidth() - 1;// 寬度值
        height = getMeasuredHeight() - 1;// 高度值
    }

    @Override
    protected void onDraw(Canvas canvas) {
        paint.setColor(Color.rgb(55, 200, 255));// 設置畫筆顏色

        canvas.drawRect(0, height - progress / 100f * height, width, height,
                paint);// 畫矩形

        canvas.drawLine(0, 0, width, 0, paint);// 畫頂邊
        canvas.drawLine(0, 0, 0, height, paint);// 畫左邊
        canvas.drawLine(width, 0, width, height, paint);// 畫右邊
        canvas.drawLine(0, height, width, height, paint);// 畫底邊

        paint.setColor(Color.RED);// 設置畫筆顏色為紅色
        paint.setTextSize(width / 3);// 設置文字大小
        canvas.drawText(progress + "%",
                (width - getTextWidth(progress + "%")) / 2, height / 2, paint);// 畫文字
        super.onDraw(canvas);
    }

    /**
     * 拿到文字寬度
     * @param str 傳進來的字符串
     * return 寬度
     */
    private int getTextWidth(String str) {
        // 計算文字所在矩形，可以得到寬高
        Rect rect = new Rect();
        paint.getTextBounds(str, 0, str.length(), rect);
        return rect.width();
    }

    /** 設置progressbar進度 */
    public void setProgress(int progress) {
        this.progress = progress;
        postInvalidate();
    }

}

2.MainActivity.java:

public class MainActivity extends ActionBarActivity {

    private VerticalProgressBar vpProgressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    /**初始化控件 */
    private void initView() {
        vpProgressBar = (VerticalProgressBar) findViewById(R.id.vp_progress);
        run();
    }

    /**測試progressbar*/
    private void run() {
        new Thread(){
            public void run() {
                try {
                    for (int i= 0;i<=100;i++) {
                        Thread.sleep(50);//休息50毫秒
                        vpProgressBar.setProgress(i);//更新進度條進度
                    }
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            };
        }.start();
    }


}

3.布局文件activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.verticalprogressbar.MainActivity" >

    <com.example.verticalprogressbar.VerticalProgressBar
        android:id="@+id/vp_progress"
        android:layout_width="50dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        />

</RelativeLayout>

 源碼地址：https://github.com/Jszgw/VerticalProgressBar