[UIL] Universal-Image-Loader (a complete analytical framework) the introduction and use of detailed

Label UILImageloaderPicture asynchronous loadingUniversal-Image-Load
2821 people read comment(4) Collection Report

Reproduced please indicate the source:


This article from:[clear] Jiangqing blog


           Has not been updated for half a month, on the one hand, the recent work is busy, on the other hand, I also choose the theme of the blog. This time I mainly explain the normal use of the image loading frame ImageLoader. Although the author has stopped updating the frame shortly before, I have been using this image for a long time. I know that the framework is simple and easy to use, but if we can not only use but also be aware of the principle of which is the most important. So I putImageLoaderProject all the code read it again and give each class and related methods to add a Chinese version of the notes.

         This case as wellUILAll Chinese versions of the framework have been updated toGitHub, you can go to the interestClone, start orFork.


[By the way,Can scan the left side of the two-dimensional code is concerned about the micro channel pay attention to subscribe number,Get the latest articleNext week

          The topic of this article will mainly involve the following partsImageLoaderIntroduction and use of,Part of the important module analysis and related source code. Today, we mainly carry out the first part of the explanation(ImageLoaderBased on the introduction and use of).

(Two).ImageLoaderBasic introduction:

           We are developingAPPWhen you meet the need to load the image, especially the list needs to load a large number of pictures, then we will need to download the image and display. But due to various aspects of memory problems will have some problems more or less;for example:List loading pictures, pictures of the distribution of confusion. Or the OOM problem.~ ~At this time we need to develop a picture of asynchronous loading and can be properly compressed frame. for example(: UILUniversal-Image-Loader, GitHubProject addressUILProject address)Other than that, there are a lot of other frameworksGlide,Fresco, PicassoSo many. Behind several now used more and still more. Behind the article I will also share this side of the image loading framework.

          UIL(Universal-Image-Loader)Designed to provide a powerful, flexible and highly customizable tool for image loading, caching, and display functions. And provides a number of configuration options and good control of the process of image loading and caching. So in a long period of time, the framework of the use of a very wide and very convenient oh.

           UILFrame features:

  • Support multi thread image loading(Synchronous or asynchronous)
  • Support custom configurationImageLoader, such as the thread pool, image download, memory cache, hard disk cache, picture display options, and other configurations
  • Support for custom configuration picture display, for example:Cache switch selection,Interface options,Image loading progress and display
  • Support image memory cache or file system,Device SD cache
  • Support image loading progress monitor(Including picture download progress monitor)
  • Support for the extension of the framework for more tools
  • It can also be supported for exampleListView, GridVIewTo slide the time to suspend or resume image loading display and other functions.
  • Of course, there are other very characteristic,Specific, we read the source will know it... .

(Three).ImageLoaderRapid installation:

          If we want to useImageLoaderYou can download a copy of the program code which will haveImageLoaderTheJarThe package is introduced into the project. The contents folder in the overall project is as follows:

3.1.We downloadImageloaderTheJarPackage to our projectLIBSFolder, and then related to(Universal-image-loader-1.9.5.jar):

3.2.Now we useAndroidStudioDevelopment projects, we only needBuild.gradleAdd the following dependency can be:


3.3.Project configuration files need to add relevant permissions(Mainly for access to network permissions, if the picture needs SDCardCache also need to add one more)

Following permission if <! -- Include you load images from Internet -- >
<uses-permission android:name= "android.permission.INTERNET" / >
Following permission if <! -- Include you want to cache images on SD card -- >
<uses-permission android:name= "android.permission.WRITE_EXTERNAL_STORAGE" / >

3.4.Finally we need to use the first timeImageLoaderbefore,Do itImageLoaderBasic configuration,The configuration can beApplicationperhapsActivityCan be done in,As follows:

Config ImageLoaderConfiguration = ImageLoaderConfiguration.Builder new (this)
.build ();
ImageLoader.getInstance ().Init (config);

3.5.We can use the followingImageLoaderTo load and display pictures.

(Four).ImageLoaderGlobal configuration item(Configuration)

         AboveThree point fourWe're talking about it.ImageLoaderYou need to configure the global configuration before you use it. OK,ImageLoaderGive us aImageLoaderConfigurationTo make global settingsImageLoader. But the setting is global, we only need to set up once.

          SeeImageLoaderDocuments andImageLoaderConfigurationSource discovery, which provides us with all the configuration items are optional. Unless you need to customize the settings, the template we can call the default construction method is as follows:

        Configuration=ImageLoaderConfiguration.createDefault ImageLoaderConfiguration (this);

ImageLoader.getInstance ().Init (configuration);

       AboveCreateDefaultMethod will give us the default initialization of a number of configuration items, the specific configuration can be all options as follows:

Above includes setting the cache size, task execution, and the number of thread pool threads,Thread weight,Task execution algorithm,Disk cache size, cache file number, cache file naming rules, image download, decoder, picture display configuration items, etc.. You can freely according to the actual situation of the project can be configured.

(Five).ImageLoaderpictureDisPlayConfiguration item(DisPlayOptions)

          We mentioned above.ImageLoaderThe global configuration, in the time of the picture display(ImageLoader.displayImage (... )At the time of)We can also set the parameters of the image display(Main useDisplayImageOptions). DisOptions play (Display options)For each picture display task(ImageLoader.displayImage ()The method is called).

         [note] if we do not set the image display configuration item, then I will display the picture when the default call picture default display mode. Specific optional configuration items are as follows:

 Above, including image loading process, pictures address is empty and failed to load the picture picture, delay load, open the cache memory and disk cache, picture zoom type, picture coding types and picture display parameters of the loader, and so on. Specific according to the actual project to choose the configuration can be.

(Six).ImageLoaderLoading pictures to explain

            Now we're starting to explain the use ofImageLoaderLoad pictures, before this we must be in accordance with the contents of the third points ImageLoader to install and do the basic permissions as well as global configuration oh~Below we first look at the ImageLoader to show the image of several methods:

  View aboveImageLoaderView of the method graph:Mainly divided into the following three ways to load the picture it~We generally use the first two in the project oh(displayImageandLoadImage),Because the two are asynchronous, and the otherLoadImageSyncIt is in sync.

6.1.dispalyImage ()Method use explanation:

6.1.1In this example IImageLoaderThe global default configuration is used as follows:

Class UILApplication extends Application public {
Void onCreate public () {
Super.onCreate ();
InitImageLoader ();
Void initImageLoader private () {
Configuration=ImageLoaderConfiguration.createDefault ImageLoaderConfiguration (this);
imageloader。getinstance() init(配置);


<?xml version=“1”encoding=“utf-8”?>
< LinearLayout xmlns:Android =“”
androidlayout_width =“match_parent”
安卓:layout_height =“match_parent”
安卓:ID =“”+身份证/ test_img_one”
安卓:layout_width =“wrap_content”
安卓:layout_height =“wrap_content”
安卓:src=“@冲/ ic_data_loading”/>
< /元素>


这个test_img_one =(ImageView)这findViewById(;
imageloader。getinstance()。DisplayImage(imagedatautils。imagesutils [ 0 ],test_img_one);


这个test_img_one =(ImageView)这findViewById(;
imageloader。getinstance()。DisplayImage(imagedatautils。imagesutils [ 1 ],test_img_one,选项);



imageloader。getinstance()。DisplayImage(imagedatautils。imagesutils [ 1 ],test_img_one,大小);







这个test_img_two =(ImageView)这findViewById(;
imageloader。getinstance()。LoadImage(imagedatautils。imagesutils [ 3 ],新imageloadinglistener() {
/ /图片开始加载的时候调用
/ /图片加载失败调用
/ /图片加载完成调用
test_img_two setimagebitmap(loadedimage);
/ /图片加载取消调用


我们看到使用imageloadinglistener接口必须要实现接口中四个方法,但是我们平时实际情况下可能不需要回调那么多方法,不错的是UIL给我们提供了一个类simpleimageloadinglistener类,该类实现了imageloadinglistenerInterface We introduced the class can be implemented, so we need to rewrite the actual method is much more convenient. Specific examples are as follows         

ImageLoader.getInstance ().LoadImage (ImageDataUtils.ImagesUtils[4], SimpleImageLoadingListener new () {
Void onLoadingComplete public (imageUri String, view View, loadedImage Bitmap) {
Super.onLoadingComplete (imageUri, view, loadedImage);
/ / image loading is complete when the call
Log.d ("zttjiangqq", "onLoadingComplete...");
Test_img_two.setImageBitmap (loadedImage);

Void onLoadingStarted public (imageUri String, view View) {
Super.onLoadingStarted (imageUri, view);
The picture began to call the load / /
Log.d ("zttjiangqq", "onLoadingStarted...");

I just have to rewrite this way.OnLoadingCompleteandOnLoadingStartedThe two method, the amount of code on the top is reduced by a lot of.

6.2.2.LoadImage (Stringuri, targetImageSize ImageSize, options DisplayImageOptions,ImageLoadingListenerlistener)

   The loading picture methodSix point oneIn about the same, we can also get into the picture display configuration items, the specific examples are as follows:

Options=new DisplayImageOptions.Builder DisplayImageOptions ()
.showImageOnLoading (R.drawable.ic_data_loading)
.showImageOnFail (R.drawable.ic_data_error)
.cacheInMemory (true)
.cacheOnDisk (true)
.build ();
ImageLoader.getInstance ().LoadImage (ImageDataUtils.ImagesUtils[5], options, SimpleImageLoadingListener new () {
Void onLoadingComplete public (imageUri String, view View, loadedImage Bitmap) {
Super.onLoadingComplete (imageUri, view, loadedImage);
/ / image loading is complete when the call
Log.d ("zttjiangqq", "onLoadingComplete...");
Test_img_two.setImageBitmap (loadedImage);

6.2.3.LoadImage (Stringuri, targetImageSize ImageSize, listener ImageLoadingListener)

 We can load the image into the image of the size of the image, with a direct construction of aImageSizeInto it. Specific methods are as follows:

Size=new ImageSize ImageSize (100,50);
ImageLoader.getInstance ().LoadImage (ImageDataUtils.ImagesUtils[6], size, SimpleImageLoadingListener new () {
Void onLoadingComplete public (imageUri String, view View, loadedImage Bitmap) {
Super.onLoadingComplete (imageUri, view, loadedImage);
/ / image loading is complete when the call
Log.d ("zttjiangqq", "onLoadingComplete...");
Test_img_two.setImageBitmap (loadedImage);

6.2.4.Mainly in several ways, other image loading method and the above almost, just need to pass the corresponding parameters on it.

(Seven).Last summary

          Today we areUIL(Universal-Image-Loader)Introduction and basic use of the open source framework to do the relevant explanation, including the introduction, installation, configuration and basic use. The next lecture will focus on the open source components of several core classes, as well as related to the use of attention.

         This case as wellUILAll Chinese versions of the framework have been updated toGitHub, you can go to the interestClone, start orFork.


Respect the original, reproduced please indicate: Sky From Dian Qing (Http:// reserved)!

Pay attention to my subscription number (codedev123), share the mobile development technology (Android/IOS), project management and blog post every day! (welcome attention, the first time push the wonderful article)

Focus on my micro blog, you can get more exciting content

step on
Guess you're looking for
View comments
* the above user comments only represent their personal views, does not represent the views or position of the CSDN website
    personal data
    • Visit446900 times
    • Integral:Seven thousand two hundred and eighteen
    • Grade
    • Rank:1601st name
    • Original192
    • Reproduced:5
    • Translation:0
    • Comments:395
    Contact information
    Individual micro channel subscription number (codedev123)

  • Mailbox:
  • I QQ:781931404
  • Android rookie news group: 99787482
  • Native React exchange group: 282693535
  • Android development group 3:109244103
    Blog column