之前看到過一個(gè)數(shù)字進(jìn)度條,一直想寫,今天就把這個(gè)實(shí)現(xiàn)下,想起來也是很簡單的,先看下實(shí)現(xiàn)的效果:
思路:
繪制2根線 繪制進(jìn)度條的文字,不斷的改變起點(diǎn)和終點(diǎn),然后沒多少時(shí)間去更新UI就ok,在這就不畫圖了,看代碼就看的明白,不要想的很復(fù)雜!
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;//繪制進(jìn)度條畫筆 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是為了防止在進(jìn)度條加載完畢的時(shí)候文字繪制出現(xiàn)被切掉情況 Rect rect = new Rect(); textPaint.getTextBounds(str,0,str.length(),rect); canvas.drawLine(0,height/2,value*((width-strWidth)/100),height/2,paint);//繪制進(jìn)度 canvas.drawText(value+"%",value*((width-strWidth)/100)+padding,(height-rect.height())/2+2*padding,textPaint);//繪制進(jìn)度文字 這個(gè)高度+2*padding是因?yàn)閐rawText是根據(jù)基線計(jì)算的,要準(zhǔn)確的話要去求基線 canvas.drawLine(value*((width-strWidth)/100)+strWidth+padding,height/2,width,height/2,dottePaint);//繪制灰色進(jìn)度表示剩余多少 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
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點(diǎn)
疑難解答