Android中Universal Image Loader开源框架的简单使用

UIL (Universal Image Loader)aims to provide a powerful, flexible and highly customizable instrument for image loading, caching and displaying. It provides a lot of configuration options and good control over the image loading and caching process.(不知道怎么介绍,先上一段英文吧,嘿嘿)

其实之前看过郭神的文章里讲了谷歌的Volley的一些简单使用(http://blog.csdn.net/guolin_blog/article/details/17482095),但不知为什么感觉用Universal-Image-Loader的人似乎比Volley的更多,于是便决定来认识认识Universal-Image-Loader。

Android-Universal-Image-Loader是一个开源的UI组件程序,该项目的目的是提供一个可重复使用的仪器为异步图像加载,缓存和显示。所以,如果你的程序里需要这个功能的话,那么不妨试试它。因为已经封装好了一些类和方法。我们 可以直接拿来用了。而不用重复去写了。其实,写一个这方面的程序还是比较麻烦的,要考虑多线程,缓存,内存溢出等很多方面。

这个开源库的特点:

  1. 多线程的图像加载
  2.  ImageLoader对应的丰富的配置
  3. 图像可在内存或磁盘中缓存
  4. 为图片的个性化显示配置接口
  5. 监听加载过程

这个开源库还在不断的更新中,比如说UIL的新版(1.9.4)也快出来了。

 

简单描述一下这个项目的结构:每一个图片的加载和显示任务都运行在独立的线程中,除非这个图片缓存在内存中,这种情况下图片会立即显示。如果需要的图片缓存在本地,他们会开启一个独立的线程队列。如果在缓存中没有正确的图片,任务线程会从线程池中获取,因此,快速显示缓存图片时不会有明显的障碍。(别人那边借鉴的这段)

流程图:

 

使用方法:

 

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

怎么下载就不说了吧,前面几篇博文中都说了在github上怎么下载的。开源库下载下来后解压,打开文件夹。有一个名称为“library”的文件夹,它就是开发需要的开源库。把“library”导入eclipse中并更名为“ImageLoderLibrary”(当然也可以不换名称,个人习惯)。

 

来做一个照片墙吧。

新建一个Android工程,命名为“zhj_ImageLoder”。

在清单文件中添加权限:

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

Universal-Image-Loader要求在第一次使用ImageLoader之前要完成配置,因此决定在Application启动时就完成配置。

先新建一个类,名称为“MyApplication”,继承自Application。并在清单文件中替换掉默认的Application。

<application
        android:name="com.topcsa.zhj_imageloder.MyApplication"

其详细代码如下:

public class MyApplication extends Application {
    @Override
    public void onCreate() {
        // TODO Auto-generated method stub
        super.onCreate();
        ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(
                this)
                .memoryCacheExtraOptions(480, 800)
                // 缓存在内存的图片的宽和高度
                // default = device screen dimensions
                .diskCacheExtraOptions(480, 800, null)
                .threadPoolSize(3)
                // 线程池内加载的数量
                .threadPriority(Thread.NORM_PRIORITY - 2)
                .tasksProcessingOrder(QueueProcessingType.FIFO)
                .denyCacheImageMultipleSizesInMemory()
                .memoryCache(new LruMemoryCache(2 * 1024 * 1024))//你可以通过自己的内存缓存实现
                .memoryCacheSize(3 * 1024 * 1024)// 缓存到内存的最大数据
                .memoryCacheSizePercentage(13)
                .diskCacheSize(50 * 1024 * 1024)// //缓存到文件的最大数据
                .diskCacheFileCount(100)// 文件数量
                .diskCacheFileNameGenerator(new Md5FileNameGenerator())//将保存的时候的URI名称用MD5 加密
                .imageDownloader(new BaseImageDownloader(this)) // default
                .defaultDisplayImageOptions(DisplayImageOptions.createSimple()) // default
                .writeDebugLogs()// Remove for release app
                .build();
        // Initialize ImageLoader with configuration.
        ImageLoader.getInstance().init(config);// 初始化
    }

}

其实并不是需要对所有的属性都进行设置,不过我个人觉得多认识一些相关属性总不至于太陌生。
接下来是布局文件activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <GridView
        android:id="@+id/gridview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:horizontalSpacing="4dip"
        android:numColumns="3"
        android:padding="4dip"
        android:stretchMode="columnWidth"
        android:verticalSpacing="4dip" />

</LinearLayout>

其次是item_grid_image.xml:(一个ImageView和ProgressBar)

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="120dip">

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="120dip"
        android:adjustViewBounds="true"
        android:contentDescription="Image"
        android:scaleType="centerCrop" />

    <ProgressBar
        android:id="@+id/progress"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:indeterminate="false"
        android:max="100"
        android:layout_gravity="bottom"
        style="@style/ProgressBarStyle" />
</FrameLayout>

接着是图片连接的常量类:

public final class Constants {

    public static final String[] url = new String[] {

            "http://10.10.9.100:2014/Back/PhotoManage/Images/photo140928111042693571/Thumbnail/image2014101415141193718588.jpg",
            "http://10.10.9.100:2014/Back/PhotoManage/Images/photo140928111042693571/Thumbnail/image2014101415141209338554.jpg",
            "http://10.10.9.100:2014/Back/PhotoManage/Images/photo140928111042693571/Thumbnail/image2014101415141221831290.jpg",
            "http://10.10.9.100:2014/Back/PhotoManage/Images/photo140928111042693571/Thumbnail/image2014101415141234334937.jpg",
            "http://10.10.9.100:2014/Back/PhotoManage/Images/photo140928111042693571/Thumbnail/image2014101415141246838674.jpg",
            "http://10.10.9.100:2014/Back/PhotoManage/Images/photo140928111042693571/Thumbnail/image2014101415141257777597.jpg",
            "http://10.10.9.100:2014/Back/PhotoManage/Images/photo140928111042693571/Thumbnail/image2014101415141271844948.jpg",
            "http://10.10.9.100:2014/Back/PhotoManage/Images/photo140928111042693571/Thumbnail/image2014101415141284347684.jpg",
            "http://10.10.9.100:2014/Back/PhotoManage/Images/photo140928111042693571/Thumbnail/image2014101415141298408763.jpg",
            "http://10.10.9.100:2014/Back/PhotoManage/Images/photo140928111042693571/Thumbnail/image2014101415141323404047.jpg",
            "http://10.10.9.100:2014/Back/PhotoManage/Images/photo140928111042693571/Thumbnail/image2014101415141335907784.jpg",
            "http://10.10.9.100:2014/Back/PhotoManage/Images/photo140928111042693571/Thumbnail/image2014101415141357781081.jpg",
            "http://10.10.9.100:2014/Back/PhotoManage/Images/photo140928111042693571/Thumbnail/image2014101415141370284628.jpg",
            "http://10.10.9.100:2014/Back/PhotoManage/Images/photo140928111042693571/Thumbnail/image2014101415141381224641.jpg",
            "http://10.10.9.100:2014/Back/PhotoManage/Images/photo140928111042693571/Thumbnail/image2014101415141395280001.jpg",
            "http://10.10.9.100:2014/Back/PhotoManage/Images/photo140928111042693571/Thumbnail/image2014101415141407783738.jpg",
            "http://10.10.9.100:2014/Back/PhotoManage/Images/photo140928111042693571/Thumbnail/image2014101415141428094222.jpg",
            "http://10.10.9.100:2014/Back/PhotoManage/Images/photo140928111042693571/Thumbnail/image2014101415141443729035.jpg",
            "http://10.10.9.100:2014/Back/PhotoManage/Images/photo140928111042693571/Thumbnail/image2014101415141476532255.jpg",
            "http://10.10.9.100:2014/Back/PhotoManage/Images/photo140928111042693571/Thumbnail/image2014101415141490609616.jpg"

    };

    public final static String[] imageThumbUrls = new String[] {
            "http://img4.duitang.com/uploads/item/201302/08/20130208100902_ZGsLH.thumb.600_0.jpeg",
            "http://cdn.duitang.com/uploads/item/201209/09/20120909183611_8zWYK.thumb.600_0.jpeg",
            "http://img2.duitang.com/uploads/item/201207/10/20120710192155_XkiGA.thumb.600_0.jpeg",
            "http://pic11.nipic.com/20101205/4948186_160603018432_2.jpg",
            "http://img4.duitang.com/uploads/item/201302/08/20130208100856_52frh.thumb.600_0.jpeg",
            "http://cdn.duitang.com/uploads/item/201302/08/20130208100951_szccZ.thumb.600_0.jpeg",
            "http://pic.yesky.com/imagelist/08/51/10626239_2621.jpg",
            "http://cdn.duitang.com/uploads/item/201307/02/20130702114230_HAEzN.jpeg",
            "http://img4.duitang.com/uploads/item/201207/20/20120720121315_AMGBs.thumb.600_0.jpeg",
            "http://img4.duitang.com/uploads/item/201208/18/20120818131445_iZyZr.jpeg",
            "http://img4.duitang.com/uploads/item/201208/18/20120818131427_hmiH8.thumb.600_0.jpeg",
            "http://img4.duitang.com/uploads/item/201208/18/20120818125423_sLXP3.thumb.600_0.jpeg",
            "http://wenwen.sogou.com/p/20100623/20100623101110-601052657.jpg",
            "http://img4.duitang.com/uploads/item/201303/07/20130307155548_YQ4XF.jpeg",
            "http://img4.duitang.com/uploads/item/201207/10/20120710192328_SNKnn.thumb.600_0.jpeg",
            "http://img5.duitang.com/uploads/item/201208/18/20120818125605_E4vKP.thumb.600_0.jpeg",
            "http://cdn.duitang.com/uploads/item/201302/08/20130208100806_5QWNi.thumb.600_0.jpeg",
            "http://img4.duitang.com/uploads/item/201208/18/20120818131205_QYTww.jpeg",
            "http://img5.duitang.com/uploads/item/201208/09/20120809181114_GWCsa.thumb.600_0.jpeg",
            "http://u2.tdimg.com/9/93/99/3142256775268338535609632489410975049.jpg",
            "http://img4.duitang.com/uploads/item/201302/08/20130208100801_yFWWU.thumb.600_0.jpeg",
            "http://img2.duitang.com/uploads/item/201302/08/20130208100848_AuXKR.thumb.600_0.jpeg",
            "http://img4.duitang.com/uploads/blog/201403/19/20140319115139_vkLtG.thumb.600_0.jpeg",
            "http://img5.duitang.com/uploads/item/201310/25/20131025225609_raPHx.thumb.700_0.jpeg",
            "http://img4.duitang.com/uploads/item/201302/08/20130208100839_nrKnt.thumb.600_0.jpeg",
            "http://c.hiphotos.baidu.com/zhidao/pic/item/f636afc379310a5509e3d5a1b54543a98326109b.jpg",
            "http://img4.duitang.com/uploads/item/201305/04/20130504214309_yafH3.jpeg",
            "http://picm.bbzhi.com/dongmanbizhi/saber/game_manwall_189706_m.jpg",
            "http://img4.duitang.com/uploads/blog/201401/19/20140119201601_H52YL.thumb.600_0.jpeg",
            "http://www.wszw.com/files_upload/forum/106/PF8.jpg",
            "http://f.hiphotos.baidu.com/zhidao/pic/item/cb8065380cd79123e26154f9ad345982b3b780be.jpg",
            "http://cdn.duitang.com/uploads/item/201207/16/20120716113231_TfxMs.jpeg",
            "http://wenwen.sogou.com/p/20100227/20100227235017-1317494694.jpg",
            "http://f.hiphotos.baidu.com/zhidao/pic/item/f9198618367adab4bfb537028bd4b31c8701e40e.jpg",
            "http://x1.zhuti.com/down/2012/12/20-xp/jzqs-1.jpg",
            "http://cdn.duitang.com/uploads/item/201208/30/20120830083246_URRF5.thumb.600_0.jpeg",
            "http://imgstore.cdn.sogou.com/app/a/100540002/418617.jpg?f=download",
            "http://img4.duitang.com/uploads/blog/201403/17/20140317100704_ixJ2B.jpeg",
            "http://img5.duitang.com/uploads/item/201207/24/20120724192503_hACcr.jpeg",
            "http://wenwen.sogou.com/p/20090613/20090613201954-1124405935.jpg" };

}
View Code

OK!
最后的最后,也是最重要的地方来了,在Activity中的具体实现。

首先我们还应该实现对图像的操作设置。

(其实这块应该可以也在Application中启动,不过没这么试过)

DisplayImageOptions options;
options = new DisplayImageOptions.Builder()
                .showImageOnLoading(R.drawable.ic_stub)// //默认图片
                .showImageForEmptyUri(R.drawable.ic_empty)// url为空时展示的图片
                .showImageOnFail(R.drawable.ic_error)// 图片加载失败时的图片
                .cacheInMemory(true)// 缓存到内存
                .cacheOnDisk(true)// 缓存到磁盘
                .considerExifParams(true)// Sets whether ImageLoader will
                                            // consider EXIF parameters of JPEG
                                            // image (rotate, flip)
                .displayer(new RoundedBitmapDisplayer(5))// 图片圆角显示
                .bitmapConfig(Bitmap.Config.RGB_565).build();

 

 

 

好的,已经对ImageLoder和图片都进行了设置,最后也就是获取图片的方法了。

获取图像的方法一共有六个,三个比较简单,三个比较完整。如下:

Simple

// Load image, decode it to Bitmap and display Bitmap in ImageView (or any other view 
//  which implements ImageAware interface)
imageLoader.displayImage(imageUri, imageView);
// Load image, decode it to Bitmap and return Bitmap to callback
imageLoader.loadImage(imageUri, new SimpleImageLoadingListener() {
    @Override
    public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
        // Do whatever you want with Bitmap
    }
});
// Load image, decode it to Bitmap and return Bitmap synchronously
Bitmap bmp = imageLoader.loadImageSync(imageUri);

