Android加载动画系列—— LineWithTextLoadingAnim

Android加载动画系列—— LineWithTextLoadingAnim

       有时候我们需要在一条直线上从左向右显示加载百分比，这个需求该怎么实现呢？

       让我们先来看看效果图：

1、LineWithTextLoadingAnim.java源码如下：

public class LineWithTextLoadingAnim extends View {    private Paint mPaint;    private float mWidth = 0f;    private float mHeight = 0f;    private int mValue = 0;    private float mPadding = 5f;    public LineWithTextLoadingAnim(Context context) {        this(context, null);    }    public LineWithTextLoadingAnim(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public LineWithTextLoadingAnim(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        initPaint();    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        mWidth = getMeasuredWidth();        mHeight = getMeasuredHeight();    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        String text = mValue + "%";        float textLength = getFontLength(mPaint, text);        float textHeight = getFontHeight(mPaint, text);        if (mValue == 0) {            canvas.drawText(text, mPadding, mHeight / 2 + textHeight / 2, mPaint);            canvas.drawLine(mPadding + textLength, mHeight / 2, mWidth - mPadding, mHeight / 2, mPaint);        } else if (mValue >= 100) {            canvas.drawText(text, mWidth - mPadding - textLength, mHeight / 2 + textHeight / 2, mPaint);            canvas.drawLine(mPadding, mHeight / 2, mWidth - mPadding - textLength, mHeight / 2, mPaint);        } else {            float w = mWidth - 2 * mPadding - textLength;            canvas.drawLine(mPadding, mHeight / 2, mPadding + w * mValue / 100, mHeight / 2, mPaint);            canvas.drawLine(mPadding + w * mValue / 100 + textLength, mHeight / 2, mWidth - mPadding, mHeight / 2, mPaint);            canvas.drawText(text, mPadding + w * mValue / 100, mHeight / 2 + textHeight / 2, mPaint);        }    }    private void initPaint() {        mPaint = new Paint();        mPaint.setAntiAlias(true);        mPaint.setStyle(Paint.Style.FILL);        mPaint.setColor(Color.WHITE);        mPaint.setTextSize(dip2px(10));        mPaint.setStrokeWidth(dip2px(1));    }    public float getFontLength(Paint paint, String str) {        Rect rect = new Rect();        paint.getTextBounds(str, 0, str.length(), rect);        return rect.width();    }    public float getFontHeight(Paint paint, String str) {        Rect rect = new Rect();        paint.getTextBounds(str, 0, str.length(), rect);        return rect.height();    }    public int dip2px(float dpValue) {        final float scale = getContext().getResources().getDisplayMetrics().density;        return (int) (dpValue * scale + 0.5f);    }    public void setValue(int value) {        this.mValue = value;        invalidate();    }}

 

2、接下来我们在layout中引用自定义的动画控件，如下所示：

<com.cyril.loadinganim.LineWithTextLoadingAnim    android:id="@+id/linewithtext"    android:layout_width="match_parent"    android:layout_height="10dp"    />

 

3、然后在Activity中实现动画的播放和停止，使用事例如下：

首先我们需要用到Handler来更新动画

private LineWithTextLoadingAnim lineWithTextLoadingAnim;private int mValueLinWithText = 0;private Timer mTimerLineWithText = new Timer();

private void startLineWithText() {    mValueLinWithText = 0;    if (mTimerLineWithText != null) {        mTimerLineWithText.cancel();    }    mTimerLineWithText = new Timer();    timerTaskLineWithText();}public void timerTaskLineWithText() {    mTimerLineWithText.schedule(new TimerTask() {        @Override        public void run() {            if (mValueLinWithText < 100) {                mValueLinWithText++;                Message msg = mHandler.obtainMessage(2);                msg.arg1 = mValueLinWithText;                mHandler.sendMessage(msg);            } else {                mTimerLineWithText.cancel();            }        }    }, 0, 50);}

private Handler mHandler = new Handler() {    @Override    public void handleMessage(Message msg) {        super.handleMessage(msg);        if (msg.what == 2) {            lineWithTextLoadingAnim.setValue(msg.arg1);        }    }};

然后在onCreate方法中调用相应的方法

lineWithTextLoadingAnim = (LineWithTextLoadingAnim) findViewById(R.id.linewithtext);startLineWithText();

4、  戳这里，小编带你去源码的下载地址：http://download.csdn.net/detail/zhimingshangyan/9582830