ListView异步加载图片，完美实现图文混排

曾经终败给现在 2022-07-16 11:25 166阅读 0赞

ListView加载文本数据都是很简单的，即使是异步获取文本数据。但是异步加载图片就稍微有一点麻烦，既要获得一个比较好的用户体验，还要防止出现图片错位等各种不良BUG，其实要考虑的东西还是挺多的。好了，我们先来看一下我们今天要实现的一个效果图：

![942438-20160601004837180-141374066.png][]

看起来似乎并不难，确实，我们今天的核心问题只有一个，就是怎么异步加载图片，并且没有违和感。

好了，废话不多说，先来看主布局文件：

![复制代码][copycode.gif]

1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
     2     xmlns:tools="http://schemas.android.com/tools"  
     3     android:layout_width="match_parent"  
     4     android:layout_height="match_parent"  
     5     tools:context="com.example.listview.MainActivity" >  
     6   
     7     <ListView  
     8         android:id="@+id/lv"  
     9         android:layout_width="match_parent"  
    10         android:layout_height="match_parent" >  
    11     </ListView>  
    12   
    13 </RelativeLayout>

![复制代码][copycode.gif]

主布局中就一个listview，看看listview的item布局文件：

![复制代码][copycode.gif]

1 <?xml version="1.0" encoding="utf-8"?>  
     2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
     3     android:layout_width="match_parent"  
     4     android:layout_height="100dp" >  
     5   
     6     <ImageView  
     7         android:id="@+id/iv"  
     8         android:layout_width="80dp"  
     9         android:layout_height="90dp"  
    10         android:layout_centerVertical="true"  
    11         android:padding="5dp"  
    12         android:src="@drawable/ic_launcher" />  
    13   
    14     <TextView  
    15         android:id="@+id/title"  
    16         android:layout_width="match_parent"  
    17         android:layout_height="wrap_content"  
    18         android:layout_marginTop="20dp"  
    19         android:layout_toRightOf="@id/iv"  
    20         android:gravity="center_vertical"  
    21         android:text="人社部：养老转移已有初稿"  
    22         android:textSize="14sp"  
    23         android:textStyle="bold" />  
    24   
    25     <TextView  
    26         android:id="@+id/summary"  
    27         android:layout_width="match_parent"  
    28         android:layout_height="wrap_content"  
    29         android:layout_below="@id/title"  
    30         android:layout_marginTop="8dp"  
    31         android:layout_toRightOf="@id/iv"  
    32         android:text="人社部：养老转移已有初稿"  
    33         android:textSize="12sp" />  
    34   
    35 </RelativeLayout>

![复制代码][copycode.gif]

这个布局和我们上图描述的一样，左边一个ImageView，右边是两个TextView，这些都不难，我们看看MainActivity：

![复制代码][copycode.gif]

1 public class MainActivity extends Activity {  
     2   
     3     private ListView lv;  
     4     private List<News> list;  
     5     private String HTTPURL = "http://litchiapi.jstv.com/api/GetFeeds?column=3&PageSize=20&pageIndex=1&val=100511D3BE5301280E0992C73A9DEC41";  
     6     private Handler mHandler = new Handler(){  
     7   
     8         @Override  
     9         public void handleMessage(Message msg) {  
    10             super.handleMessage(msg);  
    11             switch (msg.what) {  
    12             case 0:  
    13                 MyAdaper adapter = new MyAdaper(list);  
    14                 lv.setAdapter(adapter);  
    15                 break;  
    16   
    17             default:  
    18                 break;  
    19             }  
    20         }  
    21           
    22     };  
    23   
    24     @Override  
    25     protected void onCreate(Bundle savedInstanceState) {  
    26         super.onCreate(savedInstanceState);  
    27         setContentView(R.layout.activity_main);  
    28         lv = (ListView) this.findViewById(R.id.lv);  
    29         initData();  
    30     }  
    31   
    32     private void initData() {  
    33         list = new ArrayList<News>();  
    34   
    35         OkHttpClient client = new OkHttpClient();  
    36         Request request = new Request.Builder().url(HTTPURL).build();  
    37         Call call = client.newCall(request);  
    38         call.enqueue(new Callback() {  
    39   
    40             @Override  
    41             public void onResponse(Response response) throws IOException {  
    42                 try {  
    43                     JSONObject jo1 = new JSONObject(response.body().string());  
    44                     JSONObject jo2 = jo1.getJSONObject("paramz");  
    45                     JSONArray ja = jo2.getJSONArray("feeds");  
    46                     News news = null;  
    47                     for (int i = 0; i < ja.length(); i++) {  
    48                         JSONObject data = ja.getJSONObject(i).getJSONObject(  
    49                                 "data");  
    50                         String imageUrl = "http://litchiapi.jstv.com"  
    51                                 + data.getString("cover");  
    52                         String title = data.getString("subject");  
    53                         String summary = data.getString("summary");  
    54                         news = new News(imageUrl, title, summary);  
    55                         list.add(news);  
    56                     }  
    57                 } catch (JSONException e) {  
    58                     e.printStackTrace();  
    59                 }  
    60                 mHandler.obtainMessage(0).sendToTarget();  
    61             }  
    62   
    63             @Override  
    64             public void onFailure(Request arg0, IOException arg1) {  
    65   
    66             }  
    67         });  
    68     }  
    69 }

