Android入門之ListView (二)

Android入門之ListView 講的是如何製作一個具有兩行文字的自定義控制元件，作為ListView的Item的使用方法。這篇接下來也是圍繞ListView和Item，更加深入地介紹它們的用法。

首先，先來看看本文程式碼執行的結果，本文的Item比上一篇中的Item多出左邊的圖示：

main.xml的原始碼，跟上一篇的一樣，這裡就不作解釋了，直接貼出my_imageitem.xml的程式碼，就是它實現ImageItem的UI：

<? xml version = "1.0" encoding = "utf-8" ?>
< RelativeLayout
android:id = "@+id/RelativeLayout01"
android:layout_width = "fill_parent"
xmlns:android = "http://schemas.android.com/apk/res/android"
android:layout_height = "wrap_content"
android:paddingBottom = "4dip"
android:paddingLeft = "12dip" >
< ImageView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:id = "@+id/ItemImage" >
</ ImageView >
< TextView
android:text = "TextView01"
android:layout_height = "wrap_content"
android:textSize = "30dip"
android:layout_width = "fill_parent"
android:layout_toRightOf = "@+id/ItemImage"
android:id = "@+id/ItemTitle" >
</ TextView >
< TextView
android:text = "TextView02"
android:layout_height = "wrap_content"
android:layout_width = "fill_parent"
android:layout_toRightOf = "@+id/ItemImage"
android:layout_below = "@+id/ItemTitle"
android:id = "@+id/ItemText" >
</ TextView >
</ RelativeLayout >

<?xml
 version="1.0" encoding="utf-8"?>
<RelativeLayout 
         android:id="@+id/RelativeLayout01" 
         android:layout_width="fill_parent" 
         xmlns:android="http://schemas.android.com/apk/res/android" 
         android:layout_height="wrap_content" 
         android:paddingBottom="4dip" 
         android:paddingLeft="12dip">
         <ImageView 
               android:layout_width="wrap_content" 
               android:layout_height="wrap_content" 
               android:id="@+id/ItemImage"> 
         </ImageView>
         <TextView 
               android:text="TextView01" 
               android:layout_height="wrap_content" 
               android:textSize="30dip" 
               android:layout_width="fill_parent" 
               android:layout_toRightOf="@+id/ItemImage" 
               android:id="@+id/ItemTitle">
         </TextView>
         <TextView 
               android:text="TextView02" 
               android:layout_height="wrap_content" 
               android:layout_width="fill_parent" 
               android:layout_toRightOf="@+id/ItemImage" 
               android:layout_below="@+id/ItemTitle" 
               android:id="@+id/ItemText">
         </TextView>
</RelativeLayout>

解釋一下 my_imageitem.xml的程式碼：這裡使用了RelativeLayout佈局，控制元件的關鍵的屬性是：

ItemTitle的屬性 android:layout_toRightOf="@+id/ItemImage" ，ItemTitle在ItemImage的右邊；

ItemText的屬性 android:layout_toRightOf="@+id/ItemImage"，ItemText在ItemImage的右邊， android:layout_below="@+id/ItemTitle"， ItemText 在 ItemTitle的下面。

最後，貼出JAVA的原始碼，這裡的原始碼跟上一篇的很類似，只是修改了一部分，引入Item Image：

view plain copy to clipboard print ?

@Override
public void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.main);
//繫結XML中的ListView，作為Item的容器
ListView list = (ListView) findViewById(R.id.MyListView);
//生成動態陣列，並且轉載資料
ArrayList<HashMap<String, Object>> lstImageItem = new ArrayList<HashMap<String, Object>>();
for ( int i= 0 ;i< 10 ;i++)
{
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("ItemImage" , R.drawable.icon); //新增影象資源的ID
map.put("ItemTitle" , "This is Title....." );
map.put("ItemText" , "This is text....." );
lstImageItem.add(map);
}
//生成介面卡的ImageItem <====> 動態陣列的元素，兩者一一對應
SimpleAdapter saImageItems = new SimpleAdapter( this , //沒什麼解釋
lstImageItem,//資料來源
R.layout.my_imageitem,//ListItem的XML實現
//動態陣列與ImageItem對應的子項
new String[] { "ItemImage" , "ItemTitle" , "ItemText" },
//ImageItem的XML檔案裡面的一個ImageView,兩個TextView ID
new int [] {R.id.ItemImage,R.id.ItemTitle,R.id.ItemText});
//新增並且顯示
list.setAdapter(saImageItems);
}

Android入門之ListView (二)

相關文章