异步批量加载网络图片,并使用二级缓存.

1.实际需求

现在要在一个客户端的一个listview上显示一个列表,信息包括歌曲图像,歌曲的名称,和歌曲的演唱者.数据从百度音乐接口获取.

2.具体问题分析和所用的技术

2.1 由于下载图片属于耗时操作,所以应该在工作线程中完成.由于要加载很多的图片,如果加载一个就启动一个线程.这样就会造成启动过多的线程,从而会使得主线程出现卡顿(掉帧)
的现象.针对这种情况,我们可以采用把所有的加载图片的工作放到一个单工作线程中完成,而这个单工作线程通过轮循任务集合的方式批量加载图片.也即是在adapter的getView当中,一旦要显示图片的时候就在那里向任务集合中添加一个任务.而由工作线程去完成这个任务,之后再将当前完成的任务移除.

2.2 图片优化:
图片压缩:
图片国语庞大的时候,我们就需要对图片进行压缩.因为我们的手机不需要显示那么大的图片.
图片缓存:
分为内存缓存和文件缓存两种.
下面通过一个在listview中显示百度音乐接口中热歌榜的例子来说明以上知识的运用.

下面上代码: 一共4个类.然后再解析代码的执行流程,以及各个类的作用:
Music.java -> 封装Music信息的实体类

package com.fioman.my21_asynctaskright;

public class Music
{
    /**
     * 歌曲对应的图片,相对比较大.这是一个网络路径
     */
    private String pic_big;

    /**
     * 歌曲对应的图片,相对比较小.这是一个网络路径
     */
    private String pic_small;

    /**
     * 歌曲的名字
     */
    private String title;
    /**
     * 歌曲的演唱者
     */
    private String author;
    public String getPic_big()
    {
        return pic_big;
    }
    public void setPic_big(String pic_big)
    {
        this.pic_big = pic_big;
    }
    public String getPic_small()
    {
        return pic_small;
    }
    public void setPic_small(String pic_small)
    {
        this.pic_small = pic_small;
    }
    public String getTitle()
    {
        return title;
    }
    public void setTitle(String title)
    {
        this.title = title;
    }
    public String getAuthor()
    {
        return author;
    }
    public void setAuthor(String author)
    {
        this.author = author;
    }
    @Override
    public String toString()
    {
       return "Music [pic_big=" + pic_big+",pic_small="+pic_small
       + ", title=" + title +",author=" + author + "]";
    }

}

MainActivity.java 主Activity类

package com.fioman.my21_asynctaskright;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;

public class MainActivity extends FragmentActivity
{
    private ViewPager vpPages;
    private Fragment fragment;
    private List<Fragment> fragments;
    private FragmentPagerAdapter pageAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //初始化控件
        vpPages = (ViewPager) findViewById(R.id.vp_music);

        //准备要显示的Fragmeng数据源
        fragments = new ArrayList<Fragment>();
        fragment = new HotMusicFragment();
        fragments.add(fragment);

        //为ViewPager配置Adapter
        pageAdapter = new MainPagerAdapter(getSupportFragmentManager());
        vpPages.setAdapter(pageAdapter);
    }

    class MainPagerAdapter extends FragmentPagerAdapter
    {

        public MainPagerAdapter(FragmentManager fm)
        {
            super(fm);
        }

        @Override
        public Fragment getItem(int position)
        {
            return fragments.get(position);
        }

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

}

HotMusicFragment.java 主界面中要用到的Fragment类

package com.fioman.my21_asynctaskright;

import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.ArrayList;
import java.util.List;

import org.xmlpull.v1.XmlPullParser;

import android.os.AsyncTask;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.util.Xml;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;

/**
 * 热歌榜的fragment,也即是当主Activity显示这个碎片界面的时候会执行它里面的onCreateView()生命周期方法
 */
public class HotMusicFragment extends Fragment 
{
    private ListView lsvMusic;
    private List<Music> musics =new ArrayList<Music>();
    private MusicAdapter adapter;

