AndroidカスタムViewチューニング-カスタムロード進捗アニメーションXCLoadingImageView

一、概説
このカスタムビューは、進捗アニメーションをロードするカスタムビューで、ImageViewに継承されて実現され、主にマスクロード進捗のロード進捗効果を実現します.
水平左右のロードと垂直上下のロードの4つの方向をサポートし、カスタムマスクの進捗色もサポートします.
下の効果図を直接見ましょう.
二、効果図
くだらないことは言わないで、まず効果図を見てみましょう~~
三、実現原理方案
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