安卓自定义控件--垂直进度条

安卓只给我们提供了水平的进度条和环形进度条，没有垂直的进度条，下面我们来开发个垂直的进度条。

效果图如下：

一、工作原理

其实就是画一个矩形，改变矩形的高度就能模拟进度的变化。当进度变化时，改变矩形的高度，然后重绘即可。

二、代码如下

1.VerticalProgressBar.Java( 继承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(继承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:

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

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