Android图片加载框架Picasso使用教程 （二）listviewh和gridview

前言

　　前面我们已经介绍了Picasso的基本用法及如何将一张图片加载到ImageView中,下面我们就利用Picasso在ListView中加载图片;Let’s Go!

一个ListView的简单应用示例

1: 首先,需要先准备好一些网络图片资源

1. <font color="rgb(85, 85, 85)">public static String[] imageUrls = {
   
2.             "http://i.imgur.com/rFLNqWI.jpg",
   
3.             "http://i.imgur.com/C9pBVt7.jpg",
   
4.             "http://i.imgur.com/rT5vXE1.jpg",
   
5.             "http://i.imgur.com/aIy5R2k.jpg",
   
6.             "http://i.imgur.com/MoJs9pT.jpg",
   
7.             "http://i.imgur.com/S963yEM.jpg",
   
8.             "http://i.imgur.com/rLR2cyc.jpg",
   
9.             "http://i.imgur.com/SEPdUIx.jpg",
   
10.             "http://i.imgur.com/aC9OjaM.jpg",
    
11.             "http://i.imgur.com/76Jfv9b.jpg",
    
12.             "http://i.imgur.com/fUX7EIB.jpg",
    
13.             "http://i.imgur.com/syELajx.jpg",
    
14.             "http://i.imgur.com/COzBnru.jpg",
    
15.             "http://i.imgur.com/Z3QjilA.jpg",
    
16.     };</font>

复制代码

2: 然后写一个简单的Activity,需要一个Adapter,并将Adapter设置到ListView中填充数据

1. public class MainActivity extends AppCompatActivity {
   
2. 
   
3.     private ListView lv;
   
4.     @Override
   
5.     protected void onCreate(Bundle savedInstanceState) {
   
6.         super.onCreate(savedInstanceState);
   
7.         setContentView(R.layout.activity_main);
   
8.         lv = (ListView) findViewById(R.id.lv);
   
9.         lv.setAdapter(new ImageListAdapter(this,imageUrls));
   
10.     }
    
11. }

复制代码

3:我们需要在Adapter中加载一个ListView子item的layout文件,当然也很简单

1. <font color="rgb(85, 85, 85)"><?xml version="1.0" encoding="utf-8"?>
   
2. <ImageView xmlns:android="http://schemas.android.com/apk/res/android"
   
3.     android:layout_width="match_parent"
   
4.     android:layout_height="200dp">
   
5. 
   
6. </ImageView></font>

复制代码

4: 我们还需要一个自定义的Adapter,功能很简单,只显示一张图片即可

1. <font color="rgb(85, 85, 85)">public class ImageListAdapter extends ArrayAdapter{
   
2.         private Context context;
   
3. 
   
4.         private String[] imageUrls;
   
5. 
   
6.         public ImageListAdapter(Context context,String[] imageUrls){
   
7.             super(context,R.layout.item_picasso,imageUrls);
   
8. 
   
9.             this.context = context;
   
10.             this.imageUrls = imageUrls;
    
11. 
    
12.         }
    
13. 
    
14.         @Override
    
15.         public View getView(int position, View convertView, ViewGroup parent) {
    
16.             if (convertView==null){
    
17.                 convertView = View.inflate(context,R.layout.item_picasso,null);
    
18.             }
    
19. 
    
20.             //加载图片
    
21.             Picasso
    
22.                     .with(context)
    
23.                     .load(imageUrls[position])
    
24.                     .into((ImageView) convertView);
    
25. 
    
26.             return convertView;
    
27.         }
    
28.     }</font>

复制代码

注意:

• 我们一般会复用ConvertView来保持listview的快速平滑的滚动,而Picasso的一个优点就是会自动处理划出屏幕外的图片请求,并给对应的ImageView加载出正确的资源;
• 另外,你会发现当你上下滚动后,会发现图片加载速度有了明显的提升,这正是因为Picasso的高速缓存,而且不需要再去从网络加载,Picasso所实现的缓存的大小取决于你自己的设备;
• Picasso加载图片的资源会从三个地方进行获取, 内存,磁盘,和网络,这些操作都不需要你自己处理,Picasso已经能智能完成;
• 
  

一个GridView的小示例

ListView与GridView的展示及使用上并没有什么区别,很简单,上代码:

1. <font color="rgb(85, 85, 85)"><?xml version="1.0" encoding="utf-8"?>
   
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3.     xmlns:tools="http://schemas.android.com/tools"
   
4.     android:layout_width="match_parent"
   
5.     android:layout_height="match_parent"
   
6.     tools:context="com.smallcheric.picasso.MainActivity">
   
7.     <android.support.v7.widget.AppCompatButton
   
8.         android:id="@+id/bt"
   
9.         android:layout_centerHorizontal="true"
   
10.         android:layout_width="wrap_content"
    
11.         android:layout_height="wrap_content"
    
12.         android:text="切换"/>
    
13.     <ListView
    
14.         android:id="@+id/lv"
    
15.         android:layout_below="@id/bt"
    
16.         android:layout_width="match_parent"
    
17.         android:layout_height="match_parent"
    
18.          />
    
19.     <GridView
    
20.         android:id="@+id/grid"
    
21.         android:layout_below="@id/bt"
    
22.         android:visibility="gone"
    
23.         android:layout_width="match_parent"
    
24.         android:layout_height="match_parent"
    
25.         android:numColumns="2"/>
    
26. </RelativeLayout></font>

复制代码

如果图片地址不存在或为空怎么处理

上面我们写的代码都是在正常的情况下,但是如果我们的图片地址错误将怎么处理呢,如果不去处理,网络可能会一直请求或者我们的屏幕上会出现一片空白,这都不是我们希望看到的.

Picasso给了我们两种解决方案:

• 在判断为空的地址时,取消网络请求,调用cancelRequest(),然后调用imageView.setImageDrawable(null)
• 或者调用Picasso的.placeHolder()方法进行图片的替换展示
• 如果图片网址错误,我们也可以调用.error()方法进行图片替换
  

1. <font color="rgb(85, 85, 85)">@Override
   
2.         public View getView(int position, View convertView, ViewGroup parent) {
   
3.             if (convertView==null){
   
4.                 convertView = View.inflate(context,R.layout.item_picasso,null);
   
5.             }
   
6.             ImageView imageView = (ImageView)convertView;
   
7.             if (TextUtils.isEmpty(imageUrls[position])){
   
8.                 Picasso
   
9.                         .with(context)
   
10.                         .cancelRequest(imageView);
    
11.                 imageView.setImageDrawable(null);
    
12.             }else {
    
13.                 //加载图片
    
14.                 Picasso
    
15.                         .with(context)
    
16.                         .load(imageUrls[position])
    
17.                         .placeholder(R.mipmap.ic_launcher)
    
18.                         .error(R.mipmap.ic_launcher)
    
19.                         .into((ImageView) convertView);
    
20.             }
    
21.             return convertView;
    
22.         }</font>

复制代码

注意:.placeholder()与.error()所传的参数与.load()相同

OK,到现在为止,我们已经基本掌握了Picasso的基本用法,后面将为大家分析到Picasso性能方面的特性,让我们共同期待,愿大家都有美好的一天.