Android雜談–ListView之SimpleAdapter的使用

SimpleAdapter                                            

SimpleAdapter是擴充性最好的適配器，可以定義各種你想要的布局，而且使用很方便

SimpleAdapter(Context context, List<? extends Map<String, ?>> data, int resource, String[] from, int[] to)

參數context：上下文，比如this。關聯SimpleAdapter啟動並執行視圖上下文

參數data：Map列表，列表要顯示的資料，這部分需要自己實現，如例子中的getData()，類型要與上面的一致，每條項目要與from中指定條目一致

參數resource：ListView單項布局檔案的Id,這個布局就是你自訂的布局了，你想顯示什麼樣子的布局都在這個布局中。這個布局中必須包括了to中定義的控制項id

參數 from：一個被添加到Map上關聯每一個項目列名稱的列表，數組裡面是列名稱

參數 to：是一個int數組，數組裡面的id是自訂布局中各個控制項的id，需要與上面的from對應

 

SimpleAdapter可以使用自訂的ListView，然後setContentView即可。也可以直接使用系統內建的ListAcitivity，該ListActivity實現了ListView，顯示ListView的時候做了很多最佳化。

ListActivity直接extends ListActivity即可，不需要在setContentView了

例子一：自訂布局，顯示本地資源

如果直接繼承ListAcitivty，則不需要自訂ListView，下面的是清單項目單項顯示格式

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >

<ImageView 
android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="3px"
/>
<LinearLayout 
android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
>
<TextView 
android:id="@+id/title"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textSize="16sp"
/>
<TextView
android:id="@+id/info"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textSize="10sp"
/>
</LinearLayout>

</LinearLayout>

Activity

package com.loulijun.demo13;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.app.ListActivity;
import android.os.Bundle;
import android.widget.SimpleAdapter;

public class Demo13Activity extends ListActivity {
/** Called when the activity is first created. */
    @Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
        SimpleAdapter adapter = new SimpleAdapter(this, getData(),
                R.layout.main, new String[] { "img", "title", "info" },
new int[] { R.id.img, R.id.title, R.id.info });
        setListAdapter(adapter);
    }

private List<Map<String, Object>> getData() {
        List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("img", R.drawable.e001);
        map.put("title", "小宗");
        map.put("info", "電台DJ");
        list.add(map);

        map = new HashMap<String, Object>();
        map.put("img", R.drawable.e002);
        map.put("title", "貂蟬");
        map.put("info", "四大美女");
        list.add(map);

        map = new HashMap<String, Object>();
        map.put("img", R.drawable.e04b);
        map.put("title", "奶茶");
        map.put("info", "清純妹妹");
        list.add(map);

        map = new HashMap<String, Object>();
        map.put("img", R.drawable.e04e);
        map.put("title", "大黃");
        map.put("info", "是小狗");
        list.add(map);

        map = new HashMap<String, Object>();
        map.put("img", R.drawable.e11a);
        map.put("title", "hello");
        map.put("info", "every thing");
        list.add(map);

        map = new HashMap<String, Object>();
        map.put("img", R.drawable.e11d);
        map.put("title", "world");
        map.put("info", "hello world");
        list.add(map);

return list;
    }
}

|------------------------------華麗的分割線------------------------------------------|

註：自訂ListView也有其好處，因為繼承的ListAcitivity布局的樣子已經定了下來，但是如果我們需要在ListView中實現某些效果，比如快速捲軸，就需要自訂了。另外如果你繼承的比如是TabActivity等其他

Acitivty的話，就不能繼承ListAcitivty了，因為JAVA是單繼承，這時候還是需要自訂的ListView

如果自訂ListView而不是繼承ListActivity需要如下樣子實現

mylist.xml，在ListView中可以定義其他屬性

<?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:orientation="vertical" >

<ListView 
android:id="@+id/listview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
></ListView>

</LinearLayout>

如果使用自訂的ListView就需要在上面的代碼修改一下下了，Acitivity其他部分都一樣，區別在於灰色地區

