转载至:http://blog.csdn.net/smallcheric/article/details/51050399
前言
前面我们已经介绍了Picasso的基本用法及如何将一张图片加载到ImageView
中,下面我们就利用Picasso在ListView
中加载图片;Let’s Go!
一个ListView
的简单应用示例
1: 首先,需要先准备好一些网络图片资源
public static String[] imageUrls = {
"http://i.imgur.com/rFLNqWI.jpg",
"http://i.imgur.com/C9pBVt7.jpg",
"http://i.imgur.com/rT5vXE1.jpg",
"http://i.imgur.com/aIy5R2k.jpg",
"http://i.imgur.com/MoJs9pT.jpg",
"http://i.imgur.com/S963yEM.jpg",
"http://i.imgur.com/rLR2cyc.jpg",
"http://i.imgur.com/SEPdUIx.jpg",
"http://i.imgur.com/aC9OjaM.jpg",
"http://i.imgur.com/76Jfv9b.jpg",
"http://i.imgur.com/fUX7EIB.jpg",
"http://i.imgur.com/syELajx.jpg",
"http://i.imgur.com/COzBnru.jpg",
"http://i.imgur.com/Z3QjilA.jpg",
};
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
2: 然后写一个简单的Activity
,需要一个Adapter
,并将Adapter
设置到ListView
中填充数据
public class MainActivity extends AppCompatActivity {
private ListView lv;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
lv = (ListView) findViewById(R.id.lv);
lv.setAdapter(new ImageListAdapter(this,imageUrls));
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
3:我们需要在Adapter
中加载一个ListView
子item的layout文件,当然也很简单
<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="200dp">
</ImageView>
4: 我们还需要一个自定义的Adapter
,功能很简单,只显示一张图片即可
public class ImageListAdapter extends ArrayAdapter{
private Context context;
private String[] imageUrls;
public ImageListAdapter(Context context,String[] imageUrls){
super(context,R.layout.item_picasso,imageUrls);
this.context = context;
this.imageUrls = imageUrls;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView==null){
convertView = View.inflate(context,R.layout.item_picasso,null);
}
Picasso
.with(context)
.load(imageUrls[position])
.into((ImageView) convertView);
return convertView;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
注意:
- 我们一般会复用
ConvertView
来保持listview
的快速平滑的滚动,而Picasso的一个优点就是会自动处理划出屏幕外的图片请求,并给对应的ImageView
加载出正确的资源;
- 另外,你会发现当你上下滚动后,会发现图片加载速度有了明显的提升,这正是因为Picasso的高速缓存,而且不需要再去从网络加载,Picasso所实现的缓存的大小取决于你自己的设备;
- Picasso加载图片的资源会从三个地方进行获取, 内存,磁盘,和网络,这些操作都不需要你自己处理,Picasso已经能智能完成;
一个GridView
的小示例
ListView
与GridView
的展示及使用上并没有什么区别,很简单,上代码:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.smallcheric.picasso.MainActivity">
<android.support.v7.widget.AppCompatButton
android:id="@+id/bt"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="切换"/>
<ListView
android:id="@+id/lv"
android:layout_below="@id/bt"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<GridView
android:id="@+id/grid"
android:layout_below="@id/bt"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="2"/>
</RelativeLayout>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
最后,附上Github地址点我
如果图片地址不存在或为空怎么处理
上面我们写的代码都是在正常的情况下,但是如果我们的图片地址错误将怎么处理呢,如果不去处理,网络可能会一直请求或者我们的屏幕上会出现一片空白,这都不是我们希望看到的.
Picasso给了我们两种解决方案:
- 在判断为空的地址时,取消网络请求,调用
cancelRequest()
,然后调用imageView.setImageDrawable(null)
- 或者调用Picasso的
.placeHolder()
方法进行图片的替换展示
- 如果图片网址错误,我们也可以调用
.error()
方法进行图片替换
@Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView==null){
convertView = View.inflate(context,R.layout.item_picasso,null)
}
ImageView imageView = (ImageView)convertView
if (TextUtils.isEmpty(imageUrls[position])){
Picasso
.with(context)
.cancelRequest(imageView)
imageView.setImageDrawable(null)
}else {
//加载图片
Picasso
.with(context)
.load(imageUrls[position])
.placeholder(R.mipmap.ic_launcher)
.error(R.mipmap.ic_launcher)
.into((ImageView) convertView)
}
return convertView
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
注意:.placeholder()
与.error()
所传的参数与.load()
相同
OK,到现在为止,我们已经基本掌握了Picasso的基本用法,后面将为大家分析到Picasso性能方面的特性,让我们共同期待,愿大家都有美好的一天.