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