Complete

// Load image, decode it to Bitmap and display Bitmap in ImageView (or any other view 
//  which implements ImageAware interface)
imageLoader.displayImage(imageUri, imageView, options, new ImageLoadingListener() {
    @Override
    public void onLoadingStarted(String imageUri, View view) {
        ...
    }
    @Override
    public void onLoadingFailed(String imageUri, View view, FailReason failReason) {
        ...
    }
    @Override
    public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
        ...
    }
    @Override
    public void onLoadingCancelled(String imageUri, View view) {
        ...
    }
}, new ImageLoadingProgressListener() {
    @Override
    public void onProgressUpdate(String imageUri, View view, int current, int total) {
        ...
    }
});
// Load image, decode it to Bitmap and return Bitmap to callback
ImageSize targetSize = new ImageSize(80, 50); // result Bitmap will be fit to this size
imageLoader.loadImage(imageUri, targetSize, options, new SimpleImageLoadingListener() {
    @Override
    public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
        // Do whatever you want with Bitmap
    }
});
// Load image, decode it to Bitmap and return Bitmap synchronously
ImageSize targetSize = new ImageSize(80, 50); // result Bitmap will be fit to this size
Bitmap bmp = imageLoader.loadImageSync(imageUri, targetSize, options);

 

 

 

