异步加载(AsyncTask异步任务、Handler、Json解析、Lrucache缓存、ListView滑动优化等来实现ListView图文混排)

最新推荐文章于 2019-05-29 04:07:17 发布

Lee_droid

最新推荐文章于 2019-05-29 04:07:17 发布

阅读量916

点赞数

分类专栏： Android 基础文章标签： asynctask 异步 listview 优化缓存

本文链接：https://blog.csdn.net/u010651155/article/details/47149195

版权

Android 基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文是学习笔记,原视频地址：异步加载。主要是从慕课网提供提供的接口（www.imooc.com/api/teacher?type=4&num=30）获取数据进行Json解析，将解析得到的数据放到ListView中，观察Json数据，我们主要用到的是name 作为标题，description作为内容，picSmall作为ImageView获取图片的网址。其中用到的网络请求，AsyncTask，Json解析，将在本文的末尾贴出详细地址（如果还没贴就是我还没更完）

一、AsyncTask请求网络获取Jason数据解析后获取数据源，建立适配器显示在ListView中

（注：由于返回Json数据中picSmall为图片地址，所以第一步骤，先将ImageView中的图片设置为ic_launcher，在第二步骤中将听过两种方式来处理）

先新建布局文件item.xml作为ListView的Item

<?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="wrap_content"
    android:padding="4dp"
    android:orientation="horizontal">
    <ImageView
        android:id="@+id/item_pic"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:src="@mipmap/ic_launcher"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingLeft="4dp"
        android:layout_gravity="center">
       <TextView
           android:id="@+id/item_title"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:textSize="20sp"
           android:text="This is a Title"
           android:gravity="center"
           android:ellipsize="end"
           android:maxLines="1"/>
        <TextView
            android:id="@+id/item_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:maxLines="3"
            android:textSize="15sp"
            android:text="This is Content"
            />

    </LinearLayout>
    

</LinearLayout>

也就是左边一个显示图片的ImageView，右边有两行，放两个TextView分别显示标题和内容

在MainActivity中：

1.先在MainActivity的布局文件中加一个ListView，比较简单，略去不写

2.在MainActivity中，我们需要考虑到由于是网络请求属于费时操作，此处需要使用多线程和Handelr或者使用AsyncTask来处理，此处我们使用AsyncTask来处理

。开始之前，我们先搞清楚需要传进去的参数，以及最终向要的结果是什么？本程序中，我们传进去一个url，想最终返回的是包含图片地址的url(还要对图片地址做进一步处理才会达到最终想要的图片)、题目、内容的多个对象，所以我们需要新建一个类来封装这些属性

2.1新建NewsBean:

package com.example.administrator.asyncapplication;

public class NewsBean {
    public  String newsPicUrl;
    public String newsTitle;
    public String newsContent;



}

2.2使用AsyncTask:

class NewsAsyncTask extends AsyncTask<String,Void,List<NewsBean>>{
        @Override
        protected List<NewsBean> doInBackground(String... params) {
            return getJsonData (params[0]);
        }

        @Override
        protected void onPostExecute(List<NewsBean> newsBeans) {
            super.onPostExecute(newsBeans);
            
        }

    }

此时，我们需要一个getJsonData来返回我们所需要的List<NewsBean> 对象

2.2 获取从网络上返回的数据之后进行Json解析：

 private List<NewsBean> getJasonData(String url){
         List<NewsBean> news = new ArrayList<NewsBean>();


        try {
          String data = getDataFromInputStream(new URL(url).openStream());
           // Log.i("xyz", data);
            //Json解析
            NewsBean bean;
            JSONObject jsonObject;
            try {
                jsonObject = new JSONObject(data);
                JSONArray jsonArray = jsonObject.getJSONArray("data");
                for(int i=0;i<jsonArray.length();i++){
                    jsonObject = jsonArray.getJSONObject(i);
                    bean = new NewsBean();
                    bean.newsPicUrl=jsonObject.getString("picSmall");
                    bean.newsTitle=jsonObject.getString("name");
                    bean.newsContent=jsonObject.getString("description");
                    news.add(bean);
                }


            } catch (JSONException e) {
                e.printStackTrace();
            }
            ;
        } catch (IOException e) {
            e.printStackTrace();
        }
        //System.out.println(news.size());
        return news;

    }

2.3读取服务器返回的InputStream数据 getDataFromInputStream

    //读取输入流，返回字符
    private String getDataFromInputStream(InputStream is){
        InputStreamReader isr;
        String result = "";//获取读取每一行之后的所有数据

        try {
            isr = new InputStreamReader(is, "utf-8");
            BufferedReader bufferedReader = new BufferedReader(isr);
            String line = "";
            while ((line = bufferedReader.readLine()) != null) {
                result += line;
            }
        } catch (IOException e) {
            e.printStackTrace();
        }


        return result;
    }

以上几个步骤，我们得到数据源List<NewsBean>，之后

3.1建立适配器NewAdapter(用BaseAdapter)：

public class NewAdapter extends BaseAdapter {
    List<NewsBean> list;
    LayoutInflater inflater;
 
