Picture loading Picasso using _ Picture frame

Brief introduction

Picasso is an open source Android graphics cache library at square, which enables image downloading and caching.

Mainly has the following characteristics: In the adapter of the collection and cancellation has not been in the field of view of the picture resource loading, to prevent possible picture dislocation; Use complex image compression to minimize memory consumption, use minimal memory to complete complex graphics conversion operations, with memory and hard disk caching; can load network or local resources.

GitHub Address:

Https://github.com/square/picasso background

The Android system, which is loaded as a picture resource, loads images into memory by pixel points of the image. Now a 500W camera shot (2592x1936) is loaded into memory and requires about 19M of memory, if you join a complex network request in a network with varying signal strength, and do a cache of images and other processing, you will spend a lot of time and effort to deal with these problems, However, if you use Picasso for loading implementations, these issues will be well resolved. Configuration

Build.gradle configuration:

Compile ' com.squareup.picasso:picasso:2.5.2 '

Obfuscation configuration:

-dontwarn com.squareup.okhttp.**

Network configuration:

<uses-permission android:name= "Android.permission.INTERNET"/>

Picture loading

Picasso uses Easy-to-use interfaces and has an implementation class Picasso, a complete picture loading request requires at least three parameters:
with contexts: context;
Load (String Path): The address where the picture is loaded;
Into (ImageView target): The ImageView of a picture display.

Simple use case:

Picasso.with (mactivity)
    . Load (Constant.picurl)
    . into (mivnetworkpictures);

Other loading methods:

You can load resource files, local file files, URI addresses, and so on. Common methods

1. Nofade ():

The default picture loading method for Picasso has a fade effect, and if the Nofade () method is invoked, the picture loaded will be displayed directly on the ImageView.

2. Noplaceholder ():

There is a scene, when you load a picture from the net to ImageView, after a while to show another picture on the same imageview. This time you will go to call Picasso to make two requests, then Picasso will be clear before the picture, may show the. placeholder () Status of the picture, to the user is not a good experience, if the call Noplaceholder () Method would not have happened.

3. Resize (int targetwidth, int targetheight):

You can use this method to crop the picture size if the picture is large or if you want to customize the display style of the picture.

4. Onlyscaledown ():

If the Resize (width,height) method is invoked, Picasso will generally recalculate to change the loading quality of the picture, such as when a small picture becomes a large picture to show. But if our original image is larger than the new resize, we can call Onlyscaledown () to show directly without recalculation and shorten the load calculation time of the picture.

5. Centerinside ():

The picture will be fully displayed, the picture may not fill filled with imageview, also may be stretched or squeezed, is generally proportional to shrink.

6. Centercrop ():

The picture will be cropped, but the quality of the picture is no different, and so the proportions enlarge.

7. Fit ():

Picasso will measure the size and imageview of the picture, calculate the best size and the best picture quality to show the picture, reduce the memory consumption and have no effect on the view.

8. Priority ():

If the top picture in one view is larger and the bottom picture is smaller, because the Picasso is loaded asynchronously, the small image is loaded first. However, the user may prefer to see the above picture is loaded before the bottom of the picture is loaded, this method can be used to set the priority of the picture load.
Note: Setting the priority does not guarantee that the picture will be loaded preferentially, but will skew to load first.

9. Tag ():

Add tags to the request to promote the user experience. For example, a picture is loaded in the item of the list ListView, when the user can set the stop request when it is fast sliding, and then load the request when the sliding stops, and cancel the request when exiting the current page.

Picasso provides three ways to set tag: Pause marker: Pausetag () Visible tag: Resumetag () Unmark: Canceltag ()

To add a tag when a picture request is loaded:

Picasso.with (mactivity).
    load (constant.picurl).
    tag ("Mark")
    . into (mivnetworkpictures);

ListView implementation of sliding monitoring onscrolllistener:

@Override public
void onscrollstatechanged (abslistview view, int scrollstate) {
    Picasso Picasso = Picasso.with ( mactivity);
    if (scrollstate = = Scroll_state_idle | | scrollstate = = scroll_state_touch_scroll) {
        Picasso.resumetag ("Mark");
    } else {
        Picasso.pausetag ("Mark");
    }

Cancel the request when the page jumps or exits:

@Override
protected void OnDestroy () {
    Super.ondestroy ();
    Picasso.with (mactivity)
            . Canceltag ("Mark");

Note: If the tag status is pause or resume, Picasso will hold a reference to tag, if the user quit the current activity, garbage collection mechanism for recycling may occur memory leaks, so need in the OnDestroy () method to handle it appropriately.

A. Fetch ():

This method loads a picture asynchronously in the background, but does not show on the ImageView and does not return bitmap, this method is only to load the acquired resources into local and memory, and shorten the later loading time.

One. Get ():

The method is an asynchronous thread that returns a bitmap after the load completes, but it should be noted that the method cannot be invoked in the main thread because it causes a thread to block.

Target:

The previous call into () method loads the acquired resource into the ImageView, but we can also place the resource as a callback in target.

Private Target target = new Target () {

    @Override public
    void onbitmaploaded (Bitmap Bitmap, Picasso.loadedfrom fro m) {

    }

    @Override public
    void onbitmapfailed (drawable errordrawable) {

    }

    @Override
    public void Onprepareload (drawable placeholderdrawable) {

    }
};

The call can then be

picasso.with (mactivity)
    . Load (Constant.picurl)
    . into (target);

Note: You can use. Get () or target to obtain the bitmap of a picture, but you cannot use the anonymous inner class when you use target because garbage collection reclaims objects when you do not get bitmap.

Rotate (float degrees):

When we need to do a simple rotation of a picture, we just need to pass the rotation angle greater than 0 less than 360.

Rotate (float degrees, float pivotx, float pivoty):

The default picture rotation is rotated relative (0,0), so we can call the above method if we want to customize the rotation relative to a point.

Error:

The picture displayed when the load failed, if 3 retries (download source code can be modified as needed) or the picture cannot be loaded successfully, it is displayed with the error placeholder picture.

Placeholder ():

The picture displayed during loading.

17. If the picture address does not exist or is empty when how to deal with.

When the picture address does not exist or is empty, you can call the Cancelrequest () method to cancel the network request, and then call the Imageview.setimagedrawable (null) method to set it.

if (Stringutil.isempty (Constant.picurl)) {
    picasso.with (mactivity)
            . Cancelrequest (mivnetworkpictures);
    Mivnetworkpictures.setimagedrawable (null);
}

Use of Picasso in custom notification:

Picasso has a feature that can load pictures onto remoteviews, and remoteviews is used in widgets and custom notification layouts, and here's how they are used.

Picasso.with (mactivity)
    . Load (Constant.picurl)
    . into (Remoteviews, R.id.iv_remoteview, Notificationid, notification);

19. Blur Picture:

We can configure the picture before it is displayed, and then we need to define a class to implement the transformation interface, and then rewrite the method inside.

 Private class Blurtransformation implements transformation {Renderscript rs;
    Public Blurtransformation {rs = renderscript.create (context); @Override public Bitmap transform (Bitmap Bitmap) {//Create a Bitmap as the effect of the final processing Bitmap Bitmap blurredb

        Itmap = Bitmap.copy (Bitmap.Config.ARGB_8888, true); allocating memory allocation input = Allocation.createfrombitmap (RS, Blurredbitmap, Allocation.MipmapControl.MIPMAP_FULL, Al Location.
        usage_shared);

        Allocation output = allocation.createtyped (RS, Input.gettype ());
        Load an instance according to the configuration we want to use Scriptintrinsicblur script = Scriptintrinsicblur.create (RS, Element.u8_4 (RS));

        Script.setinput (input);

        Setting the fuzzy Radius script.setradius (10);

        Start Operation Script.foreach (output);

        Copy the results to the Blurredbitmap Output.copyto (BLURREDBITMAP);

        Releasing resources bitmap.recycle ();
    return blurredbitmap; } @Override PUblic String Key () {return "blur";
    }//Then make the call to Picasso.with (mactivity). Load (Constant.picurl). Transform (new Blurtransformation (mactivity)) . into (Mivnetworkpictures);

20. Fuzzy + round:

Picasso provides us with an API that allows us to set the parameters to a transformations set transform (list<? extends transformation> transformations), which means that we can do a series of operations on the loaded resource.

Private class Circletransformation implements transformation {@Override public Bitmap transform (Bitmap source) {

        int size = Math.min (Source.getwidth (), Source.getheight ());
        int x = (Source.getwidth ()-size)/2;

        int y = (source.getheight ()-size)/2;
        Bitmap Squaredbitmap = Bitmap.createbitmap (source, x, y, size, size);
        if (squaredbitmap!= source) {source.recycle ();

        } Bitmap Bitmap = bitmap.createbitmap (size, size, source.getconfig ());
        Canvas Canvas = new Canvas (bitmap);
        Paint Paint = new Paint (); Bitmapshader shader = new Bitmapshader (Squaredbitmap, BitmapShader.TileMode.CLAMP, bitmapshader.tilemode.c
        LAMP);
        Paint.setshader (shader);

        Paint.setantialias (TRUE);
        float r = size/2f;

        Canvas.drawcircle (R, R, R, paint);
        Squaredbitmap.recycle ();
    return bitmap; @Override public String key () {return "Circle";
}//Then make the call to list<transformation> transformations = new arraylist<> ();
Transformations.add (New Circletransformation ());

Transformations.add (New Blurtransformation (mactivity)); Picasso.with (mactivity). Load (Constant.picurl). Transform (Transformations). into (mivnetworkpicture s);

21. Caching mechanism:

Picasso default cache allocation size features: The LRU cache accounts for 15% of the available memory of the application, the local cache takes up 2% of the hard disk space, but not more than 50M and not less than 5M (provided this is only effective at 4.0 or you can provide a local cache library to support the full platform like Okhttp) Picasso by default to open 3 threads for local and network access, Picasso load picture order for memory –> local –> network.

22. Memory Policy:

Memorypolicy is responsible for managing the memory cache, and may sometimes you do not want to allow Picasso to read in memory and skip this step, at which point you can call Memorypolicy when making a network request (Memorypolicy policy, Memorypolicy ... additional) method. Memorypolicy is an enumerated type with only two values: No_cache and No_store. No_cache: Let Picasso jump from memory to read the operation of the picture; No_store: If your picture is only loaded once, you can set the value, so that Picasso will not be cached in memory and locally.

code example:

Picasso.with (mactivity).
    load (constant.picurl).
    memorypolicy (Memorypolicy.no_cache). into
    ( Mivnetworkpictures);

Of course you can also call this:

Picasso.with (mactivity)
    . Load (constant.picurl)
    . Memorypolicy (Memorypolicy.no_cache, Memorypolicy.no_ STORE)
    . into (mivnetworkpictures);

Note: While invoking Memorypolicy (Memorypolicy.no_cache) avoids Picasso reading of resources from memory, it does not avoid reading resources locally.

23. Network strategy:

Networkpolicy is responsible for managing the local cache, which is also an enumeration type. No_cache: Skips the process of reading resources from the local; No_store: Do not make local picture caching; OFFLINE: When loading pictures, only read locally, unless the network is normal and resources are not found locally.

Sample code:

Picasso.with (mactivity).
    load (constant.picurl).
    networkpolicy (Networkpolicy.no_cache). into
    ( Mivnetworkpictures);

24. Cache indicator to see where the picture originated:

When we want to know where the images are loaded, memory, local, or load from the network, just call the. Setindicatorsenabled (True) method at the time of the request.

Picasso.with (mactivity)
    . setindicatorsenabled (True);

So each picture in the display, the upper left corner will have a small mark, respectively, blue, green, red three colors. Blue: Obtained from memory, best performance; green: from local, performance general; Red: Load from Network, worst performance.

25. View Picture loading:

Call the. Setloggingenabled (True) method before the picture load request begins, viewing the time that each picture is loaded from the network request by outputting the log.

Picasso.with (mactivity)
        . setloggingenabled (true);

Picasso.with (mactivity)
        . Load (Constant.picurl)
        . into (mivnetworkpictures);

Then view the log information on the console as follows:

D/picasso:main        created      [R0] Request{http://img.taopic.com/uploads/allimg/131009/235013-13100zp54561.jpg }
d/picasso:dispatcher  enqueued     [r0]+8ms 
d/picasso:hunter      executing    [r0]+9ms 
d/ Picasso:hunter      decoded      [r0]+46ms 
d/picasso:dispatcher  batched      [r0]+47ms for completion
d/picasso:dispatcher  delivered    [r0]+248ms 
d/picasso:main        completed    [r0]+249ms From DISK

26. Picture Loading Analysis:

See how much of a picture's load takes up in memory to invoke Statssnapshot.

Statssnapshot statssnapshot = Picasso.with (mactivity). Getsnapshot ();
LOGUTIL.E (Constant.log_tag, "statssnapshot:" + statssnapshot.tostring ());

The final output is:

statssnapshot:statssnapshot{maxsize=19173961, Size=0, Cachehits=0, Cachemisses=1, downloadcount=0, Totaldownloadsize=0, Averagedownloadsize=0, totaloriginalbitmapsize=0, Totaltransformedbitmapsize=0, Averageoriginalbitmapsize=0, Averagetransformedbitmapsize=0, originalbitmapcount=0, transformedBitmapCount=0, timestamp=1494484266351}

27. Create a Picasso:

Picasso there is a direct way to create an instance of it, which is the Picasso.builder class, so that we can create our own Picasso instead of using a standard Picasso.

Picasso Picasso = new Picasso.builder (mactivity). build ();

28. Standard Creation Method:

Our most common use is to call the Picasso.with (context) directly to return a Picasso instance, which is a standard Picasso.

Picasso Picasso = Picasso.with (mactivity);

29. Custom Create Picasso instance:

The instance created by calling Picasso.builder is our custom Picasso, and of course it implements all the functions of the standard Picasso by default, and we can use it like a standard Picasso.

Picasso.builder PB = new Picasso.builder (mactivity);
Picasso Picasso = Pb.build ();
Picasso.load (Constant.picurl)
        . into (mivnetworkpictures);

30. Make the custom Picasso into global use:

Call the Picasso.setsingletoninstance (Picasso) method when the application is started, so that all subsequent calls to the Picasso.with (context) return are our custom Picasso.

Picasso.builder PB = new Picasso.builder (mactivity);
Picasso Picasso = Pb.build ();
Picasso.setsingletoninstance (Picasso);

31. Support Flight mode, the number of concurrent threads can be changed according to network state:

Switch to flight mode or network state changes will automatically adjust the thread pool maximum concurrency number, the default thread number is 3 threads, WiFi state is 4 threads, 4G State 3 threads, 3G State 2 threads, 2G State 1 threads.

32. "None" local cache:

The "No" local cache does not mean that there is no local cache, but rather that Picasso did not implement it and handed it to another network library in square okhttp to implement it. The advantage is that you can control the expiration time of the picture by requesting the Cache-control and expired in the response header. Custom Picasso Cache

Picasso the default cache path is located under Data/data/your package name/cache/picasso-cache/. In the development process we will inevitably encounter some needs, we need to modify the image of the cache path.

Analysis:

We notice that the Picasso bottom is actually using okhttp to download the picture, and there is a. Downloader (Downloader Downloader) method when setting up the Picasso. We can pass in a okhttpdownloader (...).

Realize:

1. Method One

Okhttp dependence

Compile ' com.squareup.okhttp:okhttp:2.4.0 '

Custom Cache Directory

Fileutil.getcachepath (Mcontext)

Custom create Picasso instance and apply to global

Picasso.builder PB = new Picasso.builder (this);
Picasso Picasso = PB
        . Downloader (New Okhttpdownloader (new File (this))
        . Build ();
Picasso.setsingletoninstance (Picasso);

2. Method II

When you upgrade the okhttp to OKHTTP3, you will find that when you set Okhttpdownloader () to downloader, you find that it does not support OKHTTP3. In order to solve the problem of not using OKHTTP3 as a downloader, the Picasso author Jakewharton The Great God wrote a special Okhttp3downloader library. It is also very simple to add dependencies in Project Build.gradle:

Compile ' com.jakewharton.picasso:picasso2-okhttp3-downloader:1.1.0 '

Then set the downloader time to Okhttp3downloader can be changed.

Customizing cache directory and Cache size

Set cache directory
File directory = new file (Fileutil.getcachepath (this));
if (!directory.exists ()) {
    directory.mkdirs ();
}
Set the cache size to run time cache one-eighth
Long maxSize = Runtime.getruntime (). MaxMemory ()/8;

Custom create Picasso instance and apply to global

Okhttpclient client = new Okhttpclient.builder ()
        . Cache (New cache (directory, maxSize))
        . Build ();

Picasso Picasso = new Picasso.builder (this)
        . Downloader (new Okhttp3downloader (client))
        . Build ();
Picasso.setsingletoninstance (Picasso);

Comparison between Glide and Picasso

How to use

1, glide easier to use, because the glide with () method not only accept the context, but also accept activity and Fragment,context will automatically obtain from them. Picasso only accept context.
2, the advantage of putting activity/fragment as the WITH () parameter is that picture loading will be consistent with the life cycle of the activity/fragment. For example, in the OnPause state suspend load, in the Onresume state and automatically reload.

Default bitmap format

1, glide default bitmap format is Rgb_565,picasso the default bitmap format is argb_8888.
2, want to improve glide picture effect, glide can create a new glidemodule convert bitmap format to argb_8888:

The public class Glideconfiguration implements Glidemodule {

    @Override
    the public void applyoptions Glidebuilder builder) {
        builder.setdecodeformat (decodeformat.prefer_argb_8888);
    }

    @Override public
    void registercomponents (context context, Glide Glide) {

    }
}

At the same time, glidemodule is defined as Meta-data in Androidmanifest.xml.

<meta-data
    android:name= "com.wiggins.glide.GlideConfiguration"
    android:value= "Glidemodule"/>

Load Policy

1, Picasso is loaded full size of the picture to memory, and then let the GPU to redraw the size of real time. The size of the glide load is the same as the size of the ImageView, so it will be smaller.
2, Picasso can also specify the size of the loaded picture:

Picasso.with (mactivity).
    load (constant.picurl). Resize (768, 432). into
    (mivpic);

But the problem is that you need to actively calculate the size of the ImageView, or your imageview size is a specific value (rather than wrap_content), you can also:

Picasso.with (mactivity)
    . Load (constant.picurl). Fit
    ()
    . Centercrop ()
    . into (Mivpic);

Image quality Details

When the ImageView is restored to its true size, the glide loaded picture is not as smooth as Picasso.

Images and memory

Similarly, 1080x1920 pixel images are loaded into the 768x432 ImageView, glide the picture is less quality than Picasso. This is because the default bitmap format for glide is RGB-565, which is about half the memory overhead in the ARGB-8888 format.

GIF display

1, glide support GIF display, and Picasso does not support GIF display.
2. Because the life cycle of glide and activity/fragment is consistent, GIF animations are automatically paused or replayed with the activity/fragment state. The glide cache is also here in GIF, resizing and then caching.

Caching policies

1, Picasso and glide are very different in the disk caching strategy. The Picasso cache is full-size, and the glide cache is the same size as ImageView.
2, Picasso only cache a full-size, and glide for each size of the ImageView cache once. Although a picture has been cached once, you will need to download it again if you want to display it in a different size in another place, and then adjust it to the size of the new size cache.
3, specifically is: If the first page has a ImageView x 200, in the second page has a ImageView x 100, which two ImageView was to show the same picture, but glide need to download two times.
4, can change the above behavior, let glide both cache full size and cache other dimensions:

Glide.with (this).
    load (constant.image_dynamic).
    diskcachestrategy (Diskcachestrategy.all). into
    ( Ivimage);

The next time you load a picture in any ImageView, the full-size picture will be resized from the cache and cached.

5. The advantage of this caching method for glide is that the load display is very fast, while the Picasso method causes some delays because of the need to resize before displaying, but glide needs more space to cache than Picasso.

Other

1, the size of the package: Picasso (v2.5.1) the size of about 118kb, and Glide (v3.5.2) the size of about 430KB.
2, the number of methods: Picasso and glide of the number of methods are 840 and 2,678 respectively. For the Dex file 65,535 method Limits, 2678 is a fairly large number. It is recommended that you open Proguard when using glide.
3, glide can be any local video decoding into a static picture, and Picasso not. Fresco advantages and disadvantages

Fresco is a powerful picture-loading library on Facebook's open source Android platform.

The main features of the two memory cache plus the native cache constitutes a level three cache, support streaming, can be similar to the Web page blur progressive display of pictures, support for multiple frame animation pictures, such as: Gif, WEBP, and so on.

Memory management

Fresco's biggest bright spot is its memory management. Bitmap in Android consumes a lot of memory, which in the Android 5.0 system can significantly trigger interface cotton, and using fresco would be a good solution to this problem. Fresco will put the picture in a special memory area, and when the picture is no longer displayed, the memory occupied will be automatically released. This makes the app smoother, reduces the amount of oom that is triggered by the memory footprint of the image, especially when the app contains more pictures.

Image

Fresco support the progressive rendering of the image, the progressive picture format first presents a rough picture outline, and then as the image download continues, gradually show a clear picture. This is very helpful in browsing pictures at low speed and can bring a better user experience. In addition, fresco supports loading GIF, WEBP format.

The advantage picture is stored in the anonymous shared memory of the Android system, not in the heap memory of the virtual machine, and the middle buffer data of the picture is also stored in the local heap memory. So the application has more memory to use, will not because the picture load causes oom, simultaneously also reduces the garbage collector frequently calls the recycling bitmap to cause the interface cotton, the performance is higher, the gradual loading JPEG picture, supports the picture from Blur to the clear loading; Pictures can be displayed at any point in the center of the ImageView, not just the center of the picture, the JPEG image changes size is also in native, not in the virtual machine heap memory, also reduce the occurrence of oom; good support for GIF image display.

The disadvantage frame is larger, the APK volume is affected, and the use is cumbersome. Imageloader Advantages and Disadvantages

Relatively old frame, stable, loading speed is moderate.

Advantages of multithreading download pictures, pictures can come from the network, files, assets and drawable Medium; supports customized configuration imageloader such as thread pool, picture downloader, memory cache policy, HDD caching policy, picture display options, and other configurations; Support picture memory cache, file system cache or SD card cache, default implementation of a variety of memory caching algorithms, such as size maximum first delete, use at least first delete, the most recent use of the first deletion, advanced first Delete, the longest time to delete, etc. support the picture download process monitoring; Based on control (ImageView) The size of the bitmap to cut, reduce bitmap occupy too much memory, a better control of the image loading process, such as suspended picture loading, restart loading pictures, etc., generally used in the ListView, the GridView, Through the Pauseonscrolllistener interface to control the sliding process to suspend the loading of the picture, stop sliding to load the picture, provide in the slower network to load the picture.

Disadvantages

GIF image loading is not supported, the use of a little cumbersome, and caching mechanism and HTTP is not a good combination of caching, is entirely their own set of caching mechanism. Picasso Advantages and disadvantages

The use of convenient, one line of code to complete the load picture and display, the frame small size.

Advantages of the statistical detection function: Support the use of image cache detection, including: Cache Hit rate, the use of memory size, save the flow, etc. support priority processing: Each task scheduling before the choice of high priority tasks, such as the App page banner priority higher than the icon when it is very applicable; Support delay to picture size calculation complete loading; Support flight mode and number of concurrent threads according to the network state changes: The mobile phone switch to flight mode or network state transformation will automatically adjust the maximum number of concurrent thread pool; "No" local cache: no local cache does not mean that there is no local cache, but rather that Picasso did not implement it. To the other network library of square okhttp to implement. The advantage is that you can control the expiration time of a picture by requesting the Cache-control and expired in the response header.

Disadvantages

GIF is not supported, cached pictures are not scaled, caching pictures by default using argb_8888 format, large cache size. Glide Advantages and Disadvantages

The advantage picture occupies the memory to reclaim in time, can reduce because of the memory to cause the crash, the life cycle and the activity/fragment are consistent; The default bitmap format is rgb_565, reducing memory resource footprint; The glide is smaller than the memory occupied by the Universal-image-loader; the picture display is a gradient, smoother, glide can decode any local video into a static picture, and support GIF, WebP, thumbnails, and so on.

Disadvantages

The frame is larger and affects the APK volume.

Project Address ☞ Transmission Gate