Android學習_客製化ListView_加上Button

正覺得iOS寫的順手時，又很快樂的轉換回Android，最不習慣的莫過於介面上的配置，iOS幫開發者很貼心的加上許多美工部分，我們可以較容易地做出好看又顯專業的介面，但Android就必須要花很多時間在介面的配置上，其中包含許多設定上的小技巧，才能讓美感不佳如我的人做出差強人意的畫面。而在Android裡ListView可以說是一個倘若做的好，程式先有60分的一個重要控制項，所以這次花了很多時間在ListView上面，先看效果：

如標題所說，本篇主要介紹如何做出含有按鈕之ListView。

正文-------------------------------------------------
在iOS的UITableView中，有一種預設的模式會有文字與一個小圖示：

若是直接點擊文字或是空白處，會觸發didSelectRowAtIndexPath，若點擊旁邊的小圖示，則會觸發accessoryButtonTappendForRowWithIndexPath，所以在GIS系統開發上，就可以很容易的將定位與顯示屬性分別在這兩個事件上實現，提供使用者一個很不錯的操作方式。

但反觀Android，這樣的需求就必須要經過自己重新撰寫，才能達到類似的效果；在之前曾經有發過相關文章，這篇剛好可以補足完整客製化時的教學。
一維陣列：Android學習_ArrayAdapter的使用
自行處理的二維陣列：Android學習_SimpleAdapter的使用
Cursor的處理：Android學習_SimpleCursorAdapter的使用
光是單純的變化都需要自行實作，更何況在ListView上面加個與事件綁定的小圖示。

--------------------------實作-------------------------
所以本篇的目標，就是客製化一個帶有按鈕的ListView，目標像下面這張：

可以顯示相關小圖示，主要標題、副標與一個帶有事件的按鈕。

觀念：觀察要將資料放入ListView的方法是setAdapter(adapter)，所以唯一方法即是客製化adapter。

步驟：
1. 一個依照需求設計好的adapter.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="3dip"
android:descendantFocusability="blocksDescendants" >

<ImageView
android:id="@+id/ItemImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dip"
android:contentDescription="@string/adapter_btnText"
/>

<LinearLayout android:layout_toRightOf="@id/ItemImage"
android:layout_toLeftOf="@+id/ItemButton"
android:layout_alignTop="@+id/ItemImage"
android:layout_alignBottom="@+id/ItemImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">

<TextView
android:id="@+id/ItemName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left|center_vertical"
android:textSize="20dip"
/>

<TextView
android:id="@+id/ItemInfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left|center_vertical"
android:textSize="20dip"
/>
</LinearLayout>

<Button android:id="@+id/ItemButton"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="@drawable/ic_launcher"
android:contentDescription="@string/adapter_btnText"
/>

</RelativeLayout>

2. 建立一個繼承於Adapter的類別(本篇使用BaseAdapter)


可以看到若是繼承於BaseAdapter，預設會有四個方法：
A. public int getCount()
B. public Object getItem(int position)
C. public long getItemId(int position)
D. public View getView(int position, View convertView, ViewGroup parent)
當中最重要的方法是getView，該方法會在每次重新繪製ListView任一個Item時被呼叫，也就是說我們要客製化每一列，就必須在這個方法中描繪我們需要的內容，並返回一個處理好的View。

除了上述四個方法必須要複寫外，通常還會增加一個建構函式，在建立該Adapter時將所需要的外部變數丟入，也就是丟入我們要顯示的值與圖案。

最後，因為我們希望除了點擊ListView可以有反應外，點擊自己加上的按鈕也可以有相對應的事件觸發，所以需要增加一個OnClickListener來監聽。

程式碼：

package tw.com.wangshifu.ola;

import java.util.ArrayList;
import java.util.HashMap;
import android.content.Context;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

public class lv_BtnAdapter extends BaseAdapter {

private ArrayList<HashMap<String, Object>> mAppList;
private LayoutInflater mInflater;
private Context mContext;
private String[] keyString;
private int[] valueViewID;

private ItemView itemView;

private class ItemView {
ImageView ItemImage;
TextView ItemName;
TextView ItemInfo;
Button ItemButton;
}

public lv_BtnAdapter(Context c, ArrayList<HashMap<String, Object>> appList, int resource, String[] from, int[] to) {
mAppList = appList;
mContext = c;
mInflater = (LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
keyString = new String[from.length];
valueViewID = new int[to.length];
System.arraycopy(from, 0, keyString, 0, from.length);
System.arraycopy(to, 0, valueViewID, 0, to.length);
}

@Override
public int getCount() {
// TODO Auto-generated method stub
//return 0;
return mAppList.size();
}

@Override
public Object getItem(int position) {
// TODO Auto-generated method stub
//return null;
return mAppList.get(position);
}

@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
//return 0;
return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
//return null;

if (convertView != null) {
itemView = (ItemView) convertView.getTag();
} else {
convertView = mInflater.inflate(R.layout.adapter_button, null);
itemView = new ItemView();
itemView.ItemImage = (ImageView)convertView.findViewById(valueViewID[0]);
itemView.ItemName = (TextView)convertView.findViewById(valueViewID[1]);
itemView.ItemInfo = (TextView)convertView.findViewById(valueViewID[2]);
itemView.ItemButton = (Button)convertView.findViewById(valueViewID[3]);
convertView.setTag(itemView);
}

HashMap<String, Object> appInfo = mAppList.get(position);
if (appInfo != null) {

int mid = (Integer)appInfo.get(keyString[0]);
String name = (String) appInfo.get(keyString[1]);
String info = (String) appInfo.get(keyString[2]);
int bid = (Integer)appInfo.get(keyString[3]);
itemView.ItemName.setText(name);
itemView.ItemInfo.setText(info);
itemView.ItemImage.setImageDrawable(itemView.ItemImage.getResources().getDrawable(mid));
itemView.ItemButton.setBackgroundDrawable(itemView.ItemButton.getResources().getDrawable(bid));
itemView.ItemButton.setOnClickListener(new ItemButton_Click(position));
}

return convertView;
}

class ItemButton_Click implements OnClickListener {
private int position;

ItemButton_Click(int pos) {
position = pos;
}

@Override
public void onClick(View v) {
int vid=v.getId();
if (vid == itemView.ItemButton.getId())
Log.v("ola_log",String.valueOf(position) );
}
}
}

3. 使用步驟二所建立的adapter，置入ListView中
我們用簡單的迴圈模擬外部要放入的資料，並且將剛剛所建立的adapter new起來：

protected void putDataToListView()
{
ArrayList<HashMap<String, Object>> Item = new ArrayList<HashMap<String, Object>>();
for(int i=0; i<20; i++)
{
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("ItemImage", R.drawable.ic_launcher);
map.put("ItemName", "Name");
map.put("ItemInfo", "Info");
map.put("ItemButton", R.drawable.ic_launcher);
Item.add(map);
}

lv_BtnAdapter Btnadapter = new lv_BtnAdapter(
this,
Item,
R.layout.adapter_button,
new String[] {"ItemImage","ItemName", "ItemInfo","ItemButton"},
new int[] {R.id.ItemImage,R.id.ItemName,R.id.ItemInfo,R.id.ItemButton}
);
lv.setAdapter(Btnadapter);
}

效果：

稍微對於輸入的內容做些變更，就可以看出客製化的效果：

最後的列表效果可以說是非常之讚。