public class Demo13Activity extends Activity {
 private ListView lv;
    @Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
 setContentView(R.layout.mylist);
 lv = (ListView)findViewById(R.id.listview);
        SimpleAdapter adapter = new SimpleAdapter(this, getData(),
                R.layout.main, new String[] { "img", "title", "info" },
new int[] { R.id.img, R.id.title, R.id.info });
//setListAdapter(adapter);
        lv.setAdapter(adapter);
    }

運行效果如下：

|------------------------------------------------------------------------|

使用者可以自訂布局，可以是線性布局，也可以是網格布局等等

接下來說說ViewBinder的使用，上面的例子中我們顯示了本地資源，圖片都是儲存在本地的，但是用上面的方法顯示網路上擷取的圖片卻有問題，因為如果ListView要顯示外部資源的話必須要設定ViewBinder，通過ViewBinder的綁定機制來顯示網路資源，下面是個顯示網狀圖片的例子（如果可能的話，最好還是使用BaseAdapter）

例子二：自訂布局，顯示網路資源，ViewBinder的使用

由於需要訪問網路資源，首先在你的資訊清單檔中加入許可權

<uses-permission android:name="android.permission.INTERNET"/>

其他布局跟上面一樣

package com.loulijun.demo13;

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.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.SimpleAdapter.ViewBinder;

public class Demo13Activity extends Activity {
private ListView lv;
private static final String iphoneUrl = "http://www.51aigoo.com/images/20100107/6b21df8c2419480e.jpg";
private static final String macbookproUrl = "http://www.esundigi.net/images/goods/20110317/6ece8f319694f0b1.jpg";
    @Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
        setContentView(R.layout.mylist);
        lv = (ListView)findViewById(R.id.listview);

        SimpleAdapter adapter = new SimpleAdapter(
this, 
                getData(),
                R.layout.main,
new String[] {"img","title","info"},
new int[] { R.id.img, R.id.title, R.id.info});
//setListAdapter(adapter);
        adapter.setViewBinder(new MyViewBinder());
        lv.setAdapter(adapter);


    }
//擷取網狀圖片資源，傳回型別是Bitmap，用於設定在ListView中
    public Bitmap getBitmap(String httpUrl)
    {
        Bitmap bmp = null;
//ListView中擷取網狀圖片
        try {
            URL url = new URL(httpUrl);
            HttpURLConnection conn = (HttpURLConnection)url.openConnection();
            InputStream is = conn.getInputStream();
            bmp = BitmapFactory.decodeStream(is);
        } catch (Exception e) {
// TODO Auto-generated catch block
            e.printStackTrace();
        }
return bmp;
    }
//ListView上需要顯示的資料
    private List<Map<String, Object>> getData() {
        List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
        Map<String, Object> map = new HashMap<String, Object>();
//設定綁定是資料是圖片
        map.put("img", getBitmap(iphoneUrl));
        map.put("title", "iphone4");
        map.put("info", "可遠觀而買不起嫣");
        list.add(map);

        map = new HashMap<String, Object>();
        map.put("img", getBitmap(macbookproUrl));
        map.put("title", "Macbook pro");
        map.put("info", "明年買個玩玩");
        list.add(map);

return list;
    }
}
//實現ViewBinder介面
class MyViewBinder implements ViewBinder
{
/**
     * view：要板頂資料的視圖
     * data：要綁定到視圖的資料
     * textRepresentation：一個表示所支援資料的安全的字串，結果是data.toString()或Null 字元串，但不能是Null
     * 傳回值：如果資料繫結到視圖返回真，否則返回假
*/
    @Override
public boolean setViewValue(View view, Object data,
            String textRepresentation) {
if((view instanceof ImageView)&(data instanceof Bitmap))
        {
            ImageView iv = (ImageView)view;
            Bitmap bmp = (Bitmap)data;
            iv.setImageBitmap(bmp);
return true;
        }
return false;
    }


}

運行結果：

 

文章精選：

農民伯伯：http://www.cnblogs.com/over140/archive/2010/11/24/1886151.html

http://www.cnblogs.com/over140/archive/2010/12/15/1906303.html

ViewBinder解決方案：http://www.anddev.org/listview_simpleadapter_and_bitmaps_-_bug_-t11817.html