Android UI-开源框架ImageLoader的完美例子

Posted 2020-07-17 专注it

Android开源框架ImageLoader的完美例子

 

2013年8月19日开源框架之Universal_Image_Loader学习

 

很多人都在讨论如何让图片能在异步加载更加流畅，可以显示大量图片，在拖动ListView的时候不会出现卡的现象。关于ImageLoader这个开源框架的使用有很多网友都介绍过，不过还不够清楚，这里有一个关于这个开源项目的完美例子，ListView的图片加载、GridView的图片加载、ViewPager的图片加载、Gallery画廊的图片加载、Widget的使用。很完善的一个例子，在这里我把所有界面效果做出博客分享出来，需要源码的朋友到我的资源页下载

下载地址：http://download.csdn.net/detail/wwj_748/5975847

 

 

要使用ImageLoader就要到这里下载jar包：

https://github.com/nostra13/Android-Universal-Image-Loader

然后导入项目中去就行了

项目文档结构图：

 

从界面说起，界面本身是没什么好说的，就是如何在xml当中进行定义罢了

有以下这么多个布局文件

 

一个一个来看呗

首先是这样的效果

这个在android4.2.2比较好看，在Android2.3.3就显得比较挫。

 

/2013.8.19_Universal_Image_Loader_Demo/res/layout/ac_home.xml

 

[html] view plain copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent" >  
5.   
6.     <LinearLayout  
7.         android:layout_width="fill_parent"  
8.         android:layout_height="fill_parent"  
9.         android:orientation="vertical" >  
10.   
11.         <TextView  
12.             android:layout_width="fill_parent"  
13.             android:layout_height="wrap_content"  
14.             android:gravity="center"  
15.             android:paddingBottom="10dip"  
16.             android:paddingTop="20dip"  
17.             android:text="@string/label_activity_examples"  
18.             android:textSize="24sp" />  
19.   
20.         <Button  
21.             android:layout_width="fill_parent"  
22.             android:layout_height="wrap_content"  
23.             android:layout_margin="10dip"  
24.             android:onClick="onImageListClick"  
25.             android:text="@string/button_image_list" />  
26.   
27.         <Button  
28.             android:layout_width="fill_parent"  
29.             android:layout_height="wrap_content"  
30.             android:layout_margin="10dip"  
31.             android:onClick="onImageGridClick"  
32.             android:text="@string/button_image_grid" />  
33.   
34.         <Button  
35.             android:layout_width="fill_parent"  
36.             android:layout_height="wrap_content"  
37.             android:layout_margin="10dip"  
38.             android:onClick="onImagePagerClick"  
39.             android:text="@string/button_image_pager" />  
40.   
41.         <Button  
42.             android:layout_width="fill_parent"  
43.             android:layout_height="wrap_content"  
44.             android:layout_margin="10dip"  
45.             android:onClick="onImageGalleryClick"  
46.             android:text="@string/button_image_gallery" />  
47.     </LinearLayout>  
48.   
49. </ScrollView>  

列表异步加载图片效果

 

/2013.8.19_Universal_Image_Loader_Demo/res/layout/ac_image_list.xml

 

[html] view plain copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <ListView xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@android:id/list"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="fill_parent" />  

/2013.8.19_Universal_Image_Loader_Demo/res/layout/item_list_image.xml

 

 

[html] view plain copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="wrap_content" >  
5.   
6.     <ImageView  
7.         android:id="@+id/image"  
8.         android:layout_width="72dip"  
9.         android:layout_height="72dip"  
10.         android:layout_margin="3dip"  
11.         android:adjustViewBounds="true"  
12.         android:contentDescription="@string/descr_image"  
13.         android:scaleType="centerCrop" />  
14.   
15.     <TextView  
16.         android:id="@+id/text"  
17.         android:layout_width="fill_parent"  
18.         android:layout_height="wrap_content"  
19.         android:layout_gravity="left|center_vertical"  
20.         android:layout_marginLeft="20dip"  
21.         android:textSize="22sp" />  
22.   
23. </LinearLayout>  

GridView异步加载图片显示

 

 

/2013.8.19_Universal_Image_Loader_Demo/res/layout/ac_image_grid.xml

 

