使用定制的ArrayAdapter制作ListView的Items（翻譯）

Translated by:AcerWang    原文出自:customizing-android-listview-items-with-custom-arrayadapter  

背景介紹

　　對於現實世界中的商業移動應用來說，Android的ListView默認的界面外觀不是非常有吸引力。它只是使用了內部的TextView控件，在每個ListView的行（Row）里面傳遞了一個簡單的字符串而已。大多數應用，你會想要創建出富含圖形界面和呈現給用戶視覺體驗良好的應用。幸運地是，ListView 是一個非常強大的控件，由於有可定制的item 布局的幫助，它可以被定制從而輕松地適應你的需求。在本文中，我將向你展示怎樣創建一個定制的ListView  Item（有圖標，自定義的header布局）以及怎樣使用定制的ArrayAdapter將他們聯系起來。我也會向你展示一些性能優化的小方法來優化你的ListView控件的內存占用。下面用一個例子來展示：

　　　　　　圖1. 天氣圖　　　　　　　　　　　　　　　　　　　　　　　　　　　　圖2. 布局結構圖

 

　　　　　　　　　　　　

   一、項目布局

　　在Eclipse中，創建一個新的Android項目，使用默認的Activity和main.xml布局文件。在main.xml文件中，聲明一個ListView控件。

 main.xml文件:
 1 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android=http://schemas.android.com/apk/res/android
    android:orientation="vertical" 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#FFFFFF"> 
    
     <ListView
        android:id="@+id/listView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
</LinearLayout>

　　上面的代碼，使用了簡單的線性布局方式，內部垂直排列。聲明了一個ListView，占據整個父容器，他的android.layout_width和android.layout_width的屬性都為fill_parent。ListView有一個唯一的id:listView1，在MainActivity中將用來引用ListView控件。

　　為了創建定制的header，先在你的工程中創建一個新的xml布局文件：listview_header_row.xml，在里面聲明一個TextView控件，屬性值見下面的代碼。將會創建出一個白色字體，藍色背景的header。

listview_header_row.xml文件：  2 <?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"> 
        
     <TextView android:id="@+id/txtHeader"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center_vertical"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true"
        android:textStyle="bold"
        android:textSize="22dp"
        android:textColor="#FFFFFF"
        android:padding="10dp"
        android:text="Weather Photos"
        android:background="#336699" />

</LinearLayout>

　　為了創建定制的ListView的行樣式，先在你的工程中創建另一個xml布局文件：listview_item_row.xml。Android 會將這個文件的內容傳遞給每個ListView的item，你將可以自由的聲明任何你想添加進里面的控件。本文中，我使用了一個ImageView來顯示天氣圖標和一個TextView來顯示該條item的主題。下面是listview_item_row.xml文件的代碼：

listview_item_row.xml文件：  2 <?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"
    android:padding="10dp">
    
     <ImageView android:id="@+id/imgIcon"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:gravity="center_vertical"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true"
        android:layout_marginRight="15dp"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp" />
        
     <TextView android:id="@+id/txtTitle"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center_vertical"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true"
        android:textStyle="bold"
        android:textSize="22dp"
        android:textColor="#000000"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp" />
        
</LinearLayout>

　　本文中，我下載了一些32 X 32像素的PNG格式的圖標。如果你願意，你也可以使用你自己的圖標。准備好你的圖標，放到你工程的drawable-mdpi文件目錄下。接下來，在工程中新建一個java類，命名為Weather.java，這個類將用於創建一個定制的ArrayAdapter來綁定對象到ListView中。下面是Weather.java文件的代碼，它有兩個簡單的屬性icon和title，一個普通的構造函數用於初始化屬性。

二、項目程序開發

　　為了方便大家理解，我將程序結構流程畫出來：

　　　　　　　　　　　　圖3.  重要對象關系結構

Weather.java文件：  2 public class Weather {
    public int icon;
    public String title;
    public Weather(){
        super();
    }
    
    public Weather(int icon, String title) {
        super();
        this.icon = icon;
        this.title = title;
    }
}

　　注意，上面listview_item_row.xml文件有兩個View，對應於Weather類的兩個屬性。Weather類的屬性值將被顯示到這兩個View中。為了將這兩個View連接起來，你需要創建一個定制的ArrayAdapter，它繼承了Android的ArrayAdapter類，並重寫了getView方法。添加一個新的java類到你的工程中，命名為WeatherAdapter，具體的實現代碼如下：

