Universal-Image-Loader加载网络图片

简介: 一个简单的Listview,然后里面item就是一张图片,希望很流畅的加载网络图片,然后滑动的时候不会出现卡顿,也不会出现OOM现象。在断开网络连接的时候,点击listview的item,进入到图片详情界面,依旧能够加载出完整的图片。

一个简单的Listview,然后里面item就是一张图片,希望很流畅的加载网络图片,然后滑动的时候不会出现卡顿,也不会出现OOM现象。在断开网络连接的时候,点击listview的item,进入到图片详情界面,依旧能够加载出完整的图片。这里看一下效果图:
这里写图片描述

这里写图片描述

截屏的时候有点卡顿,第一张是有网络连接的时候加载的网络图片,第二张是断开网络连接时点击item,进入图片详情时加载的缓存图片。

这里用到的是Universal-Image-Loader,一个强大的图片加载框架,具有以下的特性:
1.多线程下载图片,图片可以来源于网络,文件系统,项目文件夹assets中以及drawable中等
2.支持随意的配置ImageLoader,例如线程池,图片下载器,内存缓存策略,硬盘缓存策略,图片显示选项以及其他的一些配置
3.支持图片的内存缓存,文件系统缓存或者SD卡缓存
4.支持图片下载过程的监听
5.根据控件(ImageView)的大小对Bitmap进行裁剪,减少Bitmap占用过多的内存
6.较好的控制图片的加载过程,例如暂停图片加载,重新开始加载图片,一般使用在ListView,GridView中,滑动过程中暂停加载图片,停止滑动的时候去加载图片
7.提供在较慢的网络下对图片进行加载

界面布局很简单,就不贴代码了,具体看一下Universal-Image-Loader使用过程以及一些注意事项:

public class MyApplication extends Application {

    private MyApplication instance;

    @Override
    public void onCreate() {
        super.onCreate();
        instance = this;

        initImageloader();
    }

    public void initImageloader() {
        DisplayImageOptions options = new DisplayImageOptions.Builder()
                .showImageOnLoading(R.drawable.ic_download)
                .showImageOnFail(R.drawable.ic_download)
                .resetViewBeforeLoading(false) // default
                .delayBeforeLoading(0).cacheInMemory(true) // default
                .cacheOnDisk(true) // default
                .considerExifParams(true) // default
                .imageScaleType(ImageScaleType.IN_SAMPLE_POWER_OF_2) // default
                .bitmapConfig(Bitmap.Config.ARGB_8888) // default
                .displayer(new SimpleBitmapDisplayer()) // default
                .handler(new Handler()) // default
                .build();

        File picPath = new File(Environment.getExternalStorageDirectory()
                .getPath()+ File.separator+ "MyDemo"+ File.separator+ "files");
        ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(
                getApplicationContext())
                .memoryCacheExtraOptions(480, 800)
                // default = device screen dimensions
                .diskCacheExtraOptions(480, 800, null)
                .threadPoolSize(3)
                // default
                .threadPriority(Thread.NORM_PRIORITY - 1)
                // default
                .tasksProcessingOrder(QueueProcessingType.FIFO)
                // default
                .denyCacheImageMultipleSizesInMemory()
                .memoryCache(new LruMemoryCache(2 * 1024 * 1024))
                .memoryCacheSize(2 * 1024 * 1024)
                .memoryCacheSizePercentage(13)
                // default
                .diskCache(new UnlimitedDiskCache(picPath))
                // default
                .diskCacheSize(50 * 1024 * 1024)
                .diskCacheFileCount(1000)
                .diskCacheFileNameGenerator(new HashCodeFileNameGenerator())
                // default
                .imageDownloader(
                        new BaseImageDownloader(getApplicationContext())) // default
                .imageDecoder(new BaseImageDecoder(true)) // default
                .defaultDisplayImageOptions(options) // default
                .writeDebugLogs().build();
        ImageLoader.getInstance().init(config);
    }

}

新建一个MyApplication继承Application,Application是单例 (singleton)模式的一个类。且application对象的生命周期是整个程序中最长的,它的生命周期就等于这个程序的生命周期。因为它是全局的单例的,所以在不同的Activity,Service中获得的对象都是同一个对象。所以通过Application来进行一些数据传递,数据共享等数据缓存等操作。在这里我们来创建图片加载器ImageLoader的配置参数。

ImageLoaderConfiguration使用了建造者模式配置参数,设置了线程池中线程个数,内存存储大小,数量,硬盘存储大小,数量等参数。

最后调用ImageLoader.getInstance().init(config)将设置参数传递进去,这里用的是单例模式–懒汉式双重校验锁
参考资料:

http://blog.csdn.net/dmk877/article/details/50311791

DisplayImageOptions用来配置图片显示的选项,比如图片在加载中ImageView显示的图片,加载失败显示的图片,是否需要使用内存缓存,是否需要使用文件缓存等等。这里都设置true,就不用每次都从网络上加载图片。

看一下适配器代码:

public class ImgListAdapter extends BaseAdapter {

    class ViewHolder {
        @ViewInject(R.id.web_img)
        public ImageView webImg;

    }

    private Context context;
    private LayoutInflater layoutinflater;
    private String[] imageUrls;

    public ImgListAdapter(String[] urls, Context context) {
        this.context = context;
        this.imageUrls = urls;
        this.layoutinflater = LayoutInflater.from(context);

    }

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

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

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder;
        if (convertView == null) {
            convertView = layoutinflater.inflate(R.layout.img_item, null);
            viewHolder = new ViewHolder();
            ViewUtils.inject(viewHolder, convertView);
            convertView.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) convertView.getTag();
        }
        // 通过ImageLoader来获取网络图片
        ImageLoader.getInstance().displayImage(imageUrls[position],
                viewHolder.webImg);

        return convertView;

    }

}