    /**
     * 该生命周期方法由系统自动调用,当viewPager需要获取Fragment的view对象时
     */
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState)
    {
        View view = inflater.inflate(R.layout.music_list_fragment, null);
        //初始化Fragment中的控件
        lsvMusic = (ListView) view.findViewById(R.id.lsv_music);

        //调用方法,获取热歌榜的数据.前面20首歌曲
        getHotMusicList(0,20);
        return view;
    }

    /**
     * 获取新歌榜列表, 需要发送http请求.该操作需要在工作线程中执行.这里采用异步任务的方式.
     * @param offset  起始位置
     * @param size    下载的歌曲的数量
     */
    private void getHotMusicList(final int offset, final int size)
    {
        AsyncTask< String, String, List<Music>> task = new AsyncTask<String, String, List<Music>>()
        {

            @Override
            protected List<Music> doInBackground(String... params)
            {
                try
                {
                    //发送http请求,准备url
                    String path = "http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.billboard.billList&format=xml&type=2&offset="+offset+"&size="+size;
                    URL url = new URL(path);
                    //根据url打开获取httpUrlconnection
                    HttpURLConnection conn = (HttpURLConnection) url.openConnection();
                    //"GET"
                    conn.setRequestMethod("GET");
                    //获取输入流
                    InputStream is = conn.getInputStream();
                    //根据输入流解析数据源,获取输入流
                    XmlPullParser parser = Xml.newPullParser();
                    parser.setInput(is, "utf-8");

                    //根据时间类型循环读取xml文件,解析出数据
                    int event = parser.getEventType();
                    Music music = null;

                    while(event != XmlPullParser.END_DOCUMENT)
                    {
                        switch(event)
                        {
                            case XmlPullParser.START_TAG:
                                String tagName = parser.getName();
                                if(tagName.equals("song"))
                                {
                                    music = new Music();
                                    musics.add(music);
                                    //Log.i("toLook", music.toString());
                                }
                                else if(tagName.equals("pic_big"))
                                {
                                    music.setPic_big(parser.nextText());
                                }
                                else if(tagName.equals("pic_small"))
                                {
                                    music.setPic_small(parser.nextText());
                                }
                                else if(tagName.equals("title"))
                                {
                                    music.setTitle(parser.nextText());
                                }
                                else if(tagName.equals("author"))
                                {
                                    music.setAuthor(parser.nextText());
                                }

                                break;
                        }

                        //手动触发下一个事件
                        event = parser.next();
                    }
                    return musics;
                }
                catch (Exception e)
                {
                    e.printStackTrace();
                }
                return null;
            }

            /**
             * 当doInBackground()方法执行完毕之后,在主线程执行的方法
             */
            @Override
            protected void onPostExecute(List<Music> result)
            {
                Log.i("toLook", result.toString());
                /**
                 * 更新UI,也即是为ListView配置Adapter
                 */
                adapter = new MusicAdapter(getActivity(), lsvMusic,result);
                lsvMusic.setAdapter(adapter);

                Log.i("toLook", "onPostExecute()->执行完毕");
            }
        };

        task.execute();
    }
}

MusicAdapter.java listview配置的adapter

package com.fioman.my21_asynctaskright;

import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.lang.ref.SoftReference;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;
import java.net.URLConnection;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.crypto.spec.IvParameterSpec;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Bitmap.CompressFormat;
import android.graphics.BitmapFactory.Options;
import android.os.Handler;
import android.os.Message;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebView.FindListener;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

public class MusicAdapter extends BaseAdapter
{
    /**
     * 声明缓存
     */
    private Map<String, SoftReference<Bitmap>> cache = new HashMap<String, SoftReference<Bitmap>>();

    /**
     * 声明用于轮循的任务集合
     */
    private List<ImageLoaderTask> tasks = new  ArrayList<MusicAdapter.ImageLoaderTask>();
    /**
     * 声明一个工作线程,用于轮循任务集合
     */
    private Thread workThread;
    private boolean isLoop = true;

    /**
     * 消息类型,工作线程发送的消息.当其处理完图片之后发送这个消息给主线程.让其更新ImageView
     */
    private static final int HANDLER_IAMGE_LOADED = 10;

