【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) { 
   
   
   
   
   
 
      
   
   
   
   
   
 
     // 如果 viewId不是继承自 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必学-异步加载;