2010年11月14日 星期日

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



這篇的內容是修改自前面的 [Android Tips] 如何自訂ListView的內容 (使用ArrayAdapter同時加入Image和Text)這篇主旨是要使用SimpleAdapter來實現 , 此外可以動態的新增和刪除資料 , 首先Layout檔案的內容沒有更改和之前的文章一樣 , 至於程式碼的部分如下




package com.android;

import java.util.ArrayList;
import java.util.HashMap;
import android.app.TabActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.Button;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.TabHost;
import android.widget.TextView;
import android.widget.AdapterView.OnItemClickListener;


public class TabWidgetListViewTest extends TabActivity implements Button.OnClickListener
{
    /** 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所要呈現的內容            
        
        ListTextImageItemEast = new ArrayList[HashMap[String, Object]();  
        //宣告ArrayList裡面的元素為HashMap
        
        for(int i = 0;i < 5;i++)  
        {  
          HashMap[String, Object] map = new HashMap[String, Object](); 
          // key使用String變數 , element存放Object元素
          map.put("ImageItem", icons[i]); 
          map.put("PlayerItem",EPlayer[i]); 
          map.put("PostionItem", Postion[i]);  
          ListTextImageItemEast.add(map); // 加入到ArrayList中 
        }
        
        ListEPlayer = (ListView) findViewById(R.id.ListViewEast);
        SAE = new SimpleAdapter(this,   
          ListTextImageItemEast, //使用的ArrayList
                R.layout.listviewrow, //相對應的Layout檔案
                new String[] {"ImageItem","PlayerItem","PostionItem"},   
                new int[] {R.id.icon,R.id.name,R.id.position});  
                // 每個HashMap中的Title對應到RowView裡的subView Id
        ListEPlayer.setAdapter(SAE);  
        ListEPlayer.setOnItemClickListener(OICL);
        //然後再判斷Item點擊事件
        
        ListEPlayer.setTextFilterEnabled(true);
        //添加按鍵過濾的功能
         
        
        ListWPlayer = (ListView) findViewById(R.id.ListViewWest);
        ListTextImageItemWest = new ArrayList[HashMap[String, Object]]();  
        
        for(int i = 0;i < 5;i++)  
        {  
          HashMap[String, Object] map = new HashMap[String, Object]();  
          map.put("ImageItem", icons[i]);
          map.put("PlayerItem",WPlayer[i]);  
          map.put("PostionItem", Postion[i]);  
          ListTextImageItemWest.add(map);  
        }
        
        ListWPlayer = (ListView) findViewById(R.id.ListViewWest);
        SAW = new SimpleAdapter(this,   
          ListTextImageItemWest,
                R.layout.listviewrow,
                new String[] {"ImageItem","PlayerItem", "PostionItem"},   
               
                new int[] {R.id.icon,R.id.name,R.id.position});  
 
        ListWPlayer.setAdapter(SAW);  
        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的資料
        
        Button buttongernerate = (Button) findViewById(R.id.buttongernerate);
        Button buttondelete = (Button) findViewById(R.id.buttondelete);
        buttongernerate.setOnClickListener(this);
        buttondelete.setOnClickListener(this);
        //對新增和刪除按鈕設置點擊事件
    }
    
    TabHost mTabHost;
    ListView ListEPlayer , ListWPlayer , TempLV;
    SimpleAdapter SAE , SAW , TempA;
    String[] EPlayer , WPlayer , Postion;
    int[] icons;
    ArrayList[HashMap[String, Object]] ListTextImageItemEast;
    ArrayList[HashMap[String, Object]] ListTextImageItemWest;
    
    HashMap TempHMap;    
    boolean Choose = false; //按鈕開關
    int TempPosition;
    
    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 = "你選擇了西區的";
   
   TempHMap = (HashMap [String, Object]) parent.getItemAtPosition(position);
   
   setTitle(where + ((TextView)view.findViewById(R.id.position)).getText() 
            + ":" + TempHMap.get("PlayerItem"));
   //這邊提供兩種方法來取得被點選RowView的內容
   
   /*
    * 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)
    * */
   TempLV = (ListView) parent;
   TempPosition = position;
   Choose = true;
  }  
    };

 @Override
 public void onClick(View ButtonView)
 {
  // TODO Auto-generated method stub
  
  if(Choose)
  {
   switch(ButtonView.getId())
   {
       case R.id.buttongernerate: //新增所選擇的資料           
     if(TempLV.equals(ListEPlayer))
     {
      ListTextImageItemEast.add(TempHMap);;
      TempA = SAE;
     }
     else
     {
      ListTextImageItemWest.add(TempHMap);;
      TempA = SAW;
     }
     TempA.notifyDataSetChanged();
      //提醒SimpleAdapter作資料得更新
    break;
    
       case R.id.buttondelete: //刪除所選擇的資料
        if(TempLV.equals(ListEPlayer))
     {
         ListTextImageItemEast.remove(TempPosition);
      TempA = SAE;
     }
     else
     {
      ListTextImageItemWest.remove(TempPosition);
      TempA = SAW;
     }
        TempA.notifyDataSetChanged();
       break;
   }
  }
  Choose = false;
  //Log.d("Choose" , Choose+"");
 }
}

當你點選了ListView中的Item之後 , 新增或是刪除的按鈕才會發揮作用


此外為了避免 HTML Tag is broken的錯誤 , 所以使用[] 代替<> , 程式要能work需要作符號的修改



相關文章:

[Android Tips] 如何在TabWidget中加入ListView


沒有留言:

張貼留言

Google Analytics