    /**
     * Handler 用于处理工作线程发送的消息的Handler
     */
    private Handler handler = new Handler()
    {
        public void handleMessage(Message msg) 
        {
            switch(msg.what)
            {
                case HANDLER_IAMGE_LOADED:
                    //更新ui,设置对应的图片
                    ImageLoaderTask task = (ImageLoaderTask) msg.obj;
                    ImageView ivAlbum = (ImageView) lsvMusic.findViewWithTag(task.path);

                    if(ivAlbum != null) //找到了对应的ImageView控件
                    {

                        Bitmap bitmap = task.bitmap;
                        if(bitmap != null) //图片加载处理成功
                        {
                            // 更新UI
                            ivAlbum.setImageBitmap(bitmap);
                            /**
                             * 先将其存入缓存当中
                             */
                            SoftReference<Bitmap> ref = new SoftReference<Bitmap>(bitmap);
                            cache.put(task.path, ref);
                            /**
                             * 在存入文件当中
                             */
                            String filepath = task.path.substring(task.path.indexOf("/"));
                            File file = new File(context.getCacheDir(),"images"+filepath);

                            if(file.exists())
                            {
                                //存入文件当中
                                try
                                {
                                    FileOutputStream fos  = new FileOutputStream(file);
                                    //将一个bitmap压缩到一个文件中的方法,先打开文件输出流.让后调用bitmap.compress()方法即可
                                    bitmap.compress(CompressFormat.JPEG, 100, fos);
                                } catch (FileNotFoundException e)
                                {
                                    e.printStackTrace();
                                }

                            }

                        }
                    }
                    break;
            }
        }
    };


    private Context context;
    private ListView lsvMusic;
    private List<Music> musics ;
    private LayoutInflater inflater;

    public MusicAdapter(Context context, ListView lsvMusic, List<Music> musics)
    {
        super();
        this.context = context;
        this.lsvMusic = lsvMusic;
        this.musics = musics;

        this.inflater = LayoutInflater.from(context);
        this.lsvMusic = lsvMusic;

        //在构造方法中创建一个线程,用于轮循任务集合.加载图片
        workThread = new Thread()
        {
            @Override
            public void run()
            {
                while(isLoop)
                {
                    if(!tasks.isEmpty())
                    {
                        //获取并移除当前第一个任务
                        ImageLoaderTask task = tasks.remove(0);
                        String path = task.path;
                        //根据网络路径访问网络
                        try
                        {
                            //1.准备URL
                            URL url = new URL(path);
                            //2.HTTPURLConnection
                            HttpURLConnection conn = (HttpURLConnection) url.openConnection();
                            //3.设置访问方式为"GET"
                            conn.setRequestMethod("GET");
                            //4.设置网络输入流
                            InputStream is = conn.getInputStream();
                            //5.根据这个输入流,按照用户需要的大小进行图片压缩,这里压缩的高和宽分别设定为50,50
                            //5.1 从网络输入流中读取byte[],把输入流中的数据,写到字节输出流中
                            ByteArrayOutputStream bos = new ByteArrayOutputStream();
                            byte[] buffer = new byte[1024*10];//字节缓存
                            int length = 0;
                            while((length = is.read(buffer))!= -1)
                            {
                                bos.write(buffer, 0, length);
                                bos.flush();
                            }
                            //5.2 从输出流中得到byte[],描述一个完整的bitmap数据
                            byte[] bytes = bos.toByteArray();
                            bos.close();
                            //5.3 解析bitmap的byte[],获取图片的原始宽和高
                            Options opts = new Options();
                            //5.3 仅仅加载图片的bounds(边界属性),以计算压缩比例
                            opts.inJustDecodeBounds = true;
                            BitmapFactory.decodeByteArray(bytes, 0, bytes.length, opts);
                            int widScale = opts.outWidth / 50;
                            int heiScale = opts.outHeight / 50;

                            //5.4 压缩比例为宽和高的比例的最大值
                            int scale = widScale > heiScale ? widScale : heiScale;
                            //5.5根据所获取的压缩比例,再次解析byte[] 获取压缩后的图片
                            opts.inJustDecodeBounds = false;
                            opts.inSampleSize = scale;
                            Bitmap bitmap = BitmapFactory.decodeByteArray(bytes, 0, bytes.length, opts);
                            //封装到ImageLoadTask中
                            task.bitmap = bitmap;
                            //发送消息给主线程: 将bitmap设置到ImageView当中
                            Message msg = new Message();
                            msg.what = HANDLER_IAMGE_LOADED;
                            msg.obj = task;

                            handler.sendMessage(msg);

                        } catch (Exception e)
                        {
                            e.printStackTrace();
                        }
                    }
                    else //集合中没有任务的时候
                    {
                        //调用wait方法,将会让当前线程进入等待
                        synchronized (workThread)
                        {
                            try
                            {
                                workThread.wait();
                            } catch (InterruptedException e)
                            {
                                e.printStackTrace();
                            }
                        }
                    }
                }
            }
        };
        workThread.start();
    }

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

