安卓只給我們提供了水平的進度條和環形進度條,沒有垂直的進度條,下面我們來開發個垂直的進度條。
效果圖如下:
一、工作原理
其實就是畫一個矩形,改變矩形的高度就能模擬進度的變化。當進度變化時,改變矩形的高度,然後重繪即可。
二、代碼如下
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"
/>