Activity中完整的代码实现如下:(呃,写的有点乱哈,君莫笑……)

public class MainActivity extends Activity {

    DisplayImageOptions options;
    String[] imageUrls = Constants.imageThumbUrls;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        options = new DisplayImageOptions.Builder()
                .showImageOnLoading(R.drawable.ic_stub)// //默认图片
                .showImageForEmptyUri(R.drawable.ic_empty)// url为空时展示的图片
                .showImageOnFail(R.drawable.ic_error)// 图片加载失败时的图片
                .cacheInMemory(true)// 缓存到内存
                .cacheOnDisk(true)// 缓存到磁盘
                .considerExifParams(true)// Sets whether ImageLoader will
                                            // consider EXIF parameters of JPEG
                                            // image (rotate, flip)
                .displayer(new RoundedBitmapDisplayer(5))// 图片圆角显示
                .bitmapConfig(Bitmap.Config.RGB_565).build();

        GridView gv = (GridView) findViewById(R.id.gridview);
        gv.setAdapter(new myAdapter());

    }

    class myAdapter extends BaseAdapter {
        private LayoutInflater inflater;

        myAdapter() {
            inflater = LayoutInflater.from(MainActivity.this);
        }

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return imageUrls.length;
        }

        @Override
        public Object getItem(int position) {
            // TODO Auto-generated method stub
            return imageUrls[position];
        }

        @Override
        public long getItemId(int position) {
            // TODO Auto-generated method stub
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            final ViewHolder holder;
            if (convertView == null) {
                convertView = inflater.inflate(R.layout.item_grid_image,
                        parent, false);
                holder = new ViewHolder();
                holder.imageView = (ImageView) convertView
                        .findViewById(R.id.image);
                holder.progressBar = (ProgressBar) convertView
                        .findViewById(R.id.progress);
                convertView.setTag(holder);
            } else {
                holder = (ViewHolder) convertView.getTag();
            }
            // Complete(完整的使用方法)
            // 有简单的使用方法,这里未展示
            ImageLoader.getInstance().displayImage(imageUrls[position],
                    holder.imageView, options,
                    new SimpleImageLoadingListener() {
                        @Override
                        public void onLoadingStarted(String imageUri, View view) {
                            holder.progressBar.setProgress(0);
                            holder.progressBar.setVisibility(View.VISIBLE);
                        }

                        @Override
                        public void onLoadingFailed(String imageUri, View view,
                                FailReason failReason) {
                            holder.progressBar.setVisibility(View.GONE);
                        }

                        @Override
                        public void onLoadingComplete(String imageUri,
                                View view, Bitmap loadedImage) {
                            holder.progressBar.setVisibility(View.GONE);
                        }
                    }, new ImageLoadingProgressListener() {
                        @Override
                        public void onProgressUpdate(String imageUri,
                                View view, int current, int total) {
                            holder.progressBar.setProgress(Math.round(100.0f
                                    * current / total));
                        }
                    });
            return convertView;
        }

    }

    static class ViewHolder {
        ImageView imageView;
        ProgressBar progressBar;
    }

}

在此,照片墙的实现就做好了,赶快运行一下吧。如图:

(全是Saber,我女王啊~嘿嘿)

 

 

 

PS:

Acceptable URIs examples:

String imageUri = "http://site.com/image.png"; // from Web
String imageUri = "file:///mnt/sdcard/image.png"; // from SD card
String imageUri = "content://media/external/audio/albumart/1"; // from content provider
String imageUri = "assets://image.png"; // from assets
String imageUri = "drawable://" + R.drawable.img; // from drawables (non-9patch images)

NOTE: Use drawable:// only if you really need it! Always consider the native way to load drawables -ImageView.setImageResource(...) instead of using of ImageLoader

 

DEMO下载:http://download.csdn.net/detail/af74776/8084109

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。