【Android】ListView加载网络图片（解决图片错位问题）

【关键词】

ListView 图片错乱 网络加载

【问题】

• 在ListView中使用图片作为头像时，发生图片错位；
• 使用圆角图片；

【效果图】

【分析】

· 见源码注释；

【解决方案】

使用方法

 
 

  
  

   
   holder.putImg(R.id.iv_group_icon, group.getSmallIcon(), true)
  
  
 
 

---

【代码】

结合通用Adapter这一节，在[LouHolder.java]中添加如下代码；

 
 

  
  

   
   //----------------- 网络加载图片（2016.03.26）
  
  
  
  

   
   /**
  
  
  
  

   
   * 网络加载图片；（使用了开源库：Picasso）[Picasso](https://github.com/square/picasso)
  
  
  
  

   
   *
  
  
  
  

   
   * @param viewId     要设置的ImageView或者ImageButton
  
  
  
  

   
   * @param url 要显示的图片地址
  
  
  
  

   
   * @param roundShape 是否设置为圆角；
  
  
  
  

   
   * @return 返回自己，链式编程；
  
  
  
  

   
   */
  
  
  
  

   
   public LouHolder putImg(final int viewId, final String url, boolean roundShape) {
  
  
  
  

   
    
  
  
  
  

   
       // 如果 view 不是继承自 ImageView 或者 url为null, 则不做任何处理；
  
  
  
  

   
       if (!(getView(viewId) instanceof ImageView) || url == null) {
  
  
  
  

   
           return this;
  
  
  
  

   
       }
  
  
  
  

   
    
  
  
  
  

   
       final ImageView imageView = getView(viewId);
  
  
  
  

   
       final Context context = imageView.getContext();
  
  
  
  

   
    
  
  
  
  

   
       if (!roundShape) {
  
  
  
  

   
           // 该库已经做了错位处理了（如果只是将加载的图片加载到ImageView的话，就不需要错位问题）；
  
  
  
  

   
           Picasso.with(context).load(url).placeholder(R.mipmap.code).into(imageView);
  
  
  
  

   
           return this;
  
  
  
  

   
       } else {
  
  
  
  

   
    
  
  
  
  

   
           // 首先设置默认图片
  
  
  
  

   
           Bitmap bitmap = ViewUtil.getBitmapByXfermode(context, R.mipmap.code,
  
  
  
  

   
                   Color.parseColor("#993382"),
  
  
  
  

   
                   ScreenUtil.dp2Px(context, 48),
  
  
  
  

   
                   ScreenUtil.dp2Px(context, 48),
  
  
  
  

   
                   PorterDuff.Mode.SRC_IN);
  
  
  
  

   
           imageView.setImageBitmap(bitmap);
  
  
  
  

   
    
  
  
  
  

   
           // 由于只是从网络获取图片，没有处理错位问题，这里需要单独处理；
  
  
  
  

   
           // 防止图片过多导致显示错乱（用url来作为验证）；
  
  
  
  

   
           imageView.setTag(url);
  
  
  
  

   
           new AsyncTask<Void, Void, Bitmap>() {
  
  
  
  

   
    
  
  
  
  

   
               @Override
  
  
  
  

   
               protected Bitmap doInBackground(Void... params) {
  
  
  
  

   
                   Bitmap bitmap = null;
  
  
  
  

   
                   try {
  
  
  
  

   
                       // 获取网络图片，不可在主线程中操作；
  
  
  
  

   
                       bitmap = Picasso.with(context).load(url).placeholder(R.mipmap.code).get();
  
  
  
  

   
                   } catch (IOException e) {
  
  
  
  

   
                       // e.printStackTrace();
  
  
  
  

   
                   }
  
  
  
  

   
                   return bitmap;
  
  
  
  

   
               }
  
  
  
  

   
    
  
  
  
  

   
               @Override
  
  
  
  

   
               protected void onPostExecute(Bitmap bitmap) {
  
  
  
  

   
                   if (bitmap == null) {
  
  
  
  

   
                       return;
  
  
  
  

   
                   }
  
  
  
  

   
                   bitmap = ViewUtil.getBitmapByXfermode(context, bitmap,
  
  
  
  

   
                           Color.parseColor("#993382"),
  
  
  
  

   
                           ScreenUtil.dp2Px(context, 48),
  
  
  
  

   
                           ScreenUtil.dp2Px(context, 48),
  
  
  
  

   
                           PorterDuff.Mode.SRC_IN);
  
  
  
  

   
    
  
  
  
  

   
                   // 防止图片错乱；
  
  
  
  

   
    
  
  
  
  

   
                   String url2 = (String) imageView.getTag();
  
  
  
  

   
                   if (url.equals(url2)) {
  
  
  
  

   
                       imageView.setImageBitmap(bitmap);
  
  
  
  

   
                   }
  
  
  
  

   
               }
  
  
  
  

   
           }.execute();
  
  
  
  

   
       }
  
  
  
  

   
       return this;
  
  
  
  

   
   }
  
  
  
  

   
   // ~~~~~~~~~~~~~~~~
  
  
 
 

【参考资料】

• Picasso;
• Android必学-异步加载;