    public NewAdapter(Context context,List<NewsBean> list){
        this.list=list;
        inflater = LayoutInflater.from(context);
     
    }
    @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 View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder=null;
        NewsBean bean = list.get(position);
        if(convertView==null){
            viewHolder = new ViewHolder();
            convertView=inflater.inflate(R.layout.item,null);
            viewHolder.pic = (ImageView)convertView.findViewById(R.id.item_pic);
            viewHolder.title =(TextView)convertView.findViewById(R.id.item_title);
            viewHolder.content=(TextView)convertView.findViewById(R.id.item_content);
            convertView.setTag(viewHolder);
        }
        else{
            viewHolder =(ViewHolder)convertView.getTag();
        }

        //先将ImageView的图片设为固定的，后面会更改
        viewHolder.pic.setImageResource(R.mipmap.ic_launcher);
        viewHolder.title.setText(bean.newsTitle);
        viewHolder.content.setText(bean.newsContent);

        return convertView;
    }
    class ViewHolder{
        public TextView title,content;
        public ImageView pic;
    }
}

3.2需要在MainActivity中创建异步任务的onPostExecute方法中设置适配器：

  protected void onPostExecute(List<NewsBean> newsBeans) {
            super.onPostExecute(newsBeans);
            listView.setAdapter(new NewAdapter(MainActivity.this,newsBeans));
        }

3.3在MainActivity中的onCreate()方法中执行异步任务：

public class MainActivity extends ActionBarActivity {

    ListView listView;
    private static String URL ="http://www.imooc.com/api/teacher?type=4&num=30" ;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        listView = (ListView)findViewById(R.id.lv_main);


        //请求网络，异步加载
        new NewsAsyncTask().execute(URL);

    }

之后运行程序。

二、将得到的图片url解析成图片并设置给ImageView，并且做规避ListView的View复用的处理以及用Lrucache对图片进行缓存

然后，我们来处理图片，由于Jason数据中解析出来的是图片地址，所以们需要连接网络，获取所需要的图片。可以用多线程和异步加载：

1.采用多线程的方式给ImageView设置图片：

1.1新建类ImageLoader,之后新建两个成员变量。ImageView mImageView; String mUrl;之后：

  //从内部类中访问url需要被声明为最终类型
    public void showImageByThread(ImageView imageView,final String url){
        mUrl = url;
        mImageView = imageView;
        new Thread(){
            @Override
            public void run() {
                super.run();
                Bitmap bitmap = getbitMapFromUrl(url);
                Message message = Message.obtain();
                message.obj=bitmap;
                //用Handler机制，将获得的图片通过消息发送出去
                mHandler.sendMessage(message);
            }
        }.start();
    }

1.2 getbitMapFromUrl :

