實驗七：分頁程式.

Presentation on theme: "實驗七：分頁程式."— Presentation transcript:

1 實驗七：分頁程式

2 實驗七 主題 目的 環境需求 練習製作一個可以點選分頁標籤切換分頁的程式介面 練習使用事件監聽器監聽頁面切換的事件 學習如何使用分頁
Java SE Development Kit (JDK) Android SDK Eclipse ADT 練習製作一個可以點選分頁標籤切換分頁的程式介面，並練習使用事件監聽器監聽頁面切換的事件。

3 實驗七範例 執行結果中，當點選Tab的標籤後，Toast視窗顯示出目前點選到的Tab。

4 res/layout/activity_main.xml 1 2 開啟佈局文件 res/layout/activity_main.xml
1. 點選Composite資料夾標籤 2. 滑鼠點下tabhost，將其拖到概要視窗的相對佈局中

5 res/layout/activity_main.xml 上一頁拖入元件後，佈局檔內容如下:
<RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <TabHost android:layout_width="match_parent" android:layout_height="match_parent" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TabWidget android:layout_width="match_parent" android:layout_height="wrap_content" > </TabWidget> <FrameLayout <LinearLayout </LinearLayout> <LinearLayout <LinearLayout </FrameLayout> </TabHost> </RelativeLayout> 上一頁拖入元件後，佈局檔內容如投影片所示 注意紅色標示處， <TabHost 為內建id，亦可自行改為自訂的索引代號 預設會加入三個分頁內容畫面佈局，分別為 <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" > </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" > </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" > </LinearLayout> 每個分頁要顯示的元件請分別拖入以上三個線性佈局中 若要再多加分頁畫面佈局可繼續在<FrameLayout >標籤內繼續加入

6 src/MainActivity.java 3 4 5 6 接著需透過程式，設定每個分頁頁籤和分頁要顯示的畫面佈局內容
3. 利用findViewById取得TabHost元件，並使用setup()方法建立分頁。 4. 利用TabHost中的newTabSpec( )產生分頁的TabSpec物件，參數為設定該分頁的標籤。利用TabSpec的setIndicator()方法設定分頁的頁籤文字；TabSpec的setContent()方法設定分頁的畫面，最後利用TabHost的addTab()方法將剛剛設定的分頁TabSpec加入到分頁視窗中，才能顯示出該分頁 5. 利用同樣方式加入第二和第三分頁 6.利用TabHost中的setOnTabChangedListener ( )設定分頁切換事件監聽器，在跳出輔助視窗中選取 “讓MainActivity實作OnTabChangeListener” Note:請使用alt+/輔助程式輸入 6

7 src/MainActivity.java 實作分頁切換事件監聽器中的方法 7
7. 將滑鼠移到class MainActivity紅色錯誤處，出現黃色提示視窗，點選“新增未實作的方法”，點選後會在MainActivity程式中加入以下區塊，當分頁切換時會執行此方法區塊程式 @Override public void onTabChanged(String tabId) { // TODO 自動產生的方法 Stub }

8 src/MainActivity.java 8
8. 切換分頁時，會執行onTabChanged(String tabId)方法區塊，tabId參數為切換到該分頁的標記字串，在此區塊中利用Toast視窗，顯示出分頁標記字串。 完成，可將程式執行。 8