![复制代码][copycode.gif]

在onCreate方法中，我们先拿到一个ListView的实例，然后就是初始化数据，这里初始化数据我们使用了OKHttp，关于OKHttp的使用可以查看我之前的文章[OKHttp的简单使用][OKHttp]，我们拿到一串json数据，至于json里边的结构是怎么样的，我就不多说了，大家可以直接在浏览器中打开上面的地址，这样就能看到json数据了，我们把我们需要的数据封装成一个JavaBean，其中ImageView我们先存储一个url地址，然后在Adapter中通过这个url地址异步加载图片。json解析就不多说了，我们瞅一眼这个Bean：

![复制代码][copycode.gif]

1 public class News {  
     2   
     3     private String imageUrl;  
     4     private String title;  
     5     private String summary;  
     6   
     7     public String getImageUrl() {  
     8         return imageUrl;  
     9     }  
    10   
    11     public void setImageUrl(String imageUrl) {  
    12         this.imageUrl = imageUrl;  
    13     }  
    14   
    15     public String getTitle() {  
    16         return title;  
    17     }  
    18   
    19     public void setTitle(String title) {  
    20         this.title = title;  
    21     }  
    22   
    23     public String getSummary() {  
    24         return summary;  
    25     }  
    26   
    27     public void setSummary(String summary) {  
    28         this.summary = summary;  
    29     }  
    30   
    31     public News(String imageUrl, String title, String summary) {  
    32         this.imageUrl = imageUrl;  
    33         this.title = title;  
    34         this.summary = summary;  
    35     }  
    36   
    37     public News() {  
    38     }  
    39 }

![复制代码][copycode.gif]

好了，到这里，所有的东西都还是基本用法，下面我们先不急着看Adapter，先来看看Google给我们提供的一个缓存机制，在android-support-v4.jar包中，Google提供了这样一个类LruCache，这个LruCache的使用和Java中的Map用法差不多，甚至你就可以把它当作Map来使用，不同的是LruCache中的Value可以是一张图片。如果我们缓存的图片太多，超出了我们设置的缓存大小，那么系统会自动移除我们在最近使用比较少的图片。好了，我们来看看LruCache的定义：

1 private LruCache<String, BitmapDrawable> mImageCache;

每个图片的缓存的key我们就使用该图片的url(这个是唯一的)，value就是一张我们要缓存的图片，在实例化LruCache的时候，我们需要传入一个参数，表明我们可以使用的最大缓存，这个缓存参数我们传入可用缓存的1/8，同时我们需要重写sizeOf方法，查看源码我们可以知道，如果不重写sizeOf方法，它默认返回的是图片的数量，但是我们实际上是需要计算图片大小来判断当前已经使用的缓存是否已经超出界限，所以我们这里重写sizeOf方法，返回每张图片的大小。代码如下：

![复制代码][copycode.gif]

1 int maxCache = (int) Runtime.getRuntime().maxMemory();  
    2 int cacheSize = maxCache / 8;  
    3 mImageCache = new LruCache<String, BitmapDrawable>(cacheSize) {  
    4     @Override  
    5     protected int sizeOf(String key, BitmapDrawable value) {  
    6         return value.getBitmap().getByteCount();  
    7     }  
    8 };

![复制代码][copycode.gif]

从LruCache中读取一张图片的方式和从Map中取值是一样的：

1 mImageCache.get(key)

向LruCache中存储一张图片：

1 mImageCache.put(key, bitmapDrawable);

关于LruCache的基本用法就说这些，这已经够我们后面使用了，现在我就大概说说我们的一个思路，当我们要给ImageView设置图片的时候，就先在本地缓存中查看是否有该图片，有的话，直接从本地读取，没有的话就从网络请求，同时，在从网络请求图片的时候，为了防止发生图片错位的情况，我们要给每一个item的每一个ImageView设置一个tag，这个tag就使用该ImageView要加载的图片的url（这样就可以确保每一个ImageView唯一），在给ImageView设置图片的时候我们就可以通过这个tag找到我们需要的ImageView，这样可以有效避免图片错位的问题。好了，看代码：

![复制代码][copycode.gif]

