PS: The Fresco framework has been released for a while, and it is also a very popular image loading framework now. I heard that the internal implementation is quite good, although I have not studied the principles yet. But I first learned the basic functions and felt the power of this framework. This article only talks about the relevant usage of setting properties in xml.
0. Introduce Fresco and related precautions.
Placeholder map
Image displayed when loading fails
Reloaded image
The progress picture displayed when loading
Background image
Overlay
7. Loading pictures with multiple effects
8. Round avatar, rounded avatar and background overlay
9. Image border
Let me briefly introduce Fresco. If you just want to load network images and display some special effects, then SimpleDraweeView can basically meet our needs. Fresco uses Image Pipeline to manage and obtain images. SimpleDraweeView is an encapsulation of Image View, and it uses Image Pipeline internally to manage images. Therefore, if we don’t have any special needs, try to use SimpleDraweeView. This is also a suggestion from the official website.
Core classes: DraweeView (subclass: SimpleDraweeView), DraweeHierarchy (subclass: GenericDraweeHierarchy), DraweeController. (Similar to MVC)
- DraweeView: The subclass is our SimpleDraweeView, which is used to display the view on the screen, which is equivalent to V.
- DraweeHierarchy: The subclass is GenericDraweeHierarchy, which is mainly used to maintain and draw Drawable objects, how to display them, etc. Equivalent to M.
- DraweeController: The controller mainly interacts with ImageLoader, such as setting up uri for the image, whether it can be reloaded in failure, etc. Equivalent to C.
I basically use these three categories here. DraweeHierarchy, DraweeController uses the Build pattern to instantiate objects. The core category has been basically introduced. Here is a brief introduction, without involving principles.
0.Introduce Fresco
compile ':fresco:0.14.0'
The introduction of Fresco is relatively simple. We only need to add it in it. The demo provided on Github is difficult to extract, and it does not have too many effects in actual operation. It only compares the performance of multiple image loading frameworks when loading images. If you want to see the official operation effect. The source code will be provided at the end of the article.
One thing to note is that we must first perform the initialization operation before using Fresco. It should be placed before the layout is loaded, otherwise an error will occur when the setContentView parses the XML.
@Override
protected void onCreate(Bundle savedInstanceState) {
(savedInstanceState);
(this);
setContentView(.activity_simple_drawee);
}
The placeholder map is relatively simple to understand, which is the default picture displayed when no pictures are loaded.
< android: android:layout_margin="5dp" android:layout_width="40dp" android:layout_height="40dp" fresco:placeholderImage="@drawable/placeholder_image" fresco:placeholderImageScaleType="fitCenter"/>
In Java code, we need to set up the relevant controller for this SimpleDraweeView. GenericDraweeHierarchy is initialized here to control the effect time of the picture fading, and at the same time set the controller to display the url of the picture to be loaded. During this loading process, we can see that the placeholder map will be replaced by the loaded picture.
GenericDraweeHierarchyBuilder builder = new GenericDraweeHierarchyBuilder(getResources());
/**
* Set the display time of fade effect
* */
GenericDraweeHierarchy hierarchy = (1000).build();
DraweeController placeHolderDraweeController = ()
.setUri("/4/E/8/1_y1scp.jpg") //Set url for the picture .setTapToRetryEnabled(true) //Can you try again after the load fails .setOldController(())
.build();
(placeHolderDraweeController);
(hierarchy);Image displayed when loading fails
When the image fails to load, we also need to have a default image to fill it. Then SimpleDraweeView can also implement this function, and the implementation method is also very simple.
< android: android:layout_width="40dp" android:layout_height="40dp" android:layout_margin="5dp" fresco:failureImage="@drawable/error" fresco:failureImageScaleType="centerInside"/>
Here we just need to set the failureImage property to complete it. Here we still set up a controller.
/**
* Load any url, and the url does not exist. Therefore, the image that failed to load is displayed.
* */
DraweeController failureImageDraweeController = ()
.setUri("ssss")
.setTapToRetryEnabled(false) //Set at the same time that cannot be retryed. .setOldController(())
.build();
(failureImageDraweeController);If you set an incorrect url here, it will definitely fail to load, and the picture that failed will be displayed.
Reloaded image
RetryImage means that after the image is loaded, an image can be displayed for retry operations. If the image cannot be loaded after multiple retry, the image that failed to load is displayed.
< android: android:layout_width="40dp" android:layout_height="40dp" android:layout_margin="5dp" fresco:retryImage="@drawable/retry" fresco:retryImageScaleType="centerCrop" fresco:failureImage="@drawable/error"/>
To reload the displayed image, you only need to change it to the above attribute. Here, the controller is basically the same as the controller of failureImage. We only need to set the retry attribute to ture. Here, if the image fails to load, Image Pipeline can retry four times. If it still fails to load successfully, then display the image that failed to load.
/**
* Load any URL to display the click of the image when reloading. When the load fails, the Image pipeline will try again four times.
* If the image still cannot be loaded, the image failed to load is displayed.
* */
DraweeController retryImageDraweeController = ()
.setUri("aaaa")
.setTapToRetryEnabled(true)
.setOldController(())
.build();
(retryImageDraweeController);
Progress display pictures. When the picture is loaded, it often needs to display the progress, or a picture showing the loading progress interacts with the user. Then Fresco's ProgressBarImage can help us complete this function. While displaying the picture, the picture is also displayed by rotation.
< android: android:layout_width="40dp" android:layout_height="40dp" android:layout_margin="5dp" fresco:progressBarImage="@drawable/progress_image" fresco:progressBarAutoRotateInterval="5000" fresco:progressBarImageScaleType="centerInside"/>
Here you only need to set the ProgressBarImage property. Here progressBarAutoRotateInterval represents the automatic rotation interval. The smaller the value set, the faster the rotation speed. There is no need to post the controller code, it is basically the same as the controller above. You only need to set a correct uri.
The background image is generally the background color, which feels similar to the placeHolderImage effect. Although there is still a difference, the background image will always be displayed during the loading process. Once the image is successfully loaded, the subsequent image will directly cover the background image and there will be no superimposed effect, which means that the image we load will not receive the background image influence. There is a difference between him and overlays.
< android: android:layout_width="40dp" android:layout_height="40dp" android:layout_margin="5dp" fresco:backgroundImage="@color/blue"/>
The code of the controller here is not pasted. If there are no special requirements, it is basically the same as the controller above.
There is a difference between an overlay image and a BackGroundImage. The overlay image will affect the loaded image. For example, if we set a loaded image for SimpleDraweeView and set an overlay image at the same time, the loaded image will be affected by the overlay image, and the two will produce an overlay effect.
< android: android:layout_width="40dp" android:layout_height="40dp" android:layout_margin="5dp" fresco:overlayImage="@color/overlay"/>
7. Loading pictures with multiple effects
< android: android:layout_width="40dp" android:layout_height="40dp" android:layout_margin="5dp" fresco:placeholderImage="@drawable/placeholder_image" fresco:placeholderImageScaleType="fitCenter" fresco:progressBarImage="@drawable/progress_image" fresco:progressBarImageScaleType="centerInside" fresco:progressBarAutoRotateInterval="5000" fresco:failureImage="@drawable/error" fresco:failureImageScaleType="centerInside" fresco:retryImage="@drawable/retry" fresco:retryImageScaleType="centerCrop" />
Here we use a combination of multiple effects to complete the display of the picture. First, there is a placeholder map, and then the picture displayed when the picture is loaded is set to complete the interactive function with the user. If it is successful, the loaded picture will be displayed. If it fails, the reloaded picture will be displayed. If it is repeated four times and still cannot complete the load, the picture that failed will be displayed. The related controllers are also relatively simple, almost the same as above. Just post it briefly.
/**
* Combination of multiple effects: successful and failed to load images
* */
DraweeController multiEffectSuccessController = ()
.setUri("/4/E/8/1_y1scp.jpg") //If you want to see the failed effect, just set an incorrect uri .setTapToRetryEnabled(true)
.setOldController(())
.build();
(multiEffectSuccessController);8. Implementation of circular avatar
When we write apps, we often use the function of circular avatars, so we generally have to customize the View or use other frameworks, etc. With Fresco, it will help you complete this function, and it is easy and simple. Just add a line of code to complete it.
< android: android:layout_width="40dp" android:layout_height="40dp" android:layout_margin="5dp" fresco:placeholderImage="@drawable/placeholder_image" fresco:placeholderImageScaleType="fitCenter" fresco:progressBarImage="@drawable/progress_image" fresco:progressBarImageScaleType="centerInside" fresco:progressBarAutoRotateInterval="5000" fresco:failureImage="@drawable/error" fresco:failureImageScaleType="centerInside" fresco:retryImage="@drawable/retry" fresco:retryImageScaleType="centerCrop" fresco:roundAsCircle="true" fresco:roundingBorderWidth="2dp" fresco:roundingBorderColor="@color/colorAccent"/>
Although it looks a lot, you only need to add roundAsCircle attribute to true to implement a circular avatar. I added roundingBorderWidth here to add borders and related border colors to this image. Here I will talk about the border line function directly.
9. Rounded corner pictures
Everyone must know the difference between rounded corner pictures and round pictures, and they are also commonly used. In Fresco, you only need to set specific attributes.
< android: android:layout_width="40dp" android:layout_height="40dp" android:layout_margin="5dp" fresco:roundedCornerRadius="10dp" fresco:roundTopLeft="true" fresco:roundTopRight="true" fresco:roundBottomLeft="true" fresco:roundBottomRight="true" fresco:roundWithOverlayColor="@color/overlay"/>
We only need to set the size of roundCornerRadius, which indicates the degree of rounding corners. The remaining four attributes indicate that all four corners need to be set as rounded corners. If we want that corner to be not rounded corners, then we can set it to false. roundWithOverlayColor represents the overlay color at the bottom of the rounded avatar.
Here we set all the basic effects through XML. Although there is no screenshot, we provide a source code here. Just run the specific effects and deepen your impression. They are all basic things. This blog is not difficult, and it is a basic introduction to learning Fresco. Just provide a reference for everyone.
source code:Demo
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.