//通过一个网络url地址返回一个图片
    //得到拂去其返回的输入流
    //通过BitmapFactory的decodeStream()方法来获取图片
    public Bitmap getbitMapFromUrl(String url){
        InputStream in=null;
        Bitmap bitMap;
        URL url1 = null;

        try {
            url1 = new URL(url);
            HttpURLConnection connection= (HttpURLConnection) url1.openConnection();
            in = new BufferedInputStream(connection.getInputStream());//对InputStream进行封装
            bitMap = BitmapFactory.decodeStream(in);//根据InputStream得到BitMap
            connection.disconnect();
            return bitMap;
        } catch (IOException e) {
            e.printStackTrace();
        }finally {
            try {
                in.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }



        return null;

1.3 在Handler中进行消息处理 handleMessage

 private Handler mHandler = new Handler(){
        //收到并处理消息
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
           
                mImageView.setImageBitmap((Bitmap) msg.obj);
            

        }
    };

1.4在NewAdapter中在设置完默认图片之后，加上一行

new ImageLoader(viewHolder.pic,uri);

(String url = list.get(position).newsPicUrl; url即为newsBean的属性之一）

1.5之后运行程序，可以看到现在已经完全能接收到图片了，是不是已经完美了呢？远远不是！在快速滑动的过程中，可以看到图片出现闪动的状态，原因是刷新了多次，第一次是

ListView中的缓存，先从缓存池中拿出图片，然后再从网络上下载，等于显示了两次，有时候会造成图片错位等。如何解决，将ViewHolder.pic和url联系起来，只有是当前的url时，才设置图片。在NewAdapter中 viewHolder.pic.setTag(url);在ImageLoader中的Handler处理中加上;if(mImageView.getTag().equals(mUrl)){mImageView.setBitmap((Bitmap)mas.obj)}，之后再快速滑动，可以看到不会出现刚才的情况。

2.用AsyncTask的方式加载图片，不再详解

2.1

//异步任务
    class NewsAsyncTask extends AsyncTask<String,Void,Bitmap>{
        //前期在设置ImageView和后期在避免ListView的缓存机制设置Tag时，需要用到url
        private ImageView mImageView;
        private String mUrl;
        public NewsAsyncTask(ImageView imageView,String url){
            mImageView = imageView;
            mUrl = url;
        }

        
        @Override
        protected Bitmap doInBackground(String... params) {
           
            return  <span style="font-family: Arial, Helvetica, sans-serif;">getbitMapFromUrl(url);</span>
        }

        @Override
        protected void onPostExecute(Bitmap bitmap) {
            super.onPostExecute(bitmap);
            if (mImageView.getTag().equals(mUrl)) {
                mImageView.setImageBitmap(bitmap);
            }
        }

2.2

 //通过异步任务将图片设置给ImageView
    public void showImageByAsyncTask(ImageView imageView,String url){
       
            new NewsAsyncTask(imageView, url).execute(url);
        

    }

之后再NewAdapter做相应的更改即可。现在程序上下滑动可以看到先出现默认图标，然后才显示了图片，还不够完美，因为图片没有缓存，导致每次都得重新加载下面通过AsyncTask来介绍使用LruCache缓存

三、使用LruCache缓存

注意lruche对象的底层是用map来是实现的，所以很多map的方法，我们在这里也可以使用，存储也是通过键值对的方式，key在此处是图像的url，value是Bitmap

1.创建cache对象

我们在ImageLoader的构造函数中来初始化LruCache

这样当ImageLoader对象被创建时，也就初始化了cache

public class ImageLoader {
     
    private LruCache<String,Bitmap> caches;
    public ImageLoader(){
        //获得最大内存，从而设置缓存的空间大小，当款村的图骗超过设置的空间大小时
        //lru最近未被使用的图片就会被抛出缓存
        int maxMermory = (int)Runtime.getRuntime().maxMemory();
        int cacheSize = maxMermory/8;
        //匿名内部类 获得cache实例
        caches = new LruCache<String,Bitmap>(cacheSize){
            @Override
            protected int sizeOf(String key, Bitmap value) {
                return value.getByteCount();
            }
        };

    }

2.两个方法，一个时从缓存中获取图片，另一个是添加图片到缓存中：

 //先看缓存中是否有图片，没有的话就加到缓存中去
    public void addBitmapToCache(String url,Bitmap bitmap){
        if(getBitmapFromCache(url)==null){
            caches.put(url,bitmap);
        }

    }
    //根据url（key）从缓存中取出Bitmao(value)
    public Bitmap getBitmapFromCache(String url){
        return caches.get(url);
    }

3.之后，还需要对showImageByAsyncTask进行修改，给ImageView设置图片之前，先看缓存中是否有对应图片，没有的话，从网络上进行加载，有的话，直接设置

，但是，还有一点，从网络上加载完了，应该添加到缓存中，以便下次备用

 //通过异步任务将图片设置给ImageView
    public void showImageByAsyncTask(ImageView imageView,String url){
        Bitmap bitMap = getBitmapFromCache(url);
        //如果缓存中没有图片，就从网络上下载
        //如果缓存中有图片了，直接设置
        if(bitMap==null) {
            new NewsAsyncTask(imageView, url).execute(url);
        }else{
            imageView.setImageBitmap(bitMap);
        }

    }

 //异步任务
    class NewsAsyncTask extends AsyncTask<String,Void,Bitmap>{
        //前期在设置ImageView和后期在避免ListView的缓存机制设置Tag时，需要用到url
        private ImageView mImageView;
        private String mUrl;
        public NewsAsyncTask(ImageView imageView,String url){
            mImageView = imageView;
            mUrl = url;
        }

        //先从网络上下载图片，下载下来之后，不需要重复下载，需要加入缓存
        @Override
        protected Bitmap doInBackground(String... params) {
            String url = params[0];
            Bitmap bitmap = getbitMapFromUrl(url);
            if(bitmap!=null){
                addBitmapToCache(url,bitmap);
            }
            return  bitmap;
        }

        @Override
        protected void onPostExecute(Bitmap bitmap) {
            super.onPostExecute(bitmap);
            if (mImageView.getTag().equals(mUrl)) {
                mImageView.setImageBitmap(bitmap);
            }
        }
    }

经过这几个步骤，缓存已经差不多了，为什么说差不多呢？因为我们在NewAdapter中还没有修改的，回想一下我们如何调用的

new ImageLoader().showImageByAsyncTask(viewHolder.pic,url);

这样，每次调用都重新生成了ImageLoader对象，哪里有缓存了？解决办法，将生成的ImageLoader对象保存起来

在NewAdapter中

private ImageLoader mImageLoader;

之后再NewAdapter的构造函数中，

mImageLoader = new ImageLoader();

之后在getView方法中更改：

mImageLoader.showImageByAsyncTask(viewHolder.pic,url);
至此，缓存也已经完成，运行程序，可以看到当加载完图片之后，再往上滑动，将会使用缓存，不会重复加载，这就省了流量

（待续。。。。）

Lee_droid

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
异步加载(AsyncTask异步任务、Handler、Json解析、Lrucache缓存、ListView滑动优化等来实现ListView图文混排)

本文是学习笔记,原视频地址：异步加载。主要是从慕课网提供提供的接口（www.imooc.com/api/teacher?type=4&num=30）获取数据进行Json解析，将解析得到的数据放到ListView中，观察Json数据，我们主要用到的是name 作为标题，description作为内容，picSmall作为ImageView获取图片的网址。其中用到的网络请求，AsyncTask，Jso
复制链接

扫一扫