在ListView中顯示網絡圖片
ImageView 類雖然有一個 setImageUri 方法，但不能直接接受一個由網絡地址生成的uri作為參數從而顯示圖片，我們只好使用其 setImageBitmap 方法來轉換。
我們來做一個如下的文章列顯示：
先聲明一個類文章類來初始化數據：
public class ListViewItemData { private String itemTitle; private String itemPhoto; private String itemSummary; private String itemAuthor; private String itemPublishtime; public ListViewItemData() { super(); } public ListViewItemData(String itemTitle, String itemPhoto, String itemSummary, String itemAuthor, String itemPublishtime) { super(); this.itemTitle = itemTitle; this.itemPhoto = itemPhoto; this.itemSummary = itemSummary; this.itemAuthor = itemAuthor; this.itemPublishtime = itemPublishtime; } public String getTitle() { return this.itemTitle; } public Bitmap getPhoto() { String url = this.itemPhoto; URL myFileUrl = null; Bitmap bitmap = null; try { myFileUrl = new URL(url); HttpURLConnection conn = (HttpURLConnection) myFileUrl.openConnection(); conn.setDoInput(true);//連接設置獲得數據流 conn.connect(); InputStream is = conn.getInputStream(); bitmap = BitmapFactory.decodeStream(is); is.close(); } catch (IOException e) { e.printStackTrace(); } return bitmap; } public String getSummary() { return this.itemSummary; } public String getAuthor() { return this.itemAuthor; } public String getPublishtime() { return this.itemPublishtime; } }
其中getPhoto方法根據URL用來獲得在線圖片，返回對應的Bitmap。
制造數據，一般來說是從網絡上獲得，此處為了方便手工造：
public List<ListViewItemData> getListData() { List<ListViewItemData> listData = new ArrayList<ListViewItemData>(); listData.add(new ListViewItemData("android異常總結一", "http://pic.cnitblog.com/face/u471123.jpg?id=07112321", "一、場景再現=========================同事甲：搞什么搞，已經兩年沒參加忘年會了，今年又在這里加班。同事乙：都一樣，趕上今天你值夜班，能有什么辦法。同事甲：人家忘年會有東西吃，你餓不餓？叫外賣？同事乙：好哦，還是上次那家吧。========================= 二", "烈火殘軀", "2014-03-19 22:19")); listData.add(new ListViewItemData("HTML5 History API實現無刷新跳轉", "http://pic.cnitblog.com/face/306530/20140307103012.png", "本篇和大家一起了解一下Windows 8.1 中磁貼的更新，我們來看看如何利用它做出更好的應用磁貼。首先我們從展現形式上來對比一下Windows 8 與 Windows 8.1 中的磁貼：Windows 8支持兩種尺寸的磁貼，正方形磁貼（150 * 150 像素）和長方形磁貼（310 * 150 像", "sdsdsds", "2014-03-19 22:19")); listData.add(new ListViewItemData("c++ 異常處理（1）", "http://pic.cnitblog.com/face/u46305.jpg", "圖文化的說明，.net程序員，入職后的發展路線。我將發展路線歸為三類。1、技術專精；2、產品策划；3、數據運營。並對每條路線進行了優劣勢分析。歡迎各位一起來討論，不能這么渾渾噩噩的折騰了", "幕后黑手-Boss", "2014-03-19 22:19")); listData.add(new ListViewItemData("服務器批量管理工具的快速開發", "http://pic.cnitblog.com/face/603528/20140316211142.png", "當我們需要控制一個局域網中的很多台服務器時，一個簡單的全局操作可能會被放大地異常繁瑣，這時我們就會需要新的工具來幫助我們快速完成這種工作。在本文中，我們在ssh客戶端提供的一些工具的基礎上完成這一工具的開發，我們的開發平台是GNU/Linux。我們將會開發四個有用的小工具，下面即是我們整個系統的鳥瞰", "東邪獨孤", "2014-03-19 22:19")); listData.add(new ListViewItemData("揭秘uc瀏覽器一", "http://pic.cnitblog.com/face/440253/20140306132605.png", "首先，看一下項目完成后的，最終效果是這樣的：一.主界面二，書簽界面三、主界面四.操作對話框界面這幾個界面你是否看到了uc瀏覽器的影子了，其實我說你也可以了，在接下來篇幅中，我將手把手叫大家完成這個瀏覽器。首先，我們從主界面開始吧，這是一個主線，項目的一些開始由他開始了。從圖一中，我們可以看出其布局文", "laozhu1124", "2014-03-19 22:19")); listData.add(new ListViewItemData("【WPF】制作自定義的列表項面板", "http://pic.cnitblog.com/face/367389/20140226103259.png", "我們在使用像ListBox的列表控件時，我們都知道可以通過其ItemsPanel的依賴項屬性來自定義一個面板來放置列表控件中的列表項。除了CLR庫提供的幾個面板外，我們完全可以把自己寫的面板作為項列表的容器。先給各位看看效果。如何？效果還好吧？面板的原理是這樣的：1、從Panel類派出一個類，我命名", "東邪獨孤2", "2014-03-19 22:19")); return listData; }
然后生成SimpleAdapter需要的數據：
public ArrayList<HashMap<String, Object>> getItem() { List<ListViewItemData> listData = this.getListData(); ArrayList<HashMap<String, Object>> item = new ArrayList<HashMap<String, Object>>(); for (ListViewItemData data : listData) { HashMap<String, Object> map = new HashMap<String, Object>(); map.put("itemTitle", data.getTitle()); map.put("itemPhoto", data.getPhoto()); map.put("itemSummary", data.getSummary()); map.put("itemAuthor", data.getAuthor()); map.put("itemPublishtime", data.getPublishtime()); item.add(map); } return item; }
ListView中item布局：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:descendantFocusability="afterDescendants" android:orientation="vertical" > <!-- 博文題目 --> <TextView android:id="@+id/viewTitle" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:layout_marginTop="5dp" android:lines="1" android:textColor="#0000FF" android:textStyle="bold" /> <!-- 作者頭像和博文概要 --> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:layout_marginTop="2dp" android:orientation="horizontal" > <ImageView android:id="@+id/imgPhoto" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="2dp" android:src="@drawable/ic_launcher" /> <TextView android:id="@+id/viewSummary" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="2dp" android:lines="3" /> </LinearLayout> <!-- 作者昵稱和發布日期 --> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="2dp" android:layout_marginLeft="5dp" android:layout_marginTop="2dp" android:orientation="horizontal" > <TextView android:id="@+id/viewAuthor" android:layout_width="80dp" android:layout_height="wrap_content" android:textColor="#0000FF" /> <TextView android:id="@+id/viewPublishtime" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> </LinearLayout>
還需要一個ListView，此處我用了一個list_separator_line圖片來分隔上下行：
<LinearLayout 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" android:orientation="vertical" > <ListView android:id="@+id/listView" android:layout_width="match_parent" android:layout_height="wrap_content" android:divider="@drawable/list_separator_line" /> </LinearLayout>
在SimpleAdapter中需要一個數據源，用來存儲數據的，在顯示圖片時我們要用HashMap<>存儲一個Bitmap；但僅存取了Bitmap時在ListView中是無法顯示圖片的，我們需要對SimpleAdapter進行處理 。
如下是對SimpleAdaptr處理的主要代碼
simpleAdapter.setViewBinder(new ViewBinder() { @Override public boolean setViewValue(View view, Object data, String textRepresentation) { // 判斷是否為我們要處理的對象 if (view instanceof ImageView && data instanceof Bitmap) { ImageView iv = (ImageView) view; iv.setImageBitmap((Bitmap) data); return true; } else return false; } });
然后給ListView綁定，MainActivity完整代碼：
package com.example.androidlistview; import java.io.IOException; import java.io.InputStream; import java.net.HttpURLConnection; import java.net.MalformedURLException; import java.net.URL; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.R.integer; import android.R.string; import android.os.Bundle; import android.app.Activity; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.view.Menu; import android.view.View; import android.widget.ImageView; import android.widget.ListView; import android.widget.SimpleAdapter; import android.widget.SimpleAdapter.ViewBinder; public class MainActivity extends Activity { private ListView listView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); listView = (ListView) this.findViewById(R.id.listView); // 創建簡單適配器SimpleAdapter SimpleAdapter simpleAdapter = new SimpleAdapter(this, this.getItem(), R.layout.listview_item, new String[] { "itemTitle", "itemPhoto", "itemSummary", "itemAuthor", "itemPublishtime" }, new int[] { R.id.viewTitle, R.id.imgPhoto, R.id.viewSummary, R.id.viewAuthor, R.id.viewPublishtime }); simpleAdapter.setViewBinder(new ViewBinder() { @Override public boolean setViewValue(View view, Object data, String textRepresentation) { // 判斷是否為我們要處理的對象 if (view instanceof ImageView && data instanceof Bitmap) { ImageView iv = (ImageView) view; iv.setImageBitmap((Bitmap) data); return true; } else return false; } }); // 加載SimpleAdapter到ListView中 listView.setAdapter(simpleAdapter);
// 添加點擊事件
listView.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
// 獲得選中項的HashMap對象
HashMap<String, Object> map = (HashMap<String, Object>) listView.getItemAtPosition(arg2);
String title = map.get("itemTitle").toString();
String content = map.get("itemAuthor").toString();
Toast.makeText(getApplicationContext(), "你選擇了第" + arg2 + "個Item，itemTitle的值是：" + title + "itemAuthor的值是:" + content, Toast.LENGTH_SHORT).show();
}
});
} /** * @return */ public ArrayList<HashMap<String, Object>> getItem() { List<ListViewItemData> listData = this.getListData(); ArrayList<HashMap<String, Object>> item = new ArrayList<HashMap<String, Object>>(); for (ListViewItemData data : listData) { HashMap<String, Object> map = new HashMap<String, Object>(); map.put("itemTitle", data.getTitle()); map.put("itemPhoto", data.getPhoto()); map.put("itemSummary", data.getSummary()); map.put("itemAuthor", data.getAuthor()); map.put("itemPublishtime", data.getPublishtime()); item.add(map); } return item; } public List<ListViewItemData> getListData() { List<ListViewItemData> listData = new ArrayList<ListViewItemData>(); listData.add(new ListViewItemData("android異常總結一", "http://pic.cnitblog.com/face/u471123.jpg?id=07112321", "一、場景再現=========================同事甲：搞什么搞，已經兩年沒參加忘年會了，今年又在這里加班。同事乙：都一樣，趕上今天你值夜班，能有什么辦法。同事甲：人家忘年會有東西吃，你餓不餓？叫外賣？同事乙：好哦，還是上次那家吧。========================= 二", "烈火殘軀", "2014-03-19 22:19")); listData.add(new ListViewItemData("HTML5 History API實現無刷新跳轉", "http://pic.cnitblog.com/face/306530/20140307103012.png", "本篇和大家一起了解一下Windows 8.1 中磁貼的更新，我們來看看如何利用它做出更好的應用磁貼。首先我們從展現形式上來對比一下Windows 8 與 Windows 8.1 中的磁貼：Windows 8支持兩種尺寸的磁貼，正方形磁貼（150 * 150 像素）和長方形磁貼（310 * 150 像", "sdsdsds", "2014-03-19 22:19")); listData.add(new ListViewItemData("c++ 異常處理（1）", "http://pic.cnitblog.com/face/u46305.jpg", "圖文化的說明，.net程序員，入職后的發展路線。我將發展路線歸為三類。1、技術專精；2、產品策划；3、數據運營。並對每條路線進行了優劣勢分析。歡迎各位一起來討論，不能這么渾渾噩噩的折騰了", "幕后黑手-Boss", "2014-03-19 22:19")); listData.add(new ListViewItemData("服務器批量管理工具的快速開發", "http://pic.cnitblog.com/face/603528/20140316211142.png", "當我們需要控制一個局域網中的很多台服務器時，一個簡單的全局操作可能會被放大地異常繁瑣，這時我們就會需要新的工具來幫助我們快速完成這種工作。在本文中，我們在ssh客戶端提供的一些工具的基礎上完成這一工具的開發，我們的開發平台是GNU/Linux。我們將會開發四個有用的小工具，下面即是我們整個系統的鳥瞰", "東邪獨孤", "2014-03-19 22:19")); listData.add(new ListViewItemData("揭秘uc瀏覽器一", "http://pic.cnitblog.com/face/440253/20140306132605.png", "首先，看一下項目完成后的，最終效果是這樣的：一.主界面二，書簽界面三、主界面四.操作對話框界面這幾個界面你是否看到了uc瀏覽器的影子了，其實我說你也可以了，在接下來篇幅中，我將手把手叫大家完成這個瀏覽器。首先，我們從主界面開始吧，這是一個主線，項目的一些開始由他開始了。從圖一中，我們可以看出其布局文", "laozhu1124", "2014-03-19 22:19")); listData.add(new ListViewItemData("【WPF】制作自定義的列表項面板", "http://pic.cnitblog.com/face/367389/20140226103259.png", "我們在使用像ListBox的列表控件時，我們都知道可以通過其ItemsPanel的依賴項屬性來自定義一個面板來放置列表控件中的列表項。除了CLR庫提供的幾個面板外，我們完全可以把自己寫的面板作為項列表的容器。先給各位看看效果。如何？效果還好吧？面板的原理是這樣的：1、從Panel類派出一個類，我命名", "東邪獨孤2", "2014-03-19 22:19")); return listData; } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } }
以上就是一般的對於網絡圖片綁定ListView處理方式，好一點的處理方式是定制擴展一個SimpleAdapter專用來處理圖片綁定。
注意：此例是顯示網絡圖片 要記得添加權限，否則報錯：java.net.SocketException: Permission denied
<uses-permission android:name="android.permission.INTERNET">