[Android] 如何自訂ListView的內容 (使用ArrayAdapter同時加入Image和Text)

這邊的程式碼延續上一篇文章的結果 , 如果說我們現在想要在ListView中每一個row
所呈現的資料內容更豐富些 , 不單單只有文字還想加入圖片 , 並且選取ListView裡的
資料時能觸發Click事件 , 如下圖TitleBar會顯示我們所選擇的球員

首先我們要自訂ListView中row的資料呈現內容 , 上圖是在左邊擺了一個ImageView然後右上方擺一個TextView , 下方也擺一個TextSize較小的TextView , 為了達成這樣的效果 , 我們必須把想呈現的佈局方式寫在一個Layout xml檔案裡 , 如下

將row裡該呈現的佈局都搞定之後 , 接下來就是程式碼的部分

import android.app.TabActivity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TabHost;
import android.widget.TextView;
import android.widget.AdapterView.OnItemClickListener;


public class TabWidgetListViewTest extends TabActivity
{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    
        EPlayer = getResources().getStringArray(R.array.EPlayer);
        WPlayer = getResources().getStringArray(R.array.WPlayer);
        Postion = getResources().getStringArray(R.array.Position);
        // 分別將東西區先發球員和球員位置的資料當作ListView 的內容        
        // res/values/strings.xml 已經宣告了string-array
        
        icons = new int[]{R.drawable.marketplace , R.drawable.email , R.drawable.contacts , R.drawable.mms , R.drawable.application};
        
        
        // 首先我們先處理ListView所要呈現的內容
              
        
        ListEPlayer = (ListView) findViewById(R.id.ListViewEast);
        ListEPlayer.setAdapter(new IconTextAdapter(this , android.R.layout.simple_list_item_1 , EPlayer , Postion , icons));
        ListEPlayer.setOnItemClickListener(OICL);
        
        // 這邊的例子選用原本的範本 android.R.layout.simple_list_item_1 
        // 然後都丟入我們自己的接收器IconTextAdapter中 , 參數多了一個String[] Position
        // 然後再判斷Item點擊事件
        
        
        ListEPlayer.setTextFilterEnabled(true);
        //添加按鍵過濾的功能
         
        
        ListWPlayer = (ListView) findViewById(R.id.ListViewWest);
        ListWPlayer.setAdapter(new IconTextAdapter(this , android.R.layout.simple_list_item_1 , WPlayer , Postion , icons));
        ListWPlayer.setOnItemClickListener(OICL);
        ListWPlayer.setTextFilterEnabled(true);
        //對另一個ListView做同樣的操作載入西區先發球員的資料
        
        mTabHost = getTabHost();
        //我們的TabWidgetListViewTest 是繼承 TabActivity的
 //所以這邊是透過他的method getTabHost()
 //來取得我們在main.xml中宣告的TabHost
 
        
        mTabHost.addTab(mTabHost.newTabSpec("tab_test1")
          //將Tab加入我們要的資料
          .setIndicator("東區先發球員" , this.getResources().getDrawable(R.drawable.aemail))
          //在Tab上標示名稱和加上Icon
          .setContent(R.id.ListViewEast));
                //Tab內容為main.xml檔案中宣告的ListView , 而ListView的內容我們先前已經處理好了
        
        mTabHost.addTab(mTabHost.newTabSpec("tab_test2").setIndicator("西區先發球員" , this.getResources().getDrawable(R.drawable.browser)).setContent(R.id.ListViewWest));
         
        mTabHost.setCurrentTab(0);
        //預設該顯示哪個Tab的資料
    }
    
    TabHost mTabHost;
    ListView ListEPlayer , ListWPlayer;
    String[] EPlayer , WPlayer , Postion;
    int[] icons;
    
    public class IconTextAdapter extends ArrayAdapter
    {
        int[] icons;
        String[] textname , textpostion;
        
  public IconTextAdapter(Context context, int textViewResourceId, String[] itemname, String[] itempostion , int[] images)
  {
   super(context, textViewResourceId, itemname);
   icons = images;
   textname = itemname;
   textpostion = itempostion;
  }
  
  public View getView(int position, View convertView, ViewGroup parent)
   {
            View rowview = convertView;
            if (rowview == null) {
                    LayoutInflater inflater = getLayoutInflater();
                    rowview = inflater.inflate(R.layout.listviewrow, parent, false);
                    //為了要把xml所描述的Layout轉變為View , 也就是我們要的rowview
                    //所以必須使用LayoutInflater來轉化 , 而要取得LayoutInflater的Instance方式還包括
                    //LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                    //接著再使用inflate (int resource, ViewGroup root, boolean attachToRoot)
                    //傳回我們要的rowview
            }
            TextView Nmae = (TextView) rowview.findViewById(R.id.name);
            Nmae.setText(textname[position]);
                         
            TextView Postion = (TextView) rowview.findViewById(R.id.position);
            Postion.setText(textpostion[position]);
            
            ImageView icon = (ImageView) rowview.findViewById(R.id.icon);
            icon.setImageResource(icons[position]);
            
            // 我們在listviewrow.xml裡已經把ListView中Row的佈局都排好了 
            // 而這裡的rowview可以想成是之前被我們在佈局中組合出來的
            // 現在我們要為rowview裡面的元件設定Text和Icon
            // 最後再回傳rowview作為ListView中每一個row的顯示內容
            
            
            return rowview;
        }
     }

    public OnItemClickListener OICL =  new OnItemClickListener()
    {
  @Override
  public void onItemClick(AdapterView parent, View view, int position, long id)
  {
   String where;
   if(parent.equals(ListEPlayer))
   where = "你選擇了東區的";   
   else
   where = "你選擇了西區的";
   setTitle(where + ((TextView)view.findViewById(R.id.position)).getText() 
            + ":" + parent.getItemAtPosition(position));
   
   // getItemAtPosition(position)在官網的敘述是這樣的
   // Gets the data associated with the specified position in the list.
   // 上面所說的the data就是當初我們 super(context, textViewResourceId, itemname);
   // 所回傳的itemname了 , 可以參考父類別ArrayAdapter的建構子
   // ArrayAdapter(Context context, int textViewResourceId, T[] objects)
   
  }  
    };     
}

關鍵字: LayoutInflater , LayoutInflater.inflate() , ArrayAdapter

相關文章:

[Android] 如何在TabWidget中加入ListView

[Android] 如何自訂ListView的內容 (使用SimpleAdapter同時加入Image和Text)