[html] view plain copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <GridView xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@+id/gridview"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="fill_parent"  
6.     android:gravity="center"  
7.     android:horizontalSpacing="4dip"  
8.     android:numColumns="3"  
9.     android:stretchMode="columnWidth"  
10.     android:verticalSpacing="4dip"  
11.     android:padding="4dip" />  

 

/2013.8.19_Universal_Image_Loader_Demo/res/layout/item_grid_image.xml

 

[html] view plain copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <ImageView xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@+id/image"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="120dip"  
6.     android:adjustViewBounds="true"  
7.     android:contentDescription="@string/descr_image"  
8.     android:scaleType="centerCrop" />  

 

ViewPager异步加载图片显示

/2013.8.19_Universal_Image_Loader_Demo/res/layout/ac_image_pager.xml

 

[html] view plain copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@+id/pager"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="fill_parent" />  

/2013.8.19_Universal_Image_Loader_Demo/res/layout/item_pager_image.xml

 

 

[html] view plain copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:padding="1dip" >  
6.   
7.     <ImageView  
8.         android:id="@+id/image"  
9.         android:layout_width="wrap_content"  
10.         android:layout_height="wrap_content"  
11.         android:layout_gravity="center"  
12.         android:adjustViewBounds="true"  
13.         android:contentDescription="@string/descr_image" />  
14.   
15.     <ProgressBar  
16.         android:id="@+id/loading"  
17.         android:layout_width="wrap_content"  
18.         android:layout_height="wrap_content"  
19.         android:layout_gravity="center"  
20.         android:visibility="gone" />  
21.   
22. </FrameLayout>  

 

Gallery画廊异步加载图片显示

/2013.8.19_Universal_Image_Loader_Demo/res/layout/ac_image_gallery.xml

 

[html] view plain copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <Gallery xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@+id/gallery"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="wrap_content"  
6.     android:layout_gravity="center_vertical"  
7.     android:spacing="1dip" />  

 

/2013.8.19_Universal_Image_Loader_Demo/res/layout/item_gallery_image.xml

 

[html] view plain copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <ImageView xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@+id/image"  
4.     android:layout_width="120dip"  
5.     android:layout_height="120dip"  
6.     android:layout_gravity="center"  
7.     android:adjustViewBounds="true"  
8.     android:contentDescription="@string/descr_image"  
9.     android:scaleType="centerCrop" />  

 

还有一个就是桌面小部件

 

以上只是布局文件，没有什么可以说，具体Activity代码实现如下：

 

先是这个：

/2013.8.19_Universal_Image_Loader_Demo/src/com/nostra13/example/universalimageloader/HomeActivity.java

主界面Activity代码

 

[java] view plain copy

 

