问题描述

在优化加载网络图片之前，我们先看一下之前加载图片会出现的一个问题（简易新闻加载新闻图片的第三方框架是：Universal Image Loader），这个是一个比较老的框架了，但是用处依然很大，那我要说的是什么问题呢，就是在加载完图片后，如果你上下滑动再回来看的时候，发现还是要重新加载图片（当然网速好的情况下是没什么毛病的），让我们看一下问题的gif来有一个更深刻的印象：

我们发现，刚开始加载的最前面的图片资源（如50000只小蜜蜂明明图片已经加载完了，但是当我们滑动到底部的时候，再回过头来发现要重新加载，这是一个很不友好的问题，所以我们就要优化了。前几周学习了Glide加载图片正好拿来优化加载网络图片的问题。）

我们再来看一下使用Glide加载图片后的明显区别

优化的地方：
1：是加载过的图片不会二次加载了，上下滑动再回来不会在重新加载
2：加载图片的速度变快了，（而且点击其他分类的新闻，有的已经加载出来了（预加载））

优化过程

第一步，添加Glide的引用

修改build.gradle
添加引用（关于Glide的基础用法请看，Android使用Glide框架加载图片）

implementation 'com.github.bumptech.glide:glide:4.2.0'

第二步，修改TabAdapter.java

package com.example.frametest.TabAdapter;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import com.bumptech.glide.Glide;
import com.bumptech.glide.load.engine.DiskCacheStrategy;
import com.bumptech.glide.request.RequestOptions;
import com.example.frametest.R;
import com.example.frametest.json.NewsBean;
import com.example.frametest.tools.GlideUtil;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;
import java.util.List;

public class MyTabAdapter extends BaseAdapter {
    private List<NewsBean.ResultBean.DataBean> list;
    private Context context;
    private int IMAGE_01 =0;
    private int IMAGE_02 = 1;
    private int IMAGE_03 = 2;
    public MyTabAdapter(Context context, List<NewsBean.ResultBean.DataBean> list){
        this.context = context;
        this.list = list;
    }

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public Object getItem(int position) {
        return list.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public int getViewTypeCount() {
        return 3;
    }

    @Override
    public int getItemViewType(int position) {
        if (list.get(position).getThumbnail_pic_s() != null &&
                list.get(position).getThumbnail_pic_s02() !=null &&
                list.get(position).getThumbnail_pic_s03() !=null){
            return IMAGE_03;
        }else if (list.get(position).getThumbnail_pic_s() !=null &&
                list.get(position).getThumbnail_pic_s02() !=null){
            return IMAGE_02;
        }
        return IMAGE_01;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (getItemViewType(position) == IMAGE_01){
            Image01_ViewHolder holder;
            if (convertView == null){
                convertView =View.inflate(context, R.layout.item_layout01,null);
                holder =new Image01_ViewHolder();

                //查找控件
                holder.author_name = (TextView) convertView.findViewById(R.id.author_name);
                holder.title = (TextView) convertView.findViewById(R.id.title);
                holder.image = (ImageView) convertView.findViewById(R.id.image);
                convertView.setTag(holder);
            }else {
                holder = (Image01_ViewHolder) convertView.getTag();
            }

            //获取数据重新赋值
            holder.title.setText(list.get(position).getTitle());
            holder.author_name.setText(list.get(position).getAuthor_name());
            //此处使用Glide加载图片，因为Glide加载图片的三步走即Glide.with().load().into(),因为                我使用的Glide的版本为4.X以上所有，加载方式稍稍不同，但原理一致
            RequestOptions options = new RequestOptions()
                    .placeholder(R.mipmap.ic_launcher)
                    //这里我通过添加参数DiskCaheStrategy.RESPURCE来使其缓存我们定好的图片大小样式，而不是缓存原图片大小
                    .diskCacheStrategy(DiskCacheStrategy.RESOURCE)
                    .error(R.mipmap.ic_launcher);
                    Glide.with(context).load(list.get(position).getThumbnail_pic_s())
                    .apply(options).into(holder.image);
        }else if (getItemViewType(position) == IMAGE_02){
            Image02_ViewHolder holder;
            if (convertView == null){
                convertView =View.inflate(context, R.layout.item_layout02,null);
                holder =new Image02_ViewHolder();

                //查找控件
                holder.image002 = (ImageView) convertView.findViewById(R.id.image002);
                holder.image001 = (ImageView) convertView.findViewById(R.id.image001);
                holder.title = (TextView) convertView.findViewById(R.id.title);
                convertView.setTag(holder);
            }else {
                holder = (Image02_ViewHolder) convertView.getTag();
            }
            //获取数据重新赋值
            holder.title.setText(list.get(position).getTitle());
            RequestOptions options = new RequestOptions()
                    .placeholder(R.mipmap.ic_launcher)
                    .diskCacheStrategy(DiskCacheStrategy.RESOURCE)
                    .error(R.mipmap.ic_launcher);
            Glide.with(context).load(list.get(position).getThumbnail_pic_s())
            .apply(options).into(holder.image001);      Glide.with(context).load(list.get(position).getThumbnail_pic_s02())
            .apply(options).into(holder.image002);
        } else {
            Image03_ViewHolder holder;
            if (convertView == null){
                convertView =View.inflate(context, R.layout.item_layout03,null);
                holder =new Image03_ViewHolder();

                //查找控件
                holder.image01 = (ImageView) convertView.findViewById(R.id.image01);
                holder.image02 = (ImageView) convertView.findViewById(R.id.image02);
                holder.image03 = (ImageView) convertView.findViewById(R.id.image03);
                holder.title = (TextView) convertView.findViewById(R.id.title);
                convertView.setTag(holder);
            }else {
                holder = (Image03_ViewHolder) convertView.getTag();
            }

            //获取数据重新赋值
            holder.title.setText(list.get(position).getTitle());
            RequestOptions options = new RequestOptions()
                    .placeholder(R.mipmap.ic_launcher)
                    .diskCacheStrategy(DiskCacheStrategy.RESOURCE)
                    .error(R.mipmap.ic_launcher);
            Glide.with(context).load(list.get(position).getThumbnail_pic_s())
            .apply(options).into(holder.image01);
           Glide.with(context).load(list.get(position).getThumbnail_pic_s02())
           .apply(options).into(holder.image02);
          Glide.with(context).load(list.get(position).getThumbnail_pic_s03())
          .apply(options).into(holder.image03);
        }
        return convertView;
    }

    static  class  Image01_ViewHolder{
        TextView title,author_name;
        ImageView image;
    }
    static  class  Image02_ViewHolder{
        TextView title;
        ImageView image001,image002;
    }
    static  class  Image03_ViewHolder{
        TextView title;
        ImageView image01,image02,image03;
    }
}

到此，我们的目的就达到了，下篇我将会优化请求网络，以及一下其他的改动。
如果想看之前的内容，请看：简易新闻App
下一篇：Android使用MaterialDialog优化用户反馈简易新闻（九）
欢迎批评指正与讨论！

RecyclerView异步加载图片

如何在不使用第三方图片加载框架的基础上实现RecyclerView和ListView的中实现异步加载图片功能？
简单的方法是我们可以使用LruCache+AsyncTask结合的方式实现。大致思路是在onBindViewHolder()方法中根据key去内存缓存中对应的bitmap，如果找到了就直接显示，如果没有找到就开启一个异步任务去下载这个bitmap，下载完成后存进内存缓存中并执行相应的回调进行展示。

1.首先是LruCache的工具类，我们可以这样写：

private static final class CacheHelper{
        private static LruCache<String, Bitmap> sLruCache;
        static {
            sLruCache = new LruCache<String, Bitmap> ((int)Runtime.getRuntime ().maxMemory ()/4){
                @Override
                protected int sizeOf(String key, Bitmap value) {
                    return value.getByteCount ();
                }
            };
        }
    }

2.然后是下载图片的异步任务，我们可以这样写：

private static final class ImageTask extends AsyncTask<String, Void, Bitmap> {