    @Override
    public Music getItem(int position)
    {
        return musics.get(position);
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent)
    {
        //准备饺子皮
        ViewHolder vHolder;
        if(convertView == null)
        {
            convertView = inflater.inflate(R.layout.music_list_item, null);
            vHolder = new ViewHolder();
            vHolder.ivAlbum =  (ImageView) convertView.findViewById(R.id.iv_album);
            vHolder.tvTitle = (TextView) convertView.findViewById(R.id.tv_title);
            vHolder.tvSinger = (TextView) convertView.findViewById(R.id.tv_author);


            convertView.setTag(vHolder);
        }

        vHolder = (ViewHolder) convertView.getTag();

        //准备饺子馅
        Music music = musics.get(position);

        //包饺子,注意这里要用到handler,因为这里要显示图片的时候.图片还没有,图片只是一个地址.要去加载图片.而图片的加载是一个耗时
        //任务,不可能在UI线程中去做.只有异步批量加载图片.
        vHolder.tvTitle.setText(music.getTitle());
        vHolder.tvSinger.setText(music.getAuthor());

        //通过图片的网络路径,下载图片.然后设置图片
        //1.先获取图片的网络路径
        String picSmallPath = music.getPic_small();
        String picBigPath  = music.getPic_big();
        //2.把路径设置成ImageView的tag,因为在handler中需要使用这个imageView控件.
        vHolder.ivAlbum.setTag(picSmallPath);
        //3.先去内存缓存中寻找,是否已经加载过
        SoftReference<Bitmap> ref = cache.get(picSmallPath);
        Bitmap bitmap = null;
        if(ref != null) //前面已经缓存过
        {
            bitmap = ref.get();
            if(bitmap != null) //已经缓存过,并且没有被销毁.直接从缓存中取出图片
            {
                vHolder.ivAlbum.setImageBitmap(bitmap);
                return convertView;
            }
        }
        else  //如果内存中没有缓存过,就去看看文件中是否有缓存.
        {
            String filename = picSmallPath.substring(picSmallPath.lastIndexOf("/"));
            File file = new File(context.getCacheDir(), "images"+filename);
            if(file.exists()) //如果文件是存在的就去根据文件解析图片
            {
                bitmap = BitmapFactory.decodeFile(file.getAbsolutePath()); //根据文件路径去加载
                vHolder.ivAlbum.setImageBitmap(bitmap);
                //把从文件中读取的bitmap存入内存缓存
                cache.put(picSmallPath, new SoftReference<Bitmap>(bitmap));
                return convertView;
            }
        }

        //如果内存缓存中和文件中都没有的时候,就通过任务轮循的方式去网络中加载
        //1.创建ImageLoadTask对象,添加到任务集合中
        ImageLoaderTask task = new ImageLoaderTask();
        task.path = picSmallPath;
        tasks.add(task);
        //2.任务集合中有任务了,唤醒工作线程起来干活
        synchronized (workThread)
        {
            workThread.notify();
        }


        return convertView;
    }

