Android Custom View discipline-Custom load Progress animation Loadingimageview

I. Overview

This custom view, which is a custom view that loads the progress animation, inherits from the ImageView to implement the loading progress effect of the mask loading progress.

Support horizontal loading and unloading vertically up to four directions, while also supporting custom mask progress colors.

Look directly at the following bar.

Two

Don't talk nonsense, first look at it ~ ~

Three, the realization principle scheme

1, the custom View-xcloadingimageview, inherits the ImageView to realize, thus does not have to handle the drawable and the measurement work content oneself again.

2. Create a mask bitmap based on the mask color, then create a clipdrawable based on the bitmap, and finally take advantage of the level property of Clipdrawable

To crop the display area progress to achieve the effect of loading progress.

3, finally using the attribute animation technology or clipdrawable Setlevel () method to achieve the effect of the progress.

Iv. Custom Loading progress effect Xcloadingimageview the specific implementation

1. Initialize the data variables and brushes and properties that need to be used

PrivatePaint Mimagepaint; Private intMimageheight, Mimagewidth; Private BooleanMisautostart =false; Private intMmaskcolor =color.transparent; Privateclipdrawable mclipdrawable; Privatedrawable mmaskdrawable; Private intMaskheight; Private intmprogress; PrivateObjectanimator Manimator; Private LongManimduration = 2500; Private floatMscalex, Mscaley; Private intMgravity =Gravity.bottom; Private intMorientaion =clipdrawable.vertical; Private intMmaskorientation =Maskorientation.bottomtotop; //Loading oriention     Public Static Final classmaskorientation { Public Static Final intLeftToRight = 1;  Public Static Final intRightToLeft = 2;  Public Static Final intTopToBottom = 3;  Public Static Final intBottomToTop = 4; }/*** Initial Attributes*/    Private voidInitattrs (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 voidinit () {if(Mimagepaint = =NULL) {Mimagepaint=NewPaint (Paint.anti_alias_flag); Mimagepaint.setxfermode (NewPorterduffxfermode (PorterDuff.Mode.SRC_ATOP)); }    }

2. Initialize mask bitmap and create clipdrawable for loading progress

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. The drawable of the SRC bitmap and ImageView are merged into the new 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. Rewrite the ImageView OnDraw () method to draw the created clipdrawable onto the 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, the projectile through the property animation or Setlevel, and call Postinvalidate () to redraw, so as to achieve the effect of the progress refresh

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 ();
}

V. How to use the custom Loadingview control

1, the use of the custom Loadingview is very simple, and the use of ordinary ImageView difference Oh, just set the next direction and mask color can be

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);
    }
}

Six, the source code download

SOURCE Download: http://download.csdn.net/detail/jczmdeveloper/9344987

GitHub Address: Https://github.com/jczmdeveloper/XCLoadingImageView

Real Theme Park NET: http://www.zhentiyuan.com

Android Custom View discipline-Custom load Progress animation Loadingimageview