Explain the basic use of Android image loading framework fresco (2)

PS: Recently, I saw that many people began to write year-end summaries. Time passed quickly. At the end of the year, I was one year older.

Learning content:

1. Progress bar

2. Zoom

3.ControllerBuilder，ControllerListener，PostProcesser，Image Request

4. Progressive JPEG and dynamic graph display

I've read the official documents of fresco in the past two days, leaving only the basic principles of fresco and how to use them in combination with class libraries such as okhttp. Although the official documents give more functions, such as custom view, thumbnail display, etc., I've basically read them, and I think the actual requirements should not be so high, Therefore, I won't introduce some things here. For details, please refer to the official documents. I just give a brief introduction to some functions with more usage.

1. Progress bar

The progress bar is also a function of fresco. Fresco itself provides a progressbardrawable class. The effect is actually a rectangular blue progress bar. When the picture is loaded, the progress bar will be loaded. After the picture is loaded, the progress bar will disappear, but the progress is not updated in real time, If we want accurate loading progress, we need to rewrite the internal methods.

To customize the progress bar, we need to implement the onlevelchange method. Here is a brief introduction. If you want to customize the progress bar, you can refer to progressbardrawable to rewrite a progress bar. Personally, I think this function is general. Instead of using the progress bar when loading pictures, It is better to use the progressbarimage property to set a progress picture when the picture is loaded, and support the rotation property.

2. Zoom

The scaling types of draweeview and ImageView are basically the same, fitxy and centercrop. The only difference from ImageView is that it does not support the matrix attribute, but adds a focuscrop attribute to replace the matrix attribute. Here, when setting the attribute, XML use fresco: actualscaletype to set the scaling property of draweeview, or use the genericdraweehierarchy property to set it.

Don't use setscaletype () or set the scaling attribute of Android: scaletype in XML, which is invalid. It is reasonable for the official to give focuscrop to replace matrix. Although the effect will be better than matrix, it is really impossible to judge the effect. Let's talk about the specific function of this attribute first.

We may encounter such a situation in the actual demand. When displaying the face image, try to display the image in the middle. I have encountered this demand before, but it was implemented with the matrix attribute. The server will pass the center of gravity coordinate position of the face, and then the client needs to translate the image according to the center of gravity position of the face, At the same time, you need to scale the image. If you use matrix, you need to use matrix. Postscale() and matrix. Posttranslate(). Simply post the treatment at that time.

This format is really painful. This is our actual project demand at that time. At that time, it was a GridView, in which there were three pictures in one line. It was necessary to control the three pictures at the same time. If it was a portrait picture, it was necessary to translate the avatar to the center. If it was not a portrait picture, it was OK to display the central position. At that time, the implementation was still very troublesome, The width chart and height chart are judged. Because the picture is divided into width chart and height chart, it is necessary to judge them when calculating the zoom ratio. The calculation of zoom ratio = the actual displayed size / the real size of the picture. Due to the different pictures, we need to take the maximum value of both to set the zoom ratio, It will not lead to the problem of excessive scaling, and the size of translation cannot be excessive.

For example, the actual display width of our ImageView is 100. After zooming, the width of the picture is 110. Then the maximum distance we can pan is 10 units, not more than 10 units, otherwise there will be problems when displaying. And we need to center the picture as much as possible, that is, make the loss unit of the picture as small as possible, so we can only talk about the translation of the picture by 5 units, that is, the loss of 5 units on the left and right sides, which is much better than the loss of 10 units on one side. It can be seen here that the use of matrix is still very complex, and the code here can be optimized, but it is still troublesome after optimization.

If we use fresco's focuscrop attribute, things will become very simple.

Set the zoom type to focuscrop in XML, and then set it in Java code:

Here, focuspoint is the relative position of our central point. The float type, (0.5,0.5) is equivalent to the central position of centercrop, (1.0,1.0) is the lowest corner position of the picture. In this way, if the problem is very easy when displaying the portrait picture, just transfer the relative position of the Avatar's center of gravity, then fresco will automatically take the coordinate point as the display center. It looks like it's really simple.

Sometimes the existing scaletype does not meet your needs. We allow you to expand it by implementing scalingutils.scaletype. There is only one method in this interface: gettransform, which will calculate the transformation matrix based on the following parameters. Briefly explain the example given by the official.

In fact, the official example is like this. It gives an actual view display size, and then gives a picture display size. If the picture is paved directly, the picture can be displayed completely, but some pixels are lost. At this time, it is necessary to scale the width and scale the picture to 400, so that the horizontal can be completely displayed on the screen, However, the height becomes lower, and the picture changes from 210 to 200. However, the actual display height is 300. At this time, fitcenter is used to maintain the aspect ratio, reduce or enlarge, so that the picture is completely displayed within the display boundary, and the width or height fits the display boundary. Center display. That's about what it means overall. But the self feeling is meaningless. The height is indeed scaled, but the width is also scaled, so the width will still lose pixels. It's just an enlarged pixel.

Here is the example given by the official. Here min is the smallest, and the official translation is the largest. I didn't specifically study the following methods. It feels like using matrix, but it's really simplified a lot.

3.ControllerBuilder，ControllerListener，PostProcesser，Image Request

Controllerbuilder is used to build the controller. Last time, I briefly introduced the controller, mainly the controller, setting the URI of the picture, whether to reload, etc. then controllerbuilder uses the build mode to build the controller.

The controllerlistener is used to control the download listening events. If we need to set all properties after the image download is completed or after the image is downloaded, the controllerlistener can help us realize this function. However, the picture cannot be modified in this listening event. If we need to modify the picture, we need to use the postprocessor to modify the picture. Imagerequest is used to configure more properties. You can also set the relevant URI, whether progressive loading is supported, or set the post processor. It can be seen that there is an inevitable connection between these functions, so these three functions are introduced together.

Here, we set up a controllerlistener for GIF pictures. If the picture is obtained successfully and the picture has animation effect, then the animation effect will be played, otherwise the toast message will be displayed.

It's easy to understand. Then here we will use the post processor for simple processing.

Here are some dots drawn on the picture. At the same time, the setting of this property needs to use imagerequest to configure the post processor.

Minimum request level for imagerequest

1. Check the memory cache. If yes, return immediately. This operation is real-time.

2. Check the picture cache that is not decoded. If any, decode and return.

3. Check the disk cache. If it is loaded, decode and return.

4. Download or load local files. Resize and rotate (if any), decode and return. For the network diagram, this process is the most time-consuming.

Setlowestpermittedrequestlevel allows you to set a minimum request level. The request level has the following values corresponding to the above:

This is useful if you need to get a picture immediately, or get a picture in a relatively short time, otherwise it will not be displayed.

4. Progressive JPEG setting, dynamic display.

Progressive JPEG means that when we load a picture, if the network is slow, the picture will gradually appear from blurred to clear, which is called progressive JPEG. The specific uses are as follows:

These configurations are required during initialization, otherwise the picture will not render progressive JPEG.

The dynamic diagram shows that there is nothing to say, and the controller does not need to be configured too much.

You only need to set setautoplayanimations() to true to play automatically after loading. If you want to control manually, use controllerlistener to control or directly use controller to access animations.

Note: in the higher version of fresco, gradle needs to be introduced to support animation attributes.

compile 'com.facebook.fresco:animated-gif:0.14.0'

Finally, place a demo: demo download.

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.