    class ImageLoaderTask
    {
        String path;     //图片路径,封装到task任务中,传递给工作线程.让工作线程根据这个路径,而获取一个bitmap格式图片.
        Bitmap bitmap;   //根据图片路径下载到的图片
    }

    class ViewHolder
    {
        ImageView ivAlbum;
        TextView tvTitle;
        TextView tvSinger;
    }

}

下面是3个布局文件:
activity.main

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.fioman.my21_asycntask.MainActivity"
    tools:ignore="HardcodedText" >

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:textSize="18sp"
        android:textColor="#000000"
        android:background="#234de1"
        android:gravity="center"
        android:text="百度音乐热歌榜" />

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_music"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/tv_title"
        />


</RelativeLayout>

music_list_fragment.xml fragmeng布局文件.里面就是放了一个ListView

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <ListView 
        android:id="@+id/lsv_music"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        ></ListView>

</RelativeLayout>

music_list_item.xml 最后呈现listview的模板资源文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <ListView 
        android:id="@+id/lsv_music"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        ></ListView>

</RelativeLayout>

下面分析一下这个程序的执行流程:
1>程序启动 -> 在主Activity中会加载Fragment,然后Fragment在显示的时候会执行Fragment的
生命周期方法,由android容器来调用:
onCreateView()方法会得到执行:

2>在onCreateView()方法中,我们显示获取一个view对象,根据fragment模板,然后初始化
fragment中的listView控件;
然后调用getHotMusicList(0,20);

3>接着我们看看我们在getHotMusicList(0,20)方法中做了什么事情:
这里采用异步任务的方式:
在doInBackground()方法中我们做了什么:
向网络发送请求,然后解析xml,把从网络上获取的音乐数据封装到音乐实体对象中.

当doInBackground()执行完毕之后:
onPostExcute(List result)方法,会根据doInBackGround() 方法中的返回值
即获取的音乐数据列表,去在主线程中更新adapter
adapter = new MusicAdapter(getActivity(),lsvMusic,result);
lsvMusic.setAdapter(adapter);

4>而在MusicAdapter的构造方法中,我们启动一个工作线程去以轮循的方式去加载图片.
因为图片可能会从网络上获取,这样是耗时的.

5> 分析MusicAdapter中的代码,然后看一下他的执行流程:
首先在setAdapter(adapter)方法中的时候,
首先系统会调用getView方法获取view:
在getView中,我们显示歌曲名称和歌曲的演唱者,很容易.
因为音乐实体类中已经封装过了.但是图片的获取就没那么简单,因为实体类中封装的只是一个
网络路径地址,我们要根据这个网络路径地址去获取这张图片:
5.1>首先是判断内存的缓存是否有这张图片
//3.先去内存缓存中寻找,是否已经加载过
SoftReference ref = cache.get(picSmallPath);
Bitmap bitmap = null;
if(ref != null) //前面已经缓存过
{
bitmap = ref.get();
if(bitmap != null) //已经缓存过,并且没有被销毁.直接从缓存中取出图片
{
vHolder.ivAlbum.setImageBitmap(bitmap);
return convertView;
}
}
5.2 然后是从文件中查看是否之前已经保存过:
String filename = picSmallPath.substring(picSmallPath.lastIndexOf(“/”));
File file = new File(context.getCacheDir(), “images”+filename);
if(file.exists()) //如果文件是存在的就去根据文件解析图片
{
bitmap = BitmapFactory.decodeFile(file.getAbsolutePath()); //根据文件路径去加载
vHolder.ivAlbum.setImageBitmap(bitmap);
//把从文件中读取的bitmap存入内存缓存
cache.put(picSmallPath, new SoftReference(bitmap));
return convertView;
}
5.3:如果内存中和文件中都没有,这个时候就要去网络中获取.这个时候采用任务集合的方式轮循获取:
这里根据图片的网络路径创建一个task,然后将task添加到list tasks 集合当中.
然后通知正在等待干活的workThread()起来加载图片了.
5.4: 工作线程加载完图片之后,把图片保存起来.而后把其保存到缓存当中,保存到文件缓存当中.
最后再显示图片: