Android ListView 常用用法（三）

標籤：android   style   blog   http   io   ar   color   os   使用   

SimpleAdapter

simpleAdapter的擴充性最好，可以定義各種各樣的布局出來，可以放上ImageView（圖片），還可以放上Button（按鈕），CheckBox（複選框）等等。下面的代碼都直接繼承了ListActivity，ListActivity和普通的Activity沒有太大的差別，不同就是對顯示ListView做了許多最佳化，方面顯示而已。

下面的程式是實現一個帶有圖片的類表。

首先需要定義好一個用來顯示每一個列內容的xml

vlist.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=http://schemas.android.com/apk/res/android    android:orientation="horizontal" 
　　 android:layout_width="fill_parent"    android:layout_height="fill_parent">
    <ImageView 
　　　　 android:id="@+id/img"         android:layout_width="wrap_content"        android:layout_height="wrap_content"         android:layout_margin="5px"/>
    <LinearLayout
　　　　 android:orientation="vertical"        android:layout_width="wrap_content"         android:layout_height="wrap_content">        <TextView 
　　　　　　　android:id="@+id/title"             android:layout_width="wrap_content"            android:layout_height="wrap_content"             android:textColor="#FFFFFFFF"            android:textSize="22px" />        <TextView 
　　　　　　　android:id="@+id/info"             android:layout_width="wrap_content"            android:layout_height="wrap_content"             android:textColor="#FFFFFFFF"            android:textSize="13px" />     </LinearLayout>
</LinearLayout>

　　下面是實現代碼：

public class MyListView3 extends ListActivity {    // private List<String> data = new ArrayList<String>();    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        SimpleAdapter adapter = new SimpleAdapter(this,getData(),R.layout.vlist,                new String[]{"title","info","img"},                new int[]{R.id.title,R.id.info,R.id.img});
        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("title", "G1");        map.put("info", "google 1");        map.put("img", R.drawable.i1);        list.add(map);        map = new HashMap<String, Object>();        map.put("title", "G2");        map.put("info", "google 2");        map.put("img", R.drawable.i2);        list.add(map);        map = new HashMap<String, Object>();        map.put("title", "G3");        map.put("info", "google 3");        map.put("img", R.drawable.i3);        list.add(map);
        return list;    }}

　　

使用simpleAdapter的資料用一般都是HashMap構成的List，list的每一節對應ListView的每一行。HashMap的每個索引值資料對應到布局檔案中對應id的組件上。因為系統沒有對應的布局檔案可用，我們可以自己定義一個布局vlist.xml。下面做適配，new一個SimpleAdapter參數一次是：this，布局檔案（vlist.xml），HashMap的 title 和 info，img。布局檔案的組件id，title，info，img。布局檔案的各組件分別映射到HashMap的各元素上，完成適配。

運行效果如：

 

有按鈕的ListView

但是有時候，列表不光會用來做顯示用，我們同樣可以在在上面添加按鈕。添加按鈕首先要寫一個有按鈕的xml檔案，然後自然會想到用上面的方法定義一個適配器，然後將資料對應到布局檔案上。但是事實並非這樣，因為按鈕是無法映射的，即使你成功的用布局檔案顯示出了按鈕也無法添加按鈕的響應，這時就要研究一下ListView是如何現實的了，而且必須要重寫一個類繼承BaseAdapter。下面的樣本將顯示一個按鈕和一個圖片，兩行字如果單擊按鈕將刪除此按鈕的所在行。並告訴你ListView究竟是如何工作的。效果如下：

vlist2.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=http://schemas.android.com/apk/res/android    android:orientation="horizontal"     android:layout_width="fill_parent"    android:layout_height="fill_parent">     <ImageView android:id="@+id/img"         android:layout_width="wrap_content"        android:layout_height="wrap_content"         android:layout_margin="5px"/>     <LinearLayout 
　　　　　android:orientation="vertical"        android:layout_width="wrap_content"         android:layout_height="wrap_content">        <TextView 
　　　　　　　android:id="@+id/title"             android:layout_width="wrap_content"            android:layout_height="wrap_content"             android:textColor="#FFFFFFFF"            android:textSize="22px" />        <TextView
　　　　　　　android:id="@+id/info"             android:layout_width="wrap_content"            android:layout_height="wrap_content"             android:textColor="#FFFFFFFF"            android:textSize="13px" />    </LinearLayout>    <Button 
　　　　　android:id="@+id/view_btn"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/s_view_btn"        android:layout_gravity="bottom|right" /></LinearLayout>

　　程式碼：

public class MyListView4 extends ListActivity {    private List<Map<String, Object>> mData;
    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        mData = getData();        MyAdapter adapter = new MyAdapter(this);        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("title", "G1");        map.put("info", "google 1");        map.put("img", R.drawable.i1);        list.add(map);         map = new HashMap<String, Object>();        map.put("title", "G2");        map.put("info", "google 2");        map.put("img", R.drawable.i2);        list.add(map);        map = new HashMap<String, Object>();        map.put("title", "G3");        map.put("info", "google 3");        map.put("img", R.drawable.i3);        list.add(map);        return list;    }    // ListView 中某項被選中後的邏輯    @Override    protected void onListItemClick(ListView l, View v, int position, long id) {        Log.v("MyListView4-click", (String)mData.get(position).get("title"));    }
    /**     * listview中點擊按鍵彈出對話方塊     */    public void showInfo(){        new AlertDialog.Builder(this)        .setTitle("我的listview")        .setMessage("介紹...")        .setPositiveButton("確定", new DialogInterface.OnClickListener() {            @Override            public void onClick(DialogInterface dialog, int which) {            }        })        .show();         
    }     public final class ViewHolder{        public ImageView img;        public TextView title;        public TextView info;        public Button viewBtn;    }    public class MyAdapter extends BaseAdapter{        private LayoutInflater mInflater;                      public MyAdapter(Context context){            this.mInflater = LayoutInflater.from(context);        }        @Override        public int getCount() {            // TODO Auto-generated method stub            return mData.size();        }        @Override        public Object getItem(int arg0) {            // TODO Auto-generated method stub            return null;        }        @Override        public long getItemId(int arg0) {            // TODO Auto-generated method stub            return 0;        }
        @Override        public View getView(int position, View convertView, ViewGroup parent) {            ViewHolder holder = null;            if (convertView == null) {                holder=new ViewHolder();                  convertView = mInflater.inflate(R.layout.vlist2, null);                holder.img = (ImageView)convertView.findViewById(R.id.img);                holder.title = (TextView)convertView.findViewById(R.id.title);                holder.info = (TextView)convertView.findViewById(R.id.info);                holder.viewBtn = (Button)convertView.findViewById(R.id.view_btn);                convertView.setTag(holder);                           }else {                                 holder = (ViewHolder)convertView.getTag();            }            holder.img.setBackgroundResource((Integer)mData.get(position).get("img"));            holder.title.setText((String)mData.get(position).get("title"));            holder.info.setText((String)mData.get(position).get("info"));            holder.viewBtn.setOnClickListener(new View.OnClickListener() {                @Override                public void onClick(View v) {                    showInfo();                                 }            })；            return convertView;        }    }}

 下面將對上述代碼，做詳細的解釋，listView在開始繪製的時候，系統首先調用getCount（）函數，根據他的傳回值得到listView的長度（這也是為什麼在開始的第一張圖特別的標出列表長度），然後根據這個長度，調用getView（）逐一繪製每一行。如果你的getCount（）傳回值是0的話，列表將不顯示同樣return 1，就只顯示一行。

 系統顯示列表時，首先執行個體化一個適配器（這裡將執行個體化自訂的適配器）。當手動完成適配時，必須手動映射資料，這需要重寫getView（）方法。系統在繪製列表的每一行的時候將調用此方法。getView()有三個參數，position表示將顯示的是第幾行，covertView是從布局檔案中inflate來的布局。我們用LayoutInflater的方法將定義好的vlist2.xml檔案提取成View執行個體用來顯示。然後將xml檔案中的各個組件執行個體化（簡單的findViewById()方法）。這樣便可以將資料對應到各個組件上了。但是按鈕為了響應點擊事件，需要為它添加點擊監聽器，這樣就能捕獲點擊事件。至此一個自訂的listView就完成了，現在讓我們回過頭從新審視這個過程。系統要繪製ListView了，他首先獲得要繪製的這個列表的長度，然後開始繪製第一行，怎麼繪製呢？調用getView()函數。在這個函數裡面首先獲得一個View（實際上是一個ViewGroup），然後再執行個體並設定各個組件，顯示之。好了，繪製完這一行了。那再繪製下一行，直到繪完為止。在實際的運行過程中會發現listView的每一行沒有焦點了，這是因為Button搶奪了listView的焦點，只要布局檔案中將Button設定為沒有焦點就OK了。

運行效果如：

 

Android ListView 常用用法（三）