前言
前面我們已經介紹了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",
};
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));
}
}
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;
}
}
注意:
- 我們一般會複用
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>
最後,附上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;
}
注意:.placeholder()
與.error()
所傳的參數與.load()
相同
OK,到現在爲止,我們已經基本掌握了Picasso的基本用法,後面將爲大家分析到Picasso性能方面的特性,讓我們共同期待,願大家都有美好的一天.