android实现Glide加载图片(优化上下滑动图片重复加载问题) 简易新闻（八）

问题描述

在优化加载网络图片之前，我们先看一下之前加载图片会出现的一个问题（简易新闻加载新闻图片的第三方框架是：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优化用户反馈简易新闻（九）
欢迎批评指正与讨论！