[Android] 如何在TabWidget中加入ListView

對於設計Android的使用者介面來說 , TabWidget 和 ListView 都是使用頻率很高
的View , 在Android 模擬器中也會常常看的到 , 而現在就是想把這兩個View結合
在一起呈現 , 如下圖一樣。

分別有東西區先發球員的兩個Tab , 然後內容使用ListView來呈現球員名單

此外在底下再放置兩個Button , 日後可以用來新增刪除資料

首先直接來看 Layout 檔案

這邊Layout佈局的原因可以搭配著官網的Hello , TabWidget 來看, 首先需要TabHost來裝載整個Activity所要呈現的物件 , 而TabHost有兩個必要的元件 , 分別是TabWidget 和 FrameLayout , 那麼把他放在一個直立方向(Vertical)的LinearLayout 中而根據切換到不同的Tab , 我們想要呈現不一樣的內容 , 而這些不一樣的內容就擺在FrameLayout 裡面 , 因為FrameLayout 的佈局本來就有"層次"的概念 , 所以蠻好理解的接著要注意的就是 , TabWidget 的ID一定要是tabs 而 FrameLayout的ID名稱一定要為tabcontent 否則會出錯 , 然後放入兩個ListView , 此外在外面的LinearLayout 中, 再擺一個LinearLayout(水平方向) , 裡面放入兩個Button 就完成 Layout佈局了。


接著回到我們的程式碼中

import android.app.TabActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TabHost;


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);
        // 分別為東西區先發球元的資料要當作ListView 的內容        
        // res/values/strings.xml 已經宣告了string-array
               
        
        //首先我們先處理ListView所要呈現的內容
              
        
        ListEPlayer = (ListView) findViewById(R.id.ListViewEast);
        ListEPlayer.setAdapter(new ArrayAdapter(this , android.R.layout.simple_list_item_1 , EPlayer));
        
        // ListView中Item的內容是需要Adapter來連接的
        // 所以現在把要呈現在ListView中的Item (String[] EPlayer)
        // 和範本 android.R.layout.simple_list_item_1 都丟入接收器ArrayAdapter中
        // 除了ArrayAdapter之外還有許多其他的接受器像是SimpleAdapter等等
        
        
        ListEPlayer.setTextFilterEnabled(true);
        //添加按鍵過濾的功能
         
        
        ListWPlayer = (ListView) findViewById(R.id.ListViewWest);
        ListWPlayer.setAdapter(new ArrayAdapter(this , android.R.layout.simple_list_item_1 , WPlayer));
        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;
}

如果對於註解中提到的按鍵過濾不清楚的話 , 可以參考盧老師的
如何在 ListView 上加上按鍵過濾的功能這篇文章


到這邊就完成了一開始圖片所呈現的佈局了 , 可是我們可以發現最下面一筆資料會被
Button擋住 , 造成我們需要移動捲軸 , 可不可以把每一列的TextView改小呢?
偶然看到盧老師的這篇文章:親愛的，我把 AutoCompleteTextView 縮小了
裡面提到把Android Native Layout:simple_list_item_1.xml 抓出來修改
就可以對TextView的格式作更改了 , 所以我們可以自己做一個TextView格式
的xml檔案 , 然後擺在res/layout中當範本 , 這個檔案可以在下面的目錄找到
Your_Android_SDK_Location\platforms\android-Version\data\res\layout


原始的 simple_list_item_1 內容如下

對內容稍作修改 , 順便修改檔名

接著把程式碼稍作修改

ListEPlayer.setAdapter(new ArrayAdapter(this , R.layout.simplelistitem1 , EPlayer));
ListWPlayer.setAdapter(new ArrayAdapter(this , R.layout.simplelistitem1 , WPlayer));

下圖是修改後的佈局結果

下一篇文章會提到在對ListView每一列作修改不要只單純顯示文字 , 另外再對選擇item作事件判斷

相關文章:

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

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