        private Listener mListener;

        ImageTask(Listener listener) {
            mListener = listener;
        }

        @Override
        protected Bitmap doInBackground(String... strings) {
            Bitmap bitmap = getBitmap (strings[0]);
            CacheHelper.sLruCache.put (strings[1], bitmap);
            return bitmap;
        }

        @Override
        protected void onPostExecute(Bitmap bitmap) {
            mListener.onSuccess (bitmap);
        }

        public interface Listener{
            void onSuccess(Bitmap bitmap);
        }

        private static Bitmap getBitmap(String url){
            Bitmap bitmap = null;
            BufferedInputStream stream = null;
            URL url1 = null;
            try {
                url1 = new URL (url);
                URLConnection connection = url1.openConnection ();
                stream = new BufferedInputStream(connection.getInputStream ());
                bitmap = BitmapFactory.decodeStream (stream);
            } catch (MalformedURLException e) {
                e.printStackTrace ();
            } catch (IOException e) {
                e.printStackTrace ();
            }finally {
                if (stream != null) {
                    try {
                        stream.close ();
                    } catch (IOException e) {
                        e.printStackTrace ();
                    }
                }
            }
            return bitmap;
        }
    }

3.在onBindViewHolder()方法中，展示图片前从缓存中拿，如果没有的话就开启一个异步任务，并指定回调。

	@Override
    public void onBindViewHolder(@NonNull final ViewHolder viewHolder, int i) {
        Bitmap bitmap = CacheHelper.sLruCache.get ("ChatRecyclerAdapter" + i);
        if (bitmap == null) {
            new ImageTask (new ImageTask.Listener () {
                @Override
                public void onSuccess(Bitmap bitmap) {
                    viewHolder.mHead.setImageBitmap (bitmap);
                }
            }).execute (chatBean.getImageUrl (), "ChatRecyclerAdapter" + i);
        }else {
            viewHolder.mHead.setImageBitmap (bitmap);
        }
    }

这样就可以在不依赖第三方框架的情况下实现RecyclerView和ListView的中图片的异步加载。
这里只是一个简单思路，具体使用时候需要考虑RecyclerView和ListView的细节问题。比如在条目不可见时异步任务加载完毕后就不需要在回调显示了，这个可以通过让异步任务持有一个当前RecyclerView或ListView的实例，在onBindViewHolder()方法中给ImageView设置tag，然后通过这个tag找到条目的ImageView，如果为空说明已经不再屏幕中，这样我们就不需要执行显示的回调了。

实现效果如图：

首先创建一个项目，后将要加载的图片放在项目文件下，通过一下代码打开。

#include <graphics.h>//图形库
#include <conio.h>//_getch()
int main()
{
	initgraph(1000, 600);//初始化图片
 
	IMAGE picture;	// 定义 IMAGE 对象
	loadimage(&picture, "background.jpg",1000,600);	// 读取图片到 img 对象中，后面数字为加载图片想要的尺寸
	putimage(0, 0, &picture);	// 在坐标 (0, 0) 位置显示 IMAGE 对象
 
	_getch();//将端口停留在图片界面
	closegraph();

	return 0;
}