通过ViewHolder来优化listview,通过ImageLoader的异步加载图片,只需要传进去两个参数,第一个是图片url,第二个是ImageView控件,ImageLoader会自动给我们缓存图片的,如果之前加载过了是不会再次下载图片,直接加载本地缓存好的图片。

接下来就是activity中的运用:

public class MainActivity extends Activity {
    ImgListAdapter adapter;
    ListView listview;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        listview = (ListView) findViewById(R.id.listview);
        adapter = new ImgListAdapter(Images.imageThumbUrls,
                getApplicationContext());
        listview.setAdapter(adapter);
        listview.setOnScrollListener(new PauseOnScrollListener(ImageLoader
                .getInstance(), false, true));
        listview.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                    int position, long id) {

                Intent intent = new Intent(getApplicationContext(),
                        ImagePagerActivity.class);
                intent.putExtra("url", Images.imageThumbUrls[position]);
                startActivity(intent);
            }
        });
    }
}

其中需要注意的是:

listview.setOnScrollListener(new PauseOnScrollListener(ImageLoader
                .getInstance(), true, false));

Universal-Image-Loader提供了PauseOnScrollListener这个类来控制ListView,GridView滑动过程中停止去加载图片。第一个参数就是我们的图片加载对象ImageLoader, 第二个是控制是否在滑动过程中暂停加载图片,如果需要暂停传true就行了,第三个参数控制猛的滑动界面的时候图片是否加载。

给每个item设置了点击事件,传递当前item的URL到图片详情界面,这里我故意断开了网络连接,最后依旧能够得到缓存。看一下代码:

public class ImagePagerActivity extends Activity {

    ImageView pagerImg;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_image_pager);
        pagerImg = (ImageView) findViewById(R.id.pager_img);
        Intent intent = getIntent();
        Bundle data = intent.getExtras();

        ImageLoader.getInstance().displayImage((String) data.get("url"),
                pagerImg);


    }
}

拿到上一个界面传递过来的URL,调用的还是displayImage((String) data.get(“url”)这个方法,只不过这次拿的是缓存,不再是从网络上下载的。
这里写图片描述

可以看到缓存都在自己定义的文件夹下面。

缓存策略的流程就是:
每次加载图片的时候都优先去内存缓存当中读取,当读取不到的时候则回去硬盘缓存中读取,而如果硬盘缓存仍然读取不到的话,就从网络上请求原始数据。

参考博客:

http://blog.csdn.net/xiaanming/article/details/26810303
http://blog.csdn.net/xiaanming/article/details/27525741
http://blog.csdn.net/xiaanming/article/details/39057201

目录
相关文章
|
27天前
|
机器学习/深度学习 PyTorch 算法框架/工具
目标检测实战(一):CIFAR10结合神经网络加载、训练、测试完整步骤
这篇文章介绍了如何使用PyTorch框架,结合CIFAR-10数据集,通过定义神经网络、损失函数和优化器,进行模型的训练和测试。
73 2
目标检测实战(一):CIFAR10结合神经网络加载、训练、测试完整步骤
|
3月前
|
移动开发 TensorFlow 算法框架/工具
只保存和加载网络权重
【8月更文挑战第21天】只保存和加载网络权重。
33 2
|
11天前
|
缓存 JavaScript
Vue加载网络组件(远程组件)
【10月更文挑战第23天】在 Vue 中实现加载网络组件(远程组件)可以通过多种方式来完成。
|
3月前
|
缓存
Flutter Image从网络加载图片刷新、强制重新渲染
Flutter Image从网络加载图片刷新、强制重新渲染
110 1
|
3月前
|
SQL 网络协议 安全
【Azure API 管理】APIM集成内网虚拟网络后,启用自定义路由管理外出流量经过防火墙(Firewall),遇见APIs加载不出来问题
【Azure API 管理】APIM集成内网虚拟网络后,启用自定义路由管理外出流量经过防火墙(Firewall),遇见APIs加载不出来问题
|
3月前
|
Java Android开发 Kotlin
Android项目架构设计问题之要在Glide库中加载网络图片到ImageView如何解决
Android项目架构设计问题之要在Glide库中加载网络图片到ImageView如何解决
35 0
|
6月前
|
XML JSON 前端开发
【Flutter前端技术开发专栏】Flutter中的图片、视频与网络资源加载
【4月更文挑战第30天】Flutter是谷歌的开源前端框架,因其高性能、流畅UI和多端运行能力受开发者喜爱。本文聚焦于Flutter中的资源加载:使用`Image`组件加载静态、网络和本地图片;通过`video_player`库加载和播放视频;利用`http`包进行网络资源请求。掌握这些技巧将有助于提升Flutter应用的开发效率和质量。
46 0
【Flutter前端技术开发专栏】Flutter中的图片、视频与网络资源加载
|
6月前
|
XML Java Android开发
Android App开发中使用Glide加载网络图片讲解及实战(附源码 简单易懂)
Android App开发中使用Glide加载网络图片讲解及实战(附源码 简单易懂)
318 0
|
编解码 前端开发 JavaScript
响应式图像优化:如何根据用户设备和网络条件优化网页中的图像,以提高用户体验和加载速度。
响应式图像优化:如何根据用户设备和网络条件优化网页中的图像,以提高用户体验和加载速度。
项目实战(三):banner加载网络图片,不变形,可缩放可完全显示
项目实战(三):banner加载网络图片,不变形,可缩放可完全显示