您的位置：首页 > 移动开发 > Android开发

Android 自定义View修炼-自定义加载进度动画XCLoadingImageView

2015-12-10 22:43 976 查看
一、概述

本自定义View，是加载进度动画的自定义View，继承于ImageView来实现，主要实现蒙层加载进度的加载进度效果。

支持水平左右加载和垂直上下加载四个方向，同时也支持自定义蒙层进度颜色。

直接看下面的效果图吧。

二、效果图

废话不说，先来看看效果图吧~~



三、实现原理方案

1、自定义View-XCLoadingImageView，继承ImageVIew来实现，这样就不用自己再处理drawable和测量的工作内容。

2、根据蒙层颜色创建一个蒙层bitmap，然后根据这个bitmap来创建一个ClipDrawable，最后利用ClipDrawable的level属性

来裁剪显示区域进度，从而达到加载进度的效果。

3、最后利用属性动画技术或ClipDrawable的setLevel()方法来达到进度的效果。

四、自定义加载进度效果XCLoadingImageView的具体实现

1、初始化需要用到的数据变量以及画笔以及属性

privatePaintmImagePaint;
privateintmImageHeight,mImageWidth;
privatebooleanmIsAutoStart=false;
privateintmMaskColor=Color.TRANSPARENT;
privateClipDrawablemClipDrawable;
privateDrawablemMaskDrawable;
privateintmaskHeight;
privateintmProgress;
privateObjectAnimatormAnimator;
privatelongmAnimDuration=2500;
privatefloatmScaleX,mScaleY;
privateintmGravity=Gravity.BOTTOM;
privateintmOrientaion=ClipDrawable.VERTICAL;
privateintmMaskOrientation=MaskOrientation.BottomToTop;

//Loadingoriention
publicstaticfinalclassMaskOrientation{
publicstaticfinalintLeftToRight=1;
publicstaticfinalintRightToLeft=2;
publicstaticfinalintTopToBottom=3;
publicstaticfinalintBottomToTop=4;
}

/**
*initialattributes
*/
privatevoidinitAttrs(Contextcontext,AttributeSetattrs){
if(attrs==null){
return;
}
TypedArrayt=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();
}

/**
*initialpaint
*/
privatevoidinit(){
if(mImagePaint==null){
mImagePaint=newPaint(Paint.ANTI_ALIAS_FLAG);
mImagePaint.setXfermode(newPorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));
}
}


2、初始化蒙层Bitmap以及创建加载进度用的ClipDrawable

privatevoidinitMaskBitmap(intmaskColor){
Drawabledrawable=getDrawable();
if(drawable==null){
return;
}
BitmapbgBmp=((BitmapDrawable)drawable).getBitmap();
mImageWidth=drawable.getIntrinsicWidth();
mImageHeight=drawable.getIntrinsicHeight();

BitmapfgBmp=Bitmap.createBitmap(mImageWidth,mImageHeight,Bitmap.Config.ARGB_8888);
CanvasfgCanvas=newCanvas(fgBmp);
fgCanvas.drawColor(maskColor);

Bitmapbitmap=combineBitmap(bgBmp,fgBmp);
mMaskDrawable=newBitmapDrawable(null,bitmap);
mClipDrawable=newClipDrawable(mMaskDrawable,mGravity,mOrientaion);
}


3、合并蒙层Bitmap和ImageView的src的drawable为新的Bitmap

/**
*combinetowbitmaptoonebitmap
*/
privateBitmapcombineBitmap(Bitmapbg,Bitmapfg){
Bitmapbmp=Bitmap.createBitmap(mImageWidth,mImageHeight,Bitmap.Config.ARGB_8888);
Canvascanvas=newCanvas(bmp);
canvas.drawBitmap(bg,0,0,null);
canvas.drawBitmap(fg,0,0,mImagePaint);
returnbmp;
}


4、重写ImageVIew的onDraw（）方法来把创建的ClipDrawable绘制到Canvas上

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



5、弹通过属性动画或者setLevel，并调用postInvalidate（）来重绘，从而达到进度刷新的效果

privatevoidinitAnim(){
stopAnim();
mAnimator=ObjectAnimator.ofInt(mClipDrawable,"level",0,10000);
mAnimator.setDuration(mAnimDuration);
mAnimator.setRepeatCount(ValueAnimator.INFINITE);
mAnimator.setRepeatMode(ValueAnimator.RESTART);
mAnimator.addUpdateListener(newValueAnimator.AnimatorUpdateListener(){
@Override
publicvoidonAnimationUpdate(ValueAnimatoranimation){
postInvalidate();
}
});
if(mIsAutoStart){
mAnimator.start();
}
}
publicvoidsetProgress(intprogress){
mProgress=progress;
mClipDrawable.setLevel(mProgress*100);
postInvalidate();
}


五、如何使用该自定义LoadingView控件

1、使用该自定义LoadingView非常简单，和使用普通ImageView差不对哦，只需设置下方向和蒙层颜色即可


publicclassMainActivityextendsActivity{

@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

XCLoadingImageViewimageView2=(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
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航