1 public class MyAdaper extends BaseAdapter {  
      2   
      3     private List<News> list;  
      4     private ListView listview;  
      5     private LruCache<String, BitmapDrawable> mImageCache;  
      6   
      7     public MyAdaper(List<News> list) {  
      8         super();  
      9         this.list = list;  
     10   
     11         int maxCache = (int) Runtime.getRuntime().maxMemory();  
     12         int cacheSize = maxCache / 8;  
     13         mImageCache = new LruCache<String, BitmapDrawable>(cacheSize) {  
     14             @Override  
     15             protected int sizeOf(String key, BitmapDrawable value) {  
     16                 return value.getBitmap().getByteCount();  
     17             }  
     18         };  
     19   
     20     }  
     21   
     22     @Override  
     23     public int getCount() {  
     24         return list.size();  
     25     }  
     26   
     27     @Override  
     28     public Object getItem(int position) {  
     29         return list.get(position);  
     30     }  
     31   
     32     @Override  
     33     public long getItemId(int position) {  
     34         return position;  
     35     }  
     36   
     37     @Override  
     38     public View getView(int position, View convertView, ViewGroup parent) {  
     39         if (listview == null) {  
     40             listview = (ListView) parent;  
     41         }  
     42         ViewHolder holder = null;  
     43         if (convertView == null) {  
     44             convertView = LayoutInflater.from(parent.getContext()).inflate(  
     45                     R.layout.listview_item, null);  
     46             holder = new ViewHolder();  
     47             holder.iv = (ImageView) convertView.findViewById(R.id.iv);  
     48             holder.title = (TextView) convertView.findViewById(R.id.title);  
     49             holder.summary = (TextView) convertView.findViewById(R.id.summary);  
     50             convertView.setTag(holder);  
     51         } else {  
     52             holder = (ViewHolder) convertView.getTag();  
     53         }  
     54         News news = list.get(position);  
     55         holder.title.setText(news.getTitle());  
     56         holder.summary.setText(news.getSummary());  
     57         holder.iv.setTag(news.getImageUrl());  
     58         // 如果本地已有缓存，就从本地读取，否则从网络请求数据  
     59         if (mImageCache.get(news.getImageUrl()) != null) {  
     60             holder.iv.setImageDrawable(mImageCache.get(news.getImageUrl()));  
     61         } else {  
     62             ImageTask it = new ImageTask();  
     63             it.execute(news.getImageUrl());  
     64         }  
     65         return convertView;  
     66     }  
     67   
     68     class ViewHolder {  
     69         ImageView iv;  
     70         TextView title, summary;  
     71     }  
     72   
     73     class ImageTask extends AsyncTask<String, Void, BitmapDrawable> {  
     74   
     75         private String imageUrl;  
     76   
     77         @Override  
     78         protected BitmapDrawable doInBackground(String... params) {  
     79             imageUrl = params[0];  
     80             Bitmap bitmap = downloadImage();  
     81             BitmapDrawable db = new BitmapDrawable(listview.getResources(),  
     82                     bitmap);  
     83             // 如果本地还没缓存该图片，就缓存  
     84             if (mImageCache.get(imageUrl) == null) {  
     85                 mImageCache.put(imageUrl, db);  
     86             }  
     87             return db;  
     88         }  
     89   
     90         @Override  
     91         protected void onPostExecute(BitmapDrawable result) {  
     92             // 通过Tag找到我们需要的ImageView，如果该ImageView所在的item已被移出页面，就会直接返回null  
     93             ImageView iv = (ImageView) listview.findViewWithTag(imageUrl);  
     94             if (iv != null && result != null) {  
     95                 iv.setImageDrawable(result);  
     96             }  
     97         }  
     98   
     99         /** 
    100          * 根据url从网络上下载图片 
    101          *  
    102          * @return 
    103          */  
    104         private Bitmap downloadImage() {  
    105             HttpURLConnection con = null;  
    106             Bitmap bitmap = null;  
    107             try {  
    108                 URL url = new URL(imageUrl);  
    109                 con = (HttpURLConnection) url.openConnection();  
    110                 con.setConnectTimeout(5 * 1000);  
    111                 con.setReadTimeout(10 * 1000);  
    112                 bitmap = BitmapFactory.decodeStream(con.getInputStream());  
    113             } catch (MalformedURLException e) {  
    114                 e.printStackTrace();  
    115             } catch (IOException e) {  
    116                 e.printStackTrace();  
    117             } finally {  
    118                 if (con != null) {  
    119                     con.disconnect();  
    120                 }  
    121             }  
    122   
    123             return bitmap;  
    124         }  
    125   
    126     }  
    127   
    128 }

![复制代码][copycode.gif]

好了，listview图文混排就说到这里，有问题欢迎留言讨论。

[Demo下载https://github.com/lenve/listview\_PicText][Demo_https_github.com_lenve_listview_PicText]

[942438-20160601004837180-141374066.png]: /images/20220716/953163ef9e794a1db30c85e2dd3e424e.png
[copycode.gif]: /images/20220716/4902e174449d4de4b92f52ef6ff895b7.png
[OKHttp]: http://blog.csdn.net/u012702547/article/details/49045765
[Demo_https_github.com_lenve_listview_PicText]: https://github.com/lenve/listview_PicText