Transcript 單元26

Part 5 Fragment與進階介面元件
單元26 使用Fragment讓程式介面一分為多
單元27 動態Fragment讓程式成為變形金剛
單元28 Fragment的進階用法
單元29 Fragment和Activity之間的callback機制
單元30 ListView和ExpandableListView
單元31 AutoCompleteTextView自動完成文字輸入
單元32 SeekBar和RatingBar介面元件
1
單元26 使用Fragment讓程式介面
一分為多
2
Fragment 的用途
開發手機或是平板電腦的應用程式時，經常面臨的
一個問題就是不同裝置的螢幕尺寸大小不一致。對
於手機來說，程式畫面能夠顯示的介面元件個數不
多，因此如果需要用到比較多的操作元件，就要將
操作介面分成多個畫面依序顯示，但是如果程式是
執行在螢幕比較大的行動裝置像是平板電腦，就可
以一次顯示全部的介面元件。
3
Fragment 的用途
Android從3.0版開始新增一個Fragment類別讓程式的
畫面可以分割成數個區域，這些不同的區域各自顯示
或隱藏，以適應不同螢幕尺寸的裝置。Fragment型態
的程式介面具有以下特性：
1.程式的執行畫面可以由多個Fragment組成。
2.每一個Fragment都有各自獨立的執行狀態，並且接
收各自的處理事件。
3.在程式執行的過程中，Fragment可以動態加入和移
除。
4
Fragment 範例
平板電腦模擬器中的Settings系統設定程式就是使用
Fragment型態的操作介面，左邊的Fragment負責顯
示選項類別，右邊的Fragment則顯示類別中的項目。
5
使用Fragment的步驟
Step 1.首先必須新增一個Fragment使用的介面佈局檔，我
們在Eclipse左邊的專案檢視視窗中，用滑鼠右鍵點選
程式專案的res資料夾，然後從快顯功能表中選擇
New > Android XML File。在出現的對話盒中，將
Resource Type欄位設定為Layout，File欄位輸入介面
佈局檔的名稱，例如fragment_main，然後在下方的
項目清單中點選想要套用的介面元件編排模式，最後
按下Finish按鈕。
Step 2.新增的介面佈局檔會開啟在編輯視窗中，設計
Fragment介面的方式和Activity的介面完全相同，所
以我們可以運用所有學過的技巧來編輯這個介面佈局
檔。
6
使用Fragment的步驟
Step 3.接下來要開始建立Fragment的程式檔，我們先展開
程式專案的src資料夾，再用滑鼠右鍵點選其中的
「(套件路徑名稱)」資料夾，然後從快顯功能表中選
擇New > Class。
Step 4.在「新增類別」對話盒中輸入新類別的名稱，例如
MyFragment，然後按下Superclass欄位最右邊的
Browse按鈕，在出現的對話盒上方欄位輸入
Fragment，下面的清單中會篩選出Fragment類別。
在篩選出來的項目中會有二個Fragment類別，一個
是在android.app套件路徑中，另一個則是在
android.support.v4.app套件路徑。請選擇第一個，
也就是在android.app套件路徑中的Fragment，最後
按下Finish按鈕。
7
使用Fragment的步驟
Step 5. 在這個新類別中加入需要處理的狀態轉換方法，例如：
1.onCreate(): 這是當Fragment被建立時會執行的方法，我們可以在這個
方法中進行必要的初始設定。
2.onCreateView(): 這是當Fragment將要顯示在螢幕上時會執行的方法，
我們必須在這個方法中設定好Fragment使用的介面佈局檔。
3.onActivityCreated(): 這是當Fragment底層的Activity被建立時會執行的
方法，我們必須在這個方法中取得Fragment的介面元件，並設
定給對應的介面物件，就像是之前在Activity的onCreate()中做
的事情一樣。
4.onPause(): 這是當Fragment要從螢幕上消失時會執行的方法，我們可
以在這個方法中儲存使用者的操作狀態和輸入的資料，以便下
次Fragment重新顯示時，讓使用者繼續進行目前的工作。
Fragment和Activity一樣，二者都有各式各樣的狀態處理方法，如果要在
Fragment程式檔中加入狀態處理方法，必須先將編輯游標設定
到類別內部，然後按下滑鼠右鍵，從快顯功能表中選擇Source
> Override/Implement Methods，在顯示的對話盒左上方勾選想
要的狀態處理方法，然後按下OK按鈕。
8
使用Fragment的步驟
Step 6.把建立好的Fragment類別加入程式中，我們可以利用
<fragment>標籤，在主程式的介面佈局檔中完成加入Fragment
的動作。請讀者開啟res/layout資料夾中的主程式介面佈局檔，
在Graphical Layout編輯模式下，從左邊的Layouts元件群組中，
將Fragment元件拖曳到程式畫面。接著會出現如下圖的對話盒
讓我們選擇要使用的Fragment類別，點選前面建立的
MyFragment類別，然後按下OK按鈕。
9
使用Fragment的步驟
使用<fragment>標籤時要注意以下幾點：
1.
2.
3.
4.
fragment的開頭字母必須小寫。
每一個<fragment>標籤都要設定android:id屬性。
<fragment>標籤的android:name屬性是指定所使用的
Fragment類別，且必須加上完整的套件路徑名稱。
在<fragment>標籤中可以使用android:layout_weight
屬性，以設定比例的方式控制每一個Fragment所佔的
螢幕寬度，此時android:layout_width屬性必須設定為
"0dp"。
10
為Fragment加上外框並調整大小和位置
Fragment本身並無法做出像前面範例右邊的外框效果，如果
要在Fragment外圍加上框線，必須配合使用<FrameLayout>
標籤，也就是說在介面佈局檔中用一個<FrameLayout>標籤
把需要加上外框的Fragment包覆起來如下：
<FrameLayout android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="?android:attr/detailsElementBackground" >
<fragment android:id="@+id/frag"
android:name="tw.android.MyFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</FrameLayout>
11
範例程式
將「電腦猜拳遊戲」程式加上局數統計的功能，並且利用
Fragment來顯示。程式中將建立二個Fragment，一個用來
當成遊戲的主畫面，一個則是用來顯示局數統計數字。
12
範例程式
Step 1. 執行Eclipse新增一個Android App專案，在設定專案
屬性的第一個對話盒中（也就是輸入Application
Name的對話盒），必須將Minimum Required SDK
欄位設定為11或以上（如果使用Google提供的程式
庫，就不需要改變這項設定，請讀者參考「補充說
明」），因為Fragment必須在Android 3.0以上的平
台才能使用，專案的其它設定依照慣例即可。
13
範例程式
Step 2. 執行前一小節的步驟1和2，建立Fragment使用的介
面佈局檔。這個介面佈局檔是用來當成程式的主畫
面，我們可以將它取名為fragment_main。接著從單
元20的「電腦猜拳遊戲」程式專案中，將主程式介
面佈局檔res/layout/activity_main.xml的全部內容，
複製到這個Fragment的介面佈局檔中。由於遊戲畫
面會用到許多字串資源，因此也要把原來「電腦猜
拳遊戲」程式專案中的字串資源檔內容，複製到這
個新專案的字串資源檔。還有剪刀、石頭、布的影
像檔也要複製過來（可以在Eclipse左邊的專案檢視
視窗中，用滑鼠右鍵點選檔案，再選擇Copy進行檔
案複製。如果要選擇多個檔案，可以按住鍵盤的Ctrl
鍵，再用滑鼠點選）。
14
範例程式
Step 3. 重複前一個步驟的操作，再建立一個顯示遊戲局數
的介面佈局檔，我們將它取名為
fragment_game_result。
Step 4. 執行前一小節的步驟3到5，新增一個Fragment類別
程式檔，我們將它取名為MainFragment，然後加入
onCreateView()和onActivityCreated()二個狀態處理
方法。這個Fragment是負責顯示遊戲的主畫面，所
以它會使用介面佈局檔fragment_main，而且程式碼
的功能和單元20的遊戲主程式相同，因此可以從該
專案中複製程式碼再進行修改。在Fragment中必須
先呼叫getView()取得程式畫面物件，然後才能呼叫
它的findViewById()取得介面物件。如果要取得
Fragment底層的Activity，可以呼叫getActivity()方法。
15
範例程式
Step 5. 重複上一個步驟的操作，再新增一個Fragment類別
程式檔，我們將它取名為GameResultFragment，然
後加入onCreateView()狀態處理方法，以及設定介
面佈局檔的程式碼如下：
public class GameResultFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container, Bundle savedInstanceState) {
// 利用inflater物件的inflate()方法取得介面佈局檔
return inflater.inflate(R.layout.fragment_game_result,
container, false);
}
}
16
範例程式
Step 6.開啟程式專案的主要介面描述檔
res/layout/activity_main.xml，將它編輯如下。
我們使用<FrameLayout>標籤，在右邊
Fragment的周圍加上外框，並且利用
padding和margin屬性，調整操作介面的位
置，以增加美觀。
17