WeatherAdapter.java文件：  2 public class WeatherAdapter extends ArrayAdapter<Weather>{

    Context context; 
    int layoutResourceId;    
    Weather data[] = null;
    
    public WeatherAdapter(Context context, int layoutResourceId, Weather[] data) {
        super(context, layoutResourceId, data);
        this.layoutResourceId = layoutResourceId;
        this.context = context;
        this.data = data;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View row = convertView;
        WeatherHolder holder = null;
        
        if(row == null)
        {
            LayoutInflater inflater = ((Activity)context).getLayoutInflater();
            row = inflater.inflate(layoutResourceId, parent, false);
            
            holder = new WeatherHolder();
            holder.imgIcon = (ImageView)row.findViewById(R.id.imgIcon);
            holder.txtTitle = (TextView)row.findViewById(R.id.txtTitle);
            
            row.setTag(holder);
        }
        else
        {
            holder = (WeatherHolder)row.getTag();
        }
        
        Weather weather = data[position];
        holder.txtTitle.setText(weather.title);
        holder.imgIcon.setImageResource(weather.icon);
        
        return row;
    }
    
    static class WeatherHolder
    {
        ImageView imgIcon;
        TextView txtTitle;
    }
}

　　在上面的代碼中，第一個比較重要的是類的構造函數有三個參數，第一個參數是Context對象（我們可以傳遞當前使用WeatherAdapter類的activity對象的引用，即MainActivity.this對象）；第二個參數是resource的id（它是我們想用來呈現每個ListView的item的布局文件的id），在本文中我將傳遞我創建的listview_item_row.xml布局文件的id；第三個參數是一個Weather對象的數組，用於為Adapter適配器提供顯示數據的數據源。

　　ArrayAdapter的getView方法被重寫了。這個方法將被ListView每個 item項調用來創建視圖View，它們的屬性是我們設置的。getView方法也使用了一個臨時的holder類（在WeatherAdapter類內部聲明的內部類），這個類將被用於緩存ImageView和TextView，以便它們能夠被ListView中的每行重用，這也會為我們帶來巨大的性能的提升，由於我們不斷地訪問兩個相同的views(ImageView和TextView)的屬性，我們不必為每個ListView的Item查找這兩個控件。上面的代碼也是用了Android內置的LayoutInflator來解析xml布局文件（用於動態加載xml布局文件，以便能夠查找其中的內容）。

　　最后一點代碼是我們應用的MainActivity。里面，我們使用了所有上面聲明的對象。下面是MainActivity.java文件的代碼：

MainActivity.java文件：  2 public class MainActivity extends Activity {

    private ListView listView1;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        Weather weather_data[] = new Weather[]
        {
            new Weather(R.drawable.weather_cloudy, "Cloudy"),
            new Weather(R.drawable.weather_showers, "Showers"),
            new Weather(R.drawable.weather_snow, "Snow"),
            new Weather(R.drawable.weather_storm, "Storm"),
            new Weather(R.drawable.weather_sunny, "Sunny")
        };
        
        WeatherAdapter adapter = new WeatherAdapter(this, 
                R.layout.listview_item_row, weather_data);
        
        
        listView1 = (ListView)findViewById(R.id.listView1);
         
        View header = (View)getLayoutInflater().inflate(R.layout.listview_header_row, null);
        listView1.addHeaderView(header);
        
        listView1.setAdapter(adapter);
    }

　　MainActivity.java文件中有幾個需要解釋下的地方，以便你能更好的理解。首先，我們創建了一個Weather對象的數組，icon和title被作為參數傳遞給了它的構造函數；接下來，WeatherAdapter對象被創建，listview_item_row.xml文件的id和Weather對象數組被傳遞給了它的構造函數。再一次，我們使用了Android的LayoutInflator來解析listview_item_row.xml布局文件。通過ListView的addHeaderView方法設置ListView的header信息。最后，我們傳遞定制的Adapter給ListView的setAdapter方法。到現在就可以構建、運行工程了。如果一切實現正確，你會看到下面的內容。

　　　　　　圖2. 運行效果

　　最近有一段時間沒寫東西了，真是罪過啊！翻譯之中有不當之處在所難免，大家相互學習。尊重原創，尊重知識，相信分享的力量！