Customized ListView Adapter -- 自定 ListView Adapter

如果能自訂自己喜歡的ListView樣式，如下圖一樣，那一定是很不錯的感覺：

要達到上圖的效果，基本上只要做三件事，便大功完成：
  1、建立自己的adapter（MyCustomListViewAdapter.java）來連接（2）的xml;
  2、建立自己喜歡的單欄樣版(rowlayout.xml)：

  3、在主程式上(Cq_MyListViewExampleActivity)，將 main.xml 裡的 listview1 連接上自己製作的 adapter.
                                                     全部需要準備的檔如下：

（一）建立自已的adapter：
MyCustomListViewAdapter.java:

package com.cq.listview.example;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import android.widget.ImageView;

import android.widget.TextView;

public class MyCustomListViewAdapter extends ArrayAdapter<String>{

private final Context context;

private final CharSequence[] values1; //建立兩個參數陣列來接收主程式傳進來的兩個陣列

private final CharSequence [] values2;

   //建構子

   public MyCustomListViewAdapter(Context context, String [] strValues1, String [] strValues2) {

           super(context, android.R.layout.simple_list_item_1, values1);

          // TODO Auto-generated constructor stub

             this.context = context;

             this.values1 = strValues1;

             this.values2 = strValues2;

   }

   @Override

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

      // TODO Auto-generated method stub

          //取得.xml layout檔的資源，用來放入自設的欄位樣式( rowview)

          LayoutInflater inflater =

              (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
             

          View rowview = inflater.inflate(R.layout.exampleLayout, parent, false);

          TextView textview = 

                 (TextView)rowview.findViewById(R.id.textview01);  //連接上自設的樣式元素

          ImageView subtopicImageView = 

                (ImageView)rowview.findViewById(R.id.imageview01);

          String s1 = values1[position].toString(); //依次傳入值

          String s2 = strValues2[position].toString();

           //交錯圖檔

          if ((position + 2)%2 == 0){

                   imageview01.setImageResource(R.drawable.basketball);

                   }else if ((position + 2)%2 == 1){

                   imageview01.setImageResource(R.drawable.americanfootball);

                   }

         
           //將傳入的值顯示在textview上
           textview.setText(s1 + "  " + s2);

           return rowview; //傳出單一整個欄位的設置

           }

}

*********************************************
（二）、建立自己喜歡的單欄樣版：

照自己喜歡的方式，準備自定的樣式layout給自定的 listview 用 （如下: rowlayout.xml)。
請準備兩個圖檔(.png)，例如basketball.png, tennisball.png
rowlayout.xml:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="horizontal" >

    <ImageView

        android:id="@+id/imageview01"

        android:layout_width="30px"

        android:layout_height="30px"

        android:layout_marginLeft="4px"

        android:layout_marginRight="10px"

        android:layout_marginTop="4px"

        android:src="@drawable/americanfootball" >

    </ImageView>

    <TextView

        android:id="@+id/textview01"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@+id/label"

        android:textColor="@color/orange"

        android:textSize="20px" >

    </TextView>

</LinearLayout>

*********************************************************************

（三）、在主程式上，將 main.xml 裡的 listview 連接上自己製作的 adapter.
MainActivity.java (Cq_MyListViewExampleActivity)有兩個自定的String 陣列
(String [] firstStringArray, String [] secondStringArray)的參數，
將用來傳入以下的自設ListView Adapter:

package com.cq.listview.example;

import android.app.Activity;

import android.os.Bundle;

import android.widget.ListView;

public class Cq_MyListViewExampleActivity extends Activity {

    /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        

        //建立兩個字串陣列

        String [] firstStringArray = {"蘋果", "香吉士", "奇異果", "西洋梨", "西瓜", "哈密瓜", 

                                                   "葡萄", "杏子", "琵琶", "甘蔗"};

        String [] secondStringArray = {"apples", "oranges", "kiwi", "pears", "watermelon", 

                                                      "cantaloupe", "grapes", "apricots", "loquats", "sugar cane" };

        

        //設ListView參數用以連結.xml的listview

        ListView listview = (ListView)findViewById(R.id.listView1);

        //自設的接口

        MyCustomListViewAdapter adapter = new MyCustomListViewAdapter(this, 

                             firstStringArray, secondStringArray);

        //將接口連接到ListView的參數

        listview.setAdapter(adapter);

    }

}

***********************************************************************
  附上 main.xml 檔的內容：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="ListView Example 3" />

    <ListView

        android:id="@+id/listView1"

        android:layout_width="match_parent"

        android:layout_height="wrap_content" >

    </ListView>

</LinearLayout>