1. /******************************************************************************* 
2.  * Copyright 2011-2013 Sergey Tarasevich 
3.  * 
4.  * Licensed under the Apache License, Version 2.0 (the "License"); 
5.  * you may not use this file except in compliance with the License. 
6.  * You may obtain a copy of the License at 
7.  * 
8.  * http://www.apache.org/licenses/LICENSE-2.0 
9.  * 
10.  * Unless required by applicable law or agreed to in writing, software 
11.  * distributed under the License is distributed on an "AS IS" BASIS, 
12.  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
13.  * See the License for the specific language governing permissions and 
14.  * limitations under the License. 
15.  *******************************************************************************/  
16. package com.nostra13.example.universalimageloader;  
17.   
18. import static com.nostra13.example.universalimageloader.Constants.IMAGES;  
19.   
20. import java.io.File;  
21. import java.io.FileOutputStream;  
22. import java.io.IOException;  
23. import java.io.InputStream;  
24.   
25. import android.content.Intent;  
26. import android.os.Bundle;  
27. import android.view.View;  
28.   
29. import com.nostra13.example.universalimageloader.Constants.Extra;  
30. import com.nostra13.universalimageloader.utils.L;  
31.   
32. /** 
33.  * @author Sergey Tarasevich (nostra13[at]gmail[dot]com) 
34.  */  
35. public class HomeActivity extends BaseActivity {  
36.   
37.     private static final String TEST_FILE_NAME = "Universal Image Loader @#&=+-_.,!()~‘%20.png";  
38.   
39.     @Override  
40.     public void onCreate(Bundle savedInstanceState) {  
41.         super.onCreate(savedInstanceState);  
42.         setContentView(R.layout.ac_home);  
43.   
44.         // 定义文件对象，目录：/mnt/sdcard, 文件名:TEST_FILE_NAME  
45.         File testImageOnSdCard = new File("/mnt/sdcard", TEST_FILE_NAME);  
46.         if (!testImageOnSdCard.exists()) {  // 如果文件不存在  
47.             // 把文件复制到SD卡  
48.             copyTestImageToSdCard(testImageOnSdCard);  
49.         }  
50.     }  
51.   
52.     // 点击进入ListView展示界面  
53.     public void onImageListClick(View view) {  
54.         Intent intent = new Intent(this, ImageListActivity.class);  
55.         intent.putExtra(Extra.IMAGES, IMAGES);  
56.         startActivity(intent);  
57.     }  
58.   
59.     // 点击进入GridView展示界面  
60.     public void onImageGridClick(View view) {  
61.         Intent intent = new Intent(this, ImageGridActivity.class);  
62.         intent.putExtra(Extra.IMAGES, IMAGES);  
63.         startActivity(intent);  
64.     }  
65.   
66.     // 点击进入ViewPager展示界面  
67.     public void onImagePagerClick(View view) {  
68.         Intent intent = new Intent(this, ImagePagerActivity.class);  
69.         intent.putExtra(Extra.IMAGES, IMAGES);  
70.         startActivity(intent);  
71.     }  
72.   
73.     // 点击进入画廊展示界面  
74.     public void onImageGalleryClick(View view) {  
75.         Intent intent = new Intent(this, ImageGalleryActivity.class);  
76.         intent.putExtra(Extra.IMAGES, IMAGES);  
77.         startActivity(intent);  
78.     }  
79.   
80.     @Override  
81.     public void onBackPressed() {  
82.         imageLoader.stop();     // 停止加载图片  
83.         super.onBackPressed();  
84.     }  
85.   
86.     /** 
87.      * 开一个线程把assert目录下的图片复制到SD卡目录下 
88.      * @param testImageOnSdCard 
89.      */  
90.     private void copyTestImageToSdCard(final File testImageOnSdCard) {  
91.         new Thread(new Runnable() {  
92.             @Override  
93.             public void run() {  
94.                 try {  
95.                     InputStream is = getAssets().open(TEST_FILE_NAME);  
96.                     FileOutputStream fos = new FileOutputStream(testImageOnSdCard);  
97.                     byte[] buffer = new byte[8192];  
98.                     int read;  
99.                     try {  
100.                         while ((read = is.read(buffer)) != -1) {  
101.                             fos.write(buffer, 0, read); // 写入输出流  
102.                         }  
103.                     } finally {  
104.                         fos.flush();        // 写入SD卡  
105.                         fos.close();        // 关闭输出流  
106.                         is.close();         // 关闭输入流  
107.                     }  
108.                 } catch (IOException e) {  
109.                     L.w("Can‘t copy test image onto SD card");  
110.                 }  
111.             }  
112.         }).start();     // 启动线程  
113.     }  
114. }  

/2013.8.19_Universal_Image_Loader_Demo/src/com/nostra13/example/universalimageloader/BaseActivity.java

 

 

[java] view plain copy

 

1. /******************************************************************************* 
2.  * Copyright 2011-2013 Sergey Tarasevich 
3.  * 
4.  * Licensed under the Apache License, Version 2.0 (the "License"); 
5.  * you may not use this file except in compliance with the License. 
6.  * You may obtain a copy of the License at 
7.  * 
8.  * http://www.apache.org/licenses/LICENSE-2.0 
9.  * 
10.  * Unless required by applicable law or agreed to in writing, software 
11.  * distributed under the License is distributed on an "AS IS" BASIS, 
12.  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
13.  * See the License for the specific language governing permissions and 
14.  * limitations under the License. 
15.  *******************************************************************************/  
16. package com.nostra13.example.universalimageloader;