單元51 在Action Bar上建立Tab標籤頁

Presentation on theme: "單元51 在Action Bar上建立Tab標籤頁"— Presentation transcript:

1

2 單元51 在Action Bar上建立Tab標籤頁

3 Action Bar上建立Tab標籤頁 在Action Bar上建立Tab標籤頁需要用到Fragment物件。在Action Bar上建立Tab標籤頁的過程包含以下四項工作： 1. 每一個Tab標籤頁的操作介面和程式碼必須獨立建置成一個Fragment類別。每一個Fragment類別都有自己的介面佈局檔，該介面佈局檔就是Tab標籤頁的操作介面，Fragment類別中的程式碼必須各自設定自己的介面元件的事件listener。 2. 在主程式Activity的介面佈局檔中建立一個FrameLayout元件以供顯示Fragment物件。 3. 建立一個新類別實作ActionBar.TabListener介面，當我們在Action Bar中加入一個Tab標籤頁時，必須同時設定一個此類別的物件，當使用者切換Tab標籤時，系統會自動呼叫這個物件，我們在它的程式碼中完成Fragment切換的動作。 4. 將Action Bar設定為Tab標籤頁模式，另外也可以利用上一個單元介紹的Action Bar控制技巧來改變Action Bar的外觀。

4 範例程式 建立一個如下圖的操作介面。 4

5 範例程式 步驟一： 執行Eclipse新增一個新的Android程式專案，Min SDK Version欄位必須設定為11或以上。
步驟二： 在Eclipse左邊的專案檢視視窗中展開此程式專案，在「src/(套件路徑名稱)」資料夾上按下滑鼠右鍵，選擇New > Class便會出現新增類別對話盒，在Name欄位輸入「婚姻建議」的Fragment類別名稱，例如MarriSugFragment，然後按下Superclass欄位最右邊的Browse按鈕，在對話盒上方的欄位中輸入fragment，再點選下方清單中的Fragment類別，最後按下OK按鈕再按下Finish按鈕結束新增類別對話盒。 5

6 範例程式 步驟三： 新增的類別程式檔會自動顯示在程式碼編輯視窗中，先用滑鼠左鍵點選Class內部的程式碼，然後按下滑鼠右鍵，在出現的快選功能表中選擇Source > Override/Implement Methods…，在對話盒左邊的清單中會列出Fragment類別中還沒有使用的方法，請勾選其中的onActivityCreated()和onCreateView()然後按下OK按鈕。 步驟四： 開啟單元十六的範例程式檔，除了onCreate()方法的程式碼之外，複製Class內所有其它的程式碼，包括變數宣告，到上一個步驟的程式檔。 6

7 範例程式 步驟五： 將程式檔中的onActivityCreated()和onCreateView()二個方法中的程式碼編輯如下，其中的inflater.inflate()是設定此Fragment類別使用的介面佈局檔，這裡是指定使用res/layout/marri_sug.xml，在onActivityCreated()方法中呼叫setupViewComponent()完成所有介面元件的設定。 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // TODO Auto-generated method stub return inflater.inflate(R.layout.marri_sug, container, false); } public void onActivityCreated(Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); setupViewComponent(); 7

8 範例程式 步驟六： 用滑鼠右鍵點選程式專案的res/layout資料夾，選擇New > Android XML File，在出現的對話盒的File欄位輸入marri_sug然後按下Finish按鈕。新增的介面佈局檔會顯示在程式碼編輯視窗中，點選程式碼編輯視窗下面最右邊的Tab標籤切換成原始檔檢視模式，然後開啟單元十六範例程式的介面佈局檔，將其中的程式碼全部複製過來取代原來的程式碼。 步驟七： 開啟程式專案的res/values/strings.xml字串資源檔，將單元十六範例程式的字串資源檔中程式碼用到的字串，複製過來如下： <?xml version="1.0" encoding="utf-8"?> <resources> <string name="hello">Hello World, Main!</string> <string name="app_name">Action Bar 和 Tab 標籤頁</string> . . (單元十六範例程式的字串資源檔中程式碼用到的字串) </resources> 8

9 範例程式 步驟八： 將程式碼編輯視窗切換成MarriSugFragment的程式碼，讀者會發現在setupViewComponent()方法中還有語法錯誤，這是因為在Fragment類別中並沒有findViewById()這個方法可以取得介面佈局檔中的元件，我們必須先呼叫getView()取得Fragment的介面，再執行它的findViewById()取得介面元件如下： private void setupViewComponent() { // 從資源類別R中取得介面元件 btnDoSug = (Button)getView().findViewById(R.id.btnDoSug); radGSex = (RadioGroup)getView().findViewById(R.id.radGSex); radGAge = (RadioGroup)getView().findViewById(R.id.radGAge); radBtnAgeRng1 = (RadioButton)getView().findViewById(R.id.radBtnAgeRng1); radBtnAgeRng2 = (RadioButton)getView().findViewById(R.id.radBtnAgeRng2); radBtnAgeRng3 = (RadioButton)getView().findViewById(R.id.radBtnAgeRng3); txtResult = (TextView)getView().findViewById(R.id.txtResult); // 設定事件listener btnDoSug.setOnClickListener(btnDoSugOnClick); radGSex.setOnCheckedChangeListener(radGSexOnCheChanLis); } 9

10 範例程式 步驟九： 仿照步驟二到步驟八建立一個GameFragment的新類別以及它所使用的介面佈局檔，該類別的程式碼、介面佈局檔和字串資源都是從單元十七的範例程式中複製過來。 步驟十： 開啟程式專案的介面佈局檔res/layout/main.xml，在檔案中建立一個FrameLayout元件如下，這個FrameLayout元件必須設定一個id名稱，因為程式碼中會使用這個元件。 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" > <FrameLayout </FrameLayout> </LinearLayout> 10

11 範例程式 步驟十一：接下來我們還要新增一個類別實作ActionBar.TabListener介面，在「src/(套件路徑名稱)」資料夾上按下滑鼠右鍵，選擇New > Class便會出現新增類別對話盒，在Name欄位輸入MyTabListener，然後按下Finish按鈕結束新增類別對話盒。 步驟十二：新增的類別會自動顯示在程式碼編輯視窗中，請加上如下粗體字的程式碼： package tw.android; import android.app.ActionBar; public class MyTabListener implements ActionBar.TabListener { } 然後類別名稱下方會出現紅色波浪底線標示語法錯誤，將滑鼠游標移到該處便會彈出一個視窗，請點選其中的Add unimplemented methods，就會在程式碼中加入需要的方法。 11

12 範例程式 步驟十三：將程式碼編輯如下： public class MyTabListener implements ActionBar.TabListener { private Fragment mFragment; public MyTabListener(Fragment fragment) { mFragment = fragment; } @Override public void onTabReselected(Tab tab, FragmentTransaction ft) { // TODO Auto-generated method stub public void onTabSelected(Tab tab, FragmentTransaction ft) { ft.add(R.id.frameLayout, mFragment, null); // 被點選的Tab標籤頁執行這個方法 public void onTabUnselected(Tab tab, FragmentTransaction ft) { ft.remove(mFragment); // 被隱藏的Tab標籤頁執行這個方法 12

13 範例程式 步驟十四： 最後開啟程式專案的主程式檔，加入設定Action Bar的程式碼和建立Tab標籤頁的程式碼，請參考範例程式專案。
雖然整個過程有些繁複，但其實主要就是完成本單元開頭介紹的四項工作 13