BloggerAds

2012年8月13日 星期一

Android-ListView 進階用法(加入排版)

首先先準備兩個Layout XML檔

1.要顯示ListView的Layout--------------------------------------------------------------


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
           android:layout_width="fill_parent"
           android:layout_height="fill_parent"
           android:orientation="vertical" >


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

</LinearLayout>


 


2.ListView裡面每一個item的排版Layout-------------------------------------------------


<?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:background="@drawable/listview_back"
           >


           <ImageView
                      android:id="@+id/imageView1"
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:layout_alignParentLeft="true"
                      android:layout_alignParentTop="true"
                      android:layout_alignBottom="@+id/textView_context"
                      android:src="@drawable/person_default" />


           <TextView
                      android:id="@+id/textView_name"
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:layout_alignParentTop="true"
                      android:layout_toRightOf="@+id/imageView1"
                      android:text="Name"
                      android:textAppearance="?android:attr/textAppearanceLarge" />


           <TextView
                      android:id="@+id/textView_phone"
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:layout_alignLeft="@+id/textView_name"
                      android:layout_below="@+id/textView_name"
                      android:text="PhoneNumber"
                      android:textAppearance="?android:attr/textAppearanceMedium" />


           <TextView
                      android:id="@+id/textView_address"
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:layout_alignLeft="@+id/textView_phone"
                      android:layout_below="@+id/textView_phone"
                      android:text="Address"
                      android:textAppearance="?android:attr/textAppearanceSmall" />


           <TextView
                      android:id="@+id/textView_context"
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:layout_alignLeft="@+id/textView_address"
                      android:layout_below="@+id/textView_address"
                      android:text="OrderInfo"
                      android:textAppearance="?android:attr/textAppearanceSmall" />



</RelativeLayout>


 3.再來就是Activity的部分--------------------------------------------------------


a.準備陣列


你上面第二個Layout(ListView item 用的 Layout)


裡面有幾個元件 你就要準備幾個陣列


如上來說 裡面總共有5個元件 (1個ImageView 4個TextView)


那我們Activity裡要先準備 


1個 int[] (ImageView用的)  內容舉例 : int[] image = {R.drawable.image1,R.drawable.image2.......}


4個 String[] (TextView用的) 內容舉例 : String[] name = {"Mazs","Louis","Mary"......} 


b.設定List<Map<String, Object>> ,用for 把item put進去 item.put(代表的標籤,所對應陣列),for跑的次數是ListView 的 item數




List<Map<String, Object>> items = new ArrayList<Map<String, Object>>();
for (int i = 0; i < image.length; i++) {
Map item = new HashMap();
item.put("image", image[i]);
item.put("name", name[i]);
item.put("phone", phone[i]);
item.put("address", address[i]);
item.put("orderInfo", orderInfo[i]);
items.add(item);
}


c.將b的List 設定進 SimpleAdapter,  格式是 :


new SimpleAdapter(目前的Activity ,   第b點的List ,  上面所定義給ListView item的Layout ,   第b點List所用的標籤的陣列 ,   元件依序排列的int陣列




  SimpleAdapter simpleAdapter = new SimpleAdapter(this,  items, R.layout.search_listview, new String[]{"image", "name","phone","address","orderInfo"},
new int[]{R.id.imageView1, R.id.textView_name,R.id.textView_phone,R.id.textView_address,R.id.textView_context});

d.最後一步 將simpleAdapter set進 ListView裡


listView1.setAdapter(simpleAdapter);

重點來了 如果你的需求是按下ListView的Item時或類似的行為時 要控制裡面的元件的話 那就要自定義Adapter 不會很複雜 你只要覆寫裡面的建構子 跟 getView方法就好


 主程式:


 ListViewItemAdapter simpleAdapter = new ListViewItemAdapter(model_select.this, 
items, R.layout.model_select_listview_item, new String[]{"image","name"},
new int[]{R.id.model_select_listview_imageView1,R.id.model_select_listview_textView1},click);


自定義的SimpleAdapter(此範例裡的getView是我按的那個item的圖片要顯示 其他的要隱藏,每個案例不同 需自己改寫)


public class ListViewItemAdapter extends SimpleAdapter {
private Context context = null;
private ArrayList<HashMap> data = null;
private int itemLayout ;
private String[] componentTagAry = null;
private int[] componentXMLIDAry = null;
private boolean[] click = null;

/**
*
* @param context
* @param data
* @param resource
* @param from [Image,TextView]
* @param to [Image,TextView]
* @param click 是否click
*/
public ListViewItemAdapter(Context context,
ArrayList<HashMap> data, int resource, String[] from,
int[] to,boolean[] click) {
super(context, data, resource, from, to);

this.context = context;
this.data = data;
this.itemLayout = resource;
this.componentTagAry = from;
this.componentXMLIDAry = to;
this.click = click;

}

public View getView(final int position, View convertView, ViewGroup parent) {

LayoutInflater factory = LayoutInflater.from(context);
HashMap item = (HashMap) data.get(position);
View itemView = factory.inflate(itemLayout, parent, false);

final ImageView imageView = (ImageView) itemView.findViewById(componentXMLIDAry[0]);
TextView textView = (TextView) itemView.findViewById(componentXMLIDAry[1]);

textView.setText(item.get(componentTagAry[1]).toString());
textView.setTag(item);

//以上都是固定寫法,下面是我特殊案例的改寫,可依照自己的需求去寫
itemView.setOnClickListener(new OnClickListener(){

public void onClick(View v) {

if(click[position]){//如果有click
imageView.setVisibility(0);//設為可見的
}else{
imageView.setVisibility(4);//設為不可見的
}

}

});

return itemView;


}

}