Clipping of glide-pictures (ScaleType)

Preface:

In This section we'll talk about the tailoring of the picture about glide. Glide Series Catalogue 1.glide-Getting Started tutorial 2.glide-taking up bitmaps and loading animations 3.glide-loading local pictures 4.glide-loading gif 5.glide-binding lifecycle 6.glide-memory cache with disk cache 7. glide-Modules Custom Glide 8.glide-Custom cache 9.glide-image compression 10.glide-picture preprocessing (fillet, Gaussian blur, etc.) 11.glide-picture clipping (scaletype) 12.glide-Source Detailed 1. Basic Knowledge

here will be related to glide transformation processing transform, in the previous article has been said, here do not introduce, not seen the best friends to understand, or the next analysis may not understand

glide-picture preprocessing (transform)
http://blog.csdn.net/yulyu/article/details/55261351 2.ImageView Default ScaleType

As for the clipping of the picture, let's first introduce the ImageView default ScaleType setting effect

ImageView's ScaleType has 8 properties: Matrix Center centerinside centercrop fitcenter (default) fitstart fitend Fitxy Some articles say the default is matrix, is not correct, in fact, the default is Fit_center

The default settings can be seen through the ImageView source code.

private void Initimageview () {
    Mmatrix = new Matrix ();
    Mscaletype = Scaletype.fit_center;

    if (!scompatdone) {
        final int targetsdkversion = Mcontext.getapplicationinfo (). targetsdkversion;
        Scompatadjustviewbounds = Targetsdkversion <= build.version_codes. JELLY_BEAN_MR1;
        scompatusecorrectstreamdensity = targetsdkversion > Build.version_codes. M;
        Scompatdrawablevisibilitydispatch = Targetsdkversion < Build.version_codes. N;
        Scompatdone = true;
    }
}

2.1 Property Introduction (1) matrix

does not scale , the picture is aligned with the upper-left corner of the control and is cropped when the picture size exceeds the control (2) Center

without scaling , the picture aligns with the center point of the control and is cropped when the picture size exceeds the control (3) centerinside

With the full display of the image as the target, not clipped , when the display will be scaled, can be displayed in the case of not scaling * * (4) Centercrop

To fill the entire control as the target, and so on than the zoom , the control will be cropped (the width of the height is filled , so long as the picture aspect ratio is not the same as the control aspect ratio, will be clipped) (5) Fitcenter (default)

Adaptive control, no clipping , no more than the control, equal to zoom to maximum , center display (6) Fitstart

Adaptive control, not clipped , without exceeding the control, equal to the maximum , left (top) display (7) Fitend

Adaptive control, no clipping , no more than the control, equal to zoom to the maximum , on the right (bottom) display (8) Fitxy

To fill the entire control as a target, do not stretch or scale proportionally ( may deform ), do not trim 2.2 renderings

When you do not use glide, set the image directly in the src of the ImageView XML as follows

Picture 336 * 448
Control 300 * 300

3.Glide Configuration

Glide There are two ways to set a picture clipping strategy

①fitcenter ()

②centercrop ()

Both of these methods are actually processed by calling the Transform method 3.1 default Policy

when you do not call the two methods above, and you do not call the transform method, when glide calls into the method, it will be processed according to the scaletype you set.

    if (!istransformationset && view.getscaletype () = null) {
        switch (View.getscaletype ()) {case
            Center_ CROP:
                applycentercrop ();
                break;
            Case Fit_center: Case
            Fit_start: Case
            fit_end:
                applyfitcenter ();
                break;
            $CASES-omitted$
            Default:
                //Do nothing.
        }
    }

Applycentercrop is actually called the Centercrop

Applyfitcenter is actually called the Applyfitcenter

load a picture with the default configuration

Glide.with (this). Load (URL). into (IV1);

The effect is as follows (as with ImageView setting SRC)

3.2 Fitcenter

internal is called transform method to deal with, processing code here just to show, do not do a detailed introduction, interested friends can study

public static Bitmap Fitcenter (Bitmap tofit, Bitmappool pool, int width, int height) {if (tofit.getwidth () = = Wid Th && tofit.getheight () = = height) {if (log.isloggable (tag, log.verbose)) {LOG.V (tag
            , "requested target size matches input, returning input");
        } return tofit;
        } final Float Widthpercentage = width/(float) tofit.getwidth ();
        Final float heightpercentage = height/(float) tofit.getheight ();

        Final float minpercentage = math.min (Widthpercentage, heightpercentage); Take the "The floor of the" target width/height, not round. If The matrix//passed into Drawbitmap rounds differently, we want to slightly//overdraw, not Underdraw
        , to avoid artifacts from bitmap reuse.
        Final int targetwidth = (int) (Minpercentage * tofit.getwidth ());

        Final int targetheight = (int) (Minpercentage * tofit.getheight ()); if (tofit.getwidth () = = TargetwiDTH && tofit.getheight () = = Targetheight) {if (Log.isloggable (TAG, Log.verbose)) {Lo
            G.V (TAG, "adjusted target size matches input, returning input");
        } return tofit;
        } bitmap.config Config = Getsafeconfig (Tofit);
        Bitmap toreuse = Pool.get (targetwidth, targetheight, config);
        if (Toreuse = = null) {Toreuse = Bitmap.createbitmap (targetwidth, targetheight, config);
        }//We don ' t add or remove alpha, so keep the alpha setting of the Bitmap We were given.

        Transformationutils.setalpha (Tofit, toreuse);
            if (log.isloggable (tag, log.verbose)) {LOG.V (tag, "Request:" + width + "x" + height);
            LOG.V (TAG, "tofit:" + tofit.getwidth () + "X" + Tofit.getheight ());
            LOG.V (TAG, "toreuse:" + toreuse.getwidth () + "X" + Toreuse.getheight ());
        LOG.V (TAG, "minpct:" + minpercentage); Canvas canvas = newCanvas (Toreuse);
        Matrix matrix = new Matrix ();
        Matrix.setscale (Minpercentage, minpercentage);
        Paint paint = new paint (paint_flags);

        Canvas.drawbitmap (Tofit, Matrix, paint);
    return toreuse;
 }

Effect Diagram:

Glide.with (this). Load (URL). Fitcenter (). to (IV1);

3.3 Centercrop

just like the fitcenter principle, it's not exactly the same as the logic.

public static Bitmap Centercrop (Bitmap recycled, Bitmap tocrop, int width, int height) {if (Tocrop = = null) {
    return null;
    } else if (tocrop.getwidth () = = width && tocrop.getheight () = = height) {return tocrop;
    }//From Imageview/bitmap.createscaledbitmap.
    Final float scale;
    Float dx = 0, dy = 0;
    Matrix M = new Matrix (); if (tocrop.getwidth () * Height > Width * tocrop.getheight ()) {scale = (float) height/(float) Tocrop.getheigh
        T ();
    DX = (width-tocrop.getwidth () * scale) * 0.5f;
        } else {scale = (float) width/(float) tocrop.getwidth ();
    DY = (height-tocrop.getheight () * scale) * 0.5f;
    } m.setscale (scale, scale);
    M.posttranslate ((int) (DX + 0.5f), (int) (dy + 0.5f));
    Final Bitmap result;
    if (recycled! = null) {result = recycled;
    } else {result = Bitmap.createbitmap (width, height, getsafeconfig (tocrop)); }//We don ' t add or remove AlPHA, so keep the alpha setting of the Bitmap we were given.

    Transformationutils.setalpha (Tocrop, result);
    Canvas canvas = new canvas (result);
    Paint paint = new paint (paint_flags);
    Canvas.drawbitmap (Tocrop, M, paint);
return result;
 }

renderings (all of them are the same as the Centercrop effect):

Glide.with (this). Load (URL). Centercrop (). to (IV2);

4. Unified display (easy to compare)

5. Other

One thing to note is that the Fitcenter and Centercrop methods can coexist with the transform method, but sometimes they affect each other, and if fillet processing is clipped, the fillet part may just be trimmed off.

This chapter is mainly about drawing knowledge, if it is not required for drawing the project, then the native Scaletpye or the glide provided by the two methods can be, but if the drawing rules are particularly complex projects (such as my current project (┬_┬)), Then you need to customize the transform, you can refer to Glide two transform processing, you can also use GitHub on a good three-party library Popular articles glide-image preprocessing (fillet, Gaussian blur, etc.) glide-image compression glide-memory cache and disk cache glide-custom Cache glide-Getting Started tutorial Okhttputils Ultimate Package Facebook launches the debug artifact Android code optimization tool