Android 自訂View修鍊-自訂載入進度動畫LoadingImageView

標籤：

一、概述

本自訂View，是載入進度動畫的自訂View，繼承於ImageView來實現，主要實現蒙層載入進度的載入進度效果。

支援水平左右載入和垂直上下載入四個方向，同時也支援自訂蒙層進度顏色。

直接看下面的吧。

二、

廢話不說，先來看看吧~~

三、實現原理方案

1、自訂View-XCLoadingImageView，繼承ImageVIew來實現，這樣就不用自己再處理drawable和測量的工作內容。

2、根據蒙層顏色建立一個蒙層bitmap，然後根據這個bitmap來建立一個ClipDrawable，最後利用ClipDrawable的level屬性

來裁剪顯示地區進度，從而達到載入進度的效果。

3、最後利用屬性動畫技術或ClipDrawable的setLevel()方法來達到進度的效果。

 

四、自訂載入進度效果XCLoadingImageView的具體實現

1、初始化需要用到的資料變數以及畫筆以及屬性

private Paint mImagePaint;    private int mImageHeight, mImageWidth;    private boolean mIsAutoStart = false;    private int mMaskColor = Color.TRANSPARENT;    private ClipDrawable mClipDrawable;    private Drawable mMaskDrawable;    private int maskHeight;    private int mProgress;    private ObjectAnimator mAnimator;    private long mAnimDuration = 2500;    private float mScaleX, mScaleY;    private int mGravity = Gravity.BOTTOM;    private int mOrientaion = ClipDrawable.VERTICAL;    private int mMaskOrientation = MaskOrientation.BottomToTop;    //Loading oriention    public static final class MaskOrientation {        public static final int LeftToRight = 1;        public static final int RightToLeft = 2;        public static final int TopToBottom = 3;        public static final int BottomToTop = 4;    }/**     * initial attributes     */    private void initAttrs(Context context, AttributeSet attrs) {        if (attrs == null) {            return;        }        TypedArray t = context.obtainStyledAttributes(attrs, R.styleable.XCLoadingImageView);        mMaskColor = t.getColor(R.styleable.XCLoadingImageView_mask_color, mMaskColor);        mIsAutoStart = t.getBoolean(R.styleable.XCLoadingImageView_auto_start_anim, mIsAutoStart);        setMaskColor(mMaskColor);        t.recycle();    }    /**     * initial paint     */    private void init() {        if (mImagePaint == null) {            mImagePaint = new Paint(Paint.ANTI_ALIAS_FLAG);            mImagePaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));        }    }

 

2、初始化蒙層Bitmap以及建立載入進度用的ClipDrawable

private void initMaskBitmap(int maskColor) {
    Drawable drawable = getDrawable();
    if (drawable == null) {
        return;
    }
    Bitmap bgBmp = ((BitmapDrawable) drawable).getBitmap();
    mImageWidth = drawable.getIntrinsicWidth();
    mImageHeight = drawable.getIntrinsicHeight();

    Bitmap fgBmp = Bitmap.createBitmap(mImageWidth, mImageHeight, Bitmap.Config.ARGB_8888);
    Canvas fgCanvas = new Canvas(fgBmp);
    fgCanvas.drawColor(maskColor);

    Bitmap bitmap = combineBitmap(bgBmp, fgBmp);
    mMaskDrawable = new BitmapDrawable(null, bitmap);
    mClipDrawable = new ClipDrawable(mMaskDrawable, mGravity, mOrientaion);
}

3、合并蒙層Bitmap和ImageView的src的drawable為新的Bitmap 

/**
 * combine tow bitmap to one bitmap
 */
private Bitmap combineBitmap(Bitmap bg, Bitmap fg) {
    Bitmap bmp = Bitmap.createBitmap(mImageWidth, mImageHeight, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bmp);
    canvas.drawBitmap(bg, 0, 0, null);
    canvas.drawBitmap(fg, 0, 0, mImagePaint);
    return bmp;
}

4、重寫ImageVIew的onDraw（）方法來把建立的ClipDrawable繪製到Canvas上

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.save();
    canvas.scale(mScaleX, mScaleY);
    mClipDrawable.setBounds(getDrawable().getBounds());
    mClipDrawable.draw(canvas);
    canvas.restore();
}

5、彈通過屬性動畫或者setLevel，並調用postInvalidate（）來重繪，從而達到進度重新整理的效果

private void initAnim() {
    stopAnim();
    mAnimator = ObjectAnimator.ofInt(mClipDrawable, "level", 0, 10000);
    mAnimator.setDuration(mAnimDuration);
    mAnimator.setRepeatCount(ValueAnimator.INFINITE);
    mAnimator.setRepeatMode(ValueAnimator.RESTART);
    mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            postInvalidate();
        }
    });
    if (mIsAutoStart) {
        mAnimator.start();
    }
}
public void setProgress(int progress){
    mProgress = progress;
    mClipDrawable.setLevel(mProgress * 100);
    postInvalidate();
}

 

五、如何使用該自訂LoadingView控制項

1、使用該自訂LoadingView非常簡單，和使用普通ImageView差不對哦，只需設定下方向和蒙層顏色即可

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        XCLoadingImageView imageView2 = (XCLoadingImageView) findViewById(R.id.img2);
        imageView2.setMaskOrientation(XCLoadingImageView.MaskOrientation.LeftToRight);
        imageView2.setProgress(50);
    }
}

六、源碼下載

源碼下載：http://download.csdn.net/detail/jczmdeveloper/9344987

GitHub地址：https://github.com/jczmdeveloper/XCLoadingImageView

 真題園網：http://www.zhentiyuan.com

 

Android 自訂View修鍊-自訂載入進度動畫LoadingImageView