之前看到過一個數字進度條,一直想寫,今天就把這個實現下,想起來也是很簡單的,先看下實現的效果:
思路:
繪制2根線 繪制進度條的文字,不斷的改變起點和終點,然后沒多少時間去更新UI就ok,在這就不畫圖了,看代碼就看的明白,不要想的很復雜!
package com.tuya;import android.animation.ValueAnimator;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Rect;import android.util.AttributeSet;import android.view.View;/** * Created by admin on 2016/12/19. */public class DownLoadProgressView extends View { private Paint paint;//繪制進度條畫筆 private Paint textPaint;//繪制文字畫筆 private Paint dottePaint;//繪制灰色線畫筆 private int width; private int height; private int padding =5; private int value = 0; public DownLoadProgressView(Context context) { this(context,null); } public DownLoadProgressView(Context context, AttributeSet attrs) { this(context, attrs,0); } public DownLoadProgressView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initPaint(); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); width = w; height = h; } /** * 初始化畫筆 */ private void initPaint() { paint = new Paint(); paint.setAntiAlias(true); paint.setStrokeWidth(2); paint.setStyle(Paint.Style.FILL); paint.setColor(Color.BLUE); textPaint = new Paint(); textPaint.setAntiAlias(true); textPaint.setStrokeWidth(3); textPaint.setStyle(Paint.Style.FILL); textPaint.setColor(Color.BLUE); textPaint.setTextSize(12); dottePaint = new Paint(); dottePaint.setAntiAlias(true); dottePaint.setStrokeWidth(2); dottePaint.setStyle(Paint.Style.FILL); dottePaint.setColor(Color.parseColor("#e5e5e5")); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); String str = value+"%"; float strWidth = textPaint.measureText(value+"%")+padding;//繪制文字的寬度 +padding是為了防止在進度條加載完畢的時候文字繪制出現被切掉情況 Rect rect = new Rect(); textPaint.getTextBounds(str,0,str.length(),rect); canvas.drawLine(0,height/2,value*((width-strWidth)/100),height/2,paint);//繪制進度 canvas.drawText(value+"%",value*((width-strWidth)/100)+padding,(height-rect.height())/2+2*padding,textPaint);//繪制進度文字 這個高度+2*padding是因為drawText是根據基線計算的,要準確的話要去求基線 canvas.drawLine(value*((width-strWidth)/100)+strWidth+padding,height/2,width,height/2,dottePaint);//繪制灰色進度表示剩余多少 postDelayed(new Runnable() { @Override public void run() { if(value<100){ value++; postInvalidate(); } } },100); }}
布局文件:
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#7EC0EE"> <com.tuya.DownLoadProgressView android:id="@+id/dpv" android:layout_width="fill_parent" android:layout_height="30dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:layout_marginTop="60dp" ></com.tuya.DownLoadProgressView></RelativeLayout>
github:NumberProgress
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答