Chapter 1: Introduction

Transcription

1 Lesson 004 App 專案管理和 Gradle 設定技巧 Android Studio 是用 Gradle 套件來管理 App 專案 Gradle 的功能非常強大, 但是這也意謂著它的用法有一定的複雜度 建立 App 專案的時候,Android Studio 會自動幫我們產生正確的 Gradle 設定 但是軟體版本會不斷地更新,Gradle 也一樣 再加上 Android Build Tools 版本的更新, 以及 Android SDK 程式庫版本的更新 這些軟體版本的更動都會影響 Gradle 的設定 如果沒有正確搭配, 建置 App 專案時就會出錯 這些錯誤常常會讓初學者覺得困惑 因此這個單元我們就來介紹如何設定 Gradle, 讓讀者知道如何排除專案建置的錯誤 不過在介紹 Gradle 以前, 我們先從專案的複製和刪除開始 4-1 App 專案管理技巧 開發 App 專案的過程中, 除了新增專案之外, 有些時候也需要複製專案或是刪除專案, 以下我們針對專案的管理作一個綜合性的介紹 1. 複製 App 專案如果想要複製目前開啟的程式專案, 可以在 Android Studio 左邊的專案檢視視窗中完成, 但是要先變更檢視模式 首先點選專案檢視視窗上方的下拉式選單 ( 參考圖 4-1), 選擇其中的 Project, 就會在專案檢視視窗中顯示完整的專案名稱 用滑鼠右鍵點選專案名稱, 從快顯功能表中選擇 Copy 然後在專案檢視視窗的空白處按下滑鼠右鍵, 再選擇 Paste, 就會出現圖 4-2 的對話盒 在 New name 欄位輸入新專案的名稱,To directory 欄位輸入新專案的儲存路徑 複製後會在這個路徑中建立一個新的資料夾, 資料夾的名稱就是 New name 欄位中的專案名稱 另外記得取消 Open copy in editor 項目, 稍後我們可以利用 Open Project 的方式開啟這個複製的 App 專案 另一 25

2 004 App 專案管理和Gradle 設定技巧個做法是利用 Windows 檔案總管複製整個 App 專案的資料夾 複製 後可以變更資料夾名稱, 然後就可以用接下來介紹的 import 方式, 開啟複製的專案 圖 4-1 變更專案檢視視窗的檢視模式 圖 4-2 複製 App 專案的對話盒 複製 App 專案的訣竅要複製 App 專案, 只要利用 Windows 檔案總管, 把專案資料夾複製一份即可 只是專案中除了程式檔和資源檔, 還有很多編譯過程產生的暫存檔, 以及開發環境的暫存檔 這些暫存檔會佔據額外的磁碟空間, 其實它們是不需要複製的 或者如果要把程式專案複製給其他人, 也不需要複製這些暫存檔 為了減少程式專案佔據的磁碟空間 可以把下列的資料夾和檔案刪除 : 26

3 1. 程式專案資料夾中的.gradle.idea 和 build 子資料夾 2. app 資料夾中的 build 子資料夾, 請特別注意,app 資料夾不能夠刪除, 只能夠刪除其中的 build 子資料夾 3. 程式專案資料夾中的.iml 檔, 這個檔案的主檔名和專案資料夾的名稱相同 如果變更專案資料夾的名稱, 會重新建立一個.iml 檔 刪除這個檔案和資料夾之後, 可以利用 Android Studio 的 Import project 功能, 重新載入 App 專案 2. 載入 (import)app 專案 開啟(open) 專案 和 載入 (import) 專案 是不同的操作 開啟專案只能夠用在 完整 的 App 專案, 也就是用 Android Studio 建立, 或是之前已經用 Android Studio 開啟過, 這種專案已經有完整的專案設定檔 載入專案則會重新產生專案設定檔 它會依照目前電腦 Android SDK 的路徑, 以及 Gradle 的版本, 重新建立專案設定檔 因此如果用 Windows 檔案總管複製的 App 專案, 或是從另一部電腦複製過來, 甚至是從網路上下載的專案, 應該用 載入 (import) 的方式開啟 載入 App 專案有二種方式 如果是在 Android Studio 操作首頁, 可以選擇 Import project (Eclipse ADT, Gradle, etc.) 如果已經開啟某一個專案, 可以選擇主選單 File > New > Import Project 3. 刪除 App 專案只要執行 Windows 檔案總管, 刪除 App 專案的資料夾即可 下次啟動 Android Stdio 的時候, 就不會在 Recent Projects 清單中出現這個專案 27

4 004 App 專案管理和Gradle 設定技巧4-2 Gradle 設定技巧 圖 4-3 專案檢視視窗 Gradle Scripts 項目的內容 新增一個 App 專案的時候, 會自動建立一個名字叫做 app 的模組 我們可以在 Android Studio 的專案檢視視窗看到 app 這個項目 ( 提示 : 請確定專案檢視視窗是在 Android 模式, 參考圖 4-1), 它就是 app 模組 app 模組下一項是 Gradle Scripts, 將它展開, 會看到圖 4-3 的結果 其中的 build.gradle (Project: MyApplication) 是整個專案使用的 Gradle 設定檔,build.gradle (Module: app) 則是 app 模組使用的 Gradle 設定檔 開啟 build.gradle (Module: app) 設定檔, 會看到如下的結果 我們在某些項目後面加上註解 ( 這是 Gradle 設定檔正式的註解方式 ) 請讀者特別注意粗體標示的部分, 如果設定錯誤, 在建置 App 專案時會發生錯誤 compilesdkversion 是指定要用哪一個版本的 Android SDK 來編譯 這和前一個單元介紹的 Android SDK Manager 有關, 請讀者參考圖 4-4 compilesdkversion 必須設定為已經安裝的 SDK Platform 版本, 圖 4-4 中圈起來的 SDK Platform 的 API 編號是 23, 該項後面標示為 Installed, 所以 compilesdkversion 才可以設定成 23 至於 buildtoolsversion 必須設定為已經安裝的 Android SDK Build-tools 的版本, 圖 4-4 中圈起來的 Build-tools 版本是 24, 所以我們可以設定成 ( 有小數點是因為這一項可能會有次版本編號 ) 如果日後更新它們的版本, 這二項設定必須跟著調整 28

5 apply plugin: 'com.android.application' android { compilesdkversion 23 buildtoolsversion "24.0.0" // 指定要用哪一個版本的 Android SDK 來編譯 // 指定要用哪一個版本的 Android SDK Build-tools defaultconfig { applicationid "com.myapplication" // 指定這個 App 使用的套件路徑 minsdkversion 15 // 限制 App 要在哪一個版本以上的 Android 執行 targetsdkversion 23 // 指定 App 要使用哪一個 Android 版本的功能 versioncode 1 // 設定專案版本的編號 versionname "1.0" // 設定專案版本的名稱 buildtypes { ( 省略 ) dependencies { ( 省略 ) 圖 4-4 Android SDK Manager 檢視安裝的 Android SDK 工具版本編號 29

6 Lesson 027 使用 Fragment 讓程式介面一分為多 在設計手機或是平板電腦的 App 時, 經常面臨的一個問題, 就是不同裝置的螢幕尺寸大小不一致 當 App 在手機上執行時, 由於螢幕畫面比較小, 如果需要顯示比較多的介面元件, 就必須將程式畫面適當地切割, 再逐一顯示 但是如果 App 是在螢幕比較大的平板電腦上執行, 就可以一次顯示全部的介面元件 為了適應不同的情況, 我們需要一個具有高度彈性的介面設計機制, 讓程式能夠依照執行環境, 自動調整操作介面的顯示方式 針對以上的問題, 從 Android 3.0 版開始, 新增一個名為 Fragment 的類別 利用這個新類別, 我們可以將程式的畫面分割成數個區域 這些不同區域的程式畫面可以各自隱藏或顯示, 以適應不同螢幕尺寸的裝置 這種 Fragment 型態的程式介面具有以下特性 : 1. 程式的執行畫面可以由多個 Fragment 組成 ; 2. 每一個 Fragment 都有各自獨立的執行狀態, 並且接收各自的處理事件 ; 3. 在程式執行的過程中,Fragment 可以動態加入和移除 Fragment 其實是一個類別, 它的架構和 Activity 很類似, 二者都有自己的專屬介面佈局檔和程式檔, 而且 Fragment 在執行的過程中也會經歷不同的狀態變化 手機模擬器本身提供一個 Fragment 範例, 我們可以點選首頁的 App 程式集, 再選擇 API Demos, 然後依序選擇 App > Fragment > Layout, 就會看到圖 27-1 的畫面 乍看之下好像沒什麼特別, 可是如果按下手機模擬器右邊操作列的旋轉按鈕, 就會變成圖 27-2 的畫面 這個畫面的左邊和右邊是二個不同的 Fragment 也就是說, 這個範例程式會依照手機的方向, 改變 Fragment 的顯示模式, 這就是使用 Fragment 的好處 215

7 027 使程式介面一分為多用Fragment 讓圖 27-1 手機模擬器提供的 Fragment 範例程式 圖 27-2 旋轉手機模擬器後變成左右二個 Fragment 的畫面 27-1 使用 Fragment 的步驟 要在程式中使用 Fragment 需要完成以下步驟 : 在專案檢視視窗中, 展開 app/java 資料夾, 用滑鼠右鍵點選套件路徑名稱資料夾, 然後選擇 New > Fragment > Fragment (Blank), 就會顯示圖 27-3 的對話盒 在 Fragment Name 欄位輸入 Fragment 類別名稱,Fragment Layout Name 欄位就會自動完成命名 這個欄位就是 Fragment 介面佈局檔的名稱 它的下方有二個可以勾選的項 216

8 目, 如果勾選它們, 會在 Fragment 的程式檔中加入額外的 callback 方法 現階段我們不會用到這些方法, 因此可以取消勾選, 最後按下 Finish 按鈕 Fragment 有二個版本?! Fragment 是 Android 3.0 以後的版本才出現的功能, 因此如果以 Android 系統的支援能力來說,Android 3.0 以前的裝置並無法執行 Fragment 程式 為了解決這個問題,Google 特別開發一個名為 android-support-v4.jar 的程式庫, 只要把它放到 Android App 專案中, 就可以放心地讓程式使用 Fragment, 不必擔心舊版的 Android 系統無法支援 但是這個程式庫中的 Fragment, 和 Android 系統內建的 Fragment 不可以同時使用 我們在開發 App 專案時, 必須從二者之中選擇一個 筆者的建議是使用 android-supportv4.jar 程式庫的版本, 一來是因為可以讓 App 相容 Android 3.0 以前的裝置, 再者是因為程式庫的更新比較快, 如果有新的功能, 程式庫會比較早更新 要確定程式使用哪一個版本的 Fragment, 只要在程式檔中, 展開 import 區塊, 如果是 import android.support.v4.app.fragment;, 就是使用 androidsupport-v4.jar 程式庫的版本 如果是 import android.app.fragment;, 就是使用 Android 系統內建的版本 圖 27-3 新增 Fragment 的對話盒 217

9 027 使程式介面一分為多新增的 Fragment 介面佈局檔和程式檔會自動開啟, 編輯 Fragment 介面佈局檔的方式和我們前面學過的完全相同, 所以讀者可以運用所有學過的技巧, 來編輯這個介面佈局檔 在 Fragment 的程式檔加入需要用到的狀態處理方法, 例如 : 用Fragment 讓1. oncreate() 這是當 Fragment 被建立時會執行的方法, 我們可以在這個方法中進行必要的初始設定 2. oncreateview() 這是當 Fragment 將要顯示在螢幕上時會執行的方法, 我們必須在這個方法中設定好 Fragment 使用的介面佈局檔 3. onactivitycreated() 這是當 Fragment 底層的 Activity 被建立時會執行的方法, 我們必須在這個方法中取得 Fragment 的介面元件, 並設定給對應的介面物件, 就像是之前在 Activity 的 oncreate() 中做的事情一樣 4. onpause() 這是當 Fragment 要從螢幕上消失時會執行的方法, 我們可以在這個方法中儲存使用者的操作狀態和輸入的資料, 以便下次 Fragment 重新顯示時, 讓使用者繼續進行目前的工作 Fragment 和 Activity 一樣, 二者都有各式各樣的狀態處理方法, 讀者可以查詢 Android 官方網站的技術文件以取得更多相關資料 如果要在 Fragment 程式檔中加入狀態處理方法, 必須先將編輯游標設定到要插入的位置, 然後按下滑鼠右鍵, 從快顯功能表中選擇 Generate > Override Methods, 在顯示的對話盒中點選想要加入的狀態處理方法, 如果要複選, 可以按下鍵盤的 Ctrl 鍵 選好之後, 按下 OK 按鈕 有關 Fragment 程式檔的範例, 請讀者參考本單元後續建立的程式專案 在程式中使用建立好的 Fragment 類別 我們可以利用 <fragment> 標籤, 在主程式的介面佈局檔中使用指定的 Fragment 開啟 app/res/layout 資料夾中的主程式介面佈局檔, 在 Design 編輯模式下, 從左邊的 Palette 工具箱最下方的 Custom 群組中, 點選 <fragment>, 就會顯示對話盒讓我們選擇要使用的 Fragment 類 218

10 別, 點選想要加入的 Fragment 類別, 按下 OK 按鈕, 就會出現一個 Fragment 元件 我們可以移動滑鼠游標, 將它放到想要的位置 如 果切換到 Text 編輯模式, 就會看到如下的 Fragment 標籤 : <fragment android:name="com.gameusingfragment.myfragment" android:id="@+id/fragment" android:layout_width="match_parent" /> 使用 <fragment> 標籤時要注意以下幾點 : 1. <fragment> 標籤的開頭字母必須小寫 2. 每一個 <fragment> 標籤都要設定 android:id 屬性 3. <fragment> 標籤的 android:name 屬性是指定所使用的 Fragment 類別, 而且必須加上完整的套件路徑名稱 4. 在 <fragment> 標籤中可以使用 android:layout_weight 屬性, 用設定比例的方式控制每一個 Fragment 所佔的螢幕寬度, 此時 android:layout_width 屬性必須設定為 "0dp" 以上就是在程式專案中使用 Fragment 的步驟 27-2 範例程式 本單元的範例程式, 是將之前的 電腦猜拳遊戲 程式, 加上局數統計的功能, 並且改成用 Fragment 顯示 程式中將建立二個 Fragment, 一個用來當成遊戲的主畫面, 一個則用來顯示局數統計資料, 程式的執行畫面如圖 27-4, 以下是完成此程式專案的步驟 圖 27-4 使用 Fragment 介面的 電腦猜拳遊戲 程式 219

11 027 使程式介面一分為多用Fragment 讓執行 Android Studio 新增一個 App 專案, 專案的設定依照慣例 即可 執行前一小節的操作步驟, 建立 Fragment 的介面佈局檔和程式檔 這個 Fragment 是用來當成程式的主畫面, 我們可以將它取名為 MainFragment 接著從單元 21 的 電腦猜拳遊戲 程式專案中, 將 主程式的介面佈局檔 app/res/layout/activity_main.xml 的全部內容, 複製到這個 Fragment 的介面佈局檔中 由於遊戲畫面會用到許多字 串資源, 因此也要把原來 電腦猜拳遊戲 程式專案中的字串資源檔內容, 複製到這個新專案的字串資源檔 還有剪刀 石頭 布的影像檔也要複製過來 ( 可以在專案檢視視窗中, 用滑鼠右鍵點選檔案, 再選擇 Copy 進行檔案複製 如果要選擇多個檔案, 可以按住鍵盤的 Ctrl 鍵, 再用滑鼠點選 ) 重複前一個步驟的操作, 再建立一個顯示遊戲局數的 Fragment 類別, 我們將它取名為 GameResultFragment 以下是這個它的介面佈局檔的完整內容, 讀者可以利用 Design 模式或 Text 模式進行編輯 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:layout_width="match_parent" android:text="@string/total_set" /> <EditText android:id="@+id/edtcountset" android:layout_width="match_parent" android:focusable="false" /> <TextView android:layout_width="match_parent" android:text="@string/player_win_set" /> a <EditText android:id="@+id/edtcountplayerwin" android:layout_width="match_parent" 220

12 android:focusable="false" /> <TextView android:layout_width="match_parent" /> <EditText android:layout_width="match_parent" android:focusable="false" /> <TextView android:layout_width="match_parent" /> <EditText android:layout_width="match_parent" android:focusable="false" /> </LinearLayout> 以上的介面佈局檔會用到定義在字串資源檔 res/values/strings.xml 中 的字串如下 : <?xml version="1.0" encoding="utf-8"?> <resources> ( 其它字串 ) <string name="total_set"> 全部局數 :</string> <string name="player_win_set"> 玩家贏 :</string> <string name="comupter_win_set"> 電腦贏 :</string> <string name="draw"> 平手 :</string> </resources> 利用前一小節介紹的操作方式, 在 MainFragment 的程式檔加入 oncreateview() 和 onactivitycreated() 二個狀態處理方法 MainFragment 是負責顯示遊戲的主畫面, 所以它的功能和單元 20 的遊戲主程式相同, 因此讀者可以從該專案中複製程式碼再進行修改 要提醒讀者的是在 Fragment 中必須先呼叫 getview() 取得程式畫面物件, 然後才能呼叫它的 findviewbyid() 取得介面物件 如果要取得 221

13 027 使程式介面一分為多用Fragment 讓Fragment 底層的 Activity, 可以呼叫 getactivity() 方法 在 oncreateview() 方法中, 我們利用 inflater 物件的 inflate() 方法取得 res/layout/fragment_main.xml 介面佈局檔, 並將最後的結果傳回給 系統, 這樣就完成了 Fragment 的介面設定 以下是 MainFragment 類別的程式檔 : package import public class MainFragment extends Fragment { private ImageButton mimgbtnscissors, mimgbtnstone, mimgbtnpaper; private ImageView mimgviewcomplay; private TextView mtxtresult; private TextView medtcountset, medtcountplayerwin, medtcountcomwin, medtcountdraw; // 新增統計遊戲局數和輸贏的變數 private int micountset = 0, micountplayerwin = 0, micountcomwin = 0, micountdraw = public View oncreateview(layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) { // 利用 inflater 物件的 inflate() 方法取得介面佈局檔, 並將最後的結果傳回給系統 return inflater.inflate(r.layout.fragment_main, container, public void onactivitycreated(bundle savedinstancestate) { super.onactivitycreated(savedinstancestate); // 必須先呼叫 getview() 取得程式畫面物件, 然後才能呼叫它的 // findviewbyid() 取得介面物件 mtxtresult = (TextView) getview().findviewbyid(r.id.txtresult); mimgbtnscissors = (ImageButton) getview().findviewbyid(r.id.imgbtnscissors); mimgbtnstone = (ImageButton) getview().findviewbyid(r.id.imgbtnstone); mimgbtnpaper = (ImageButton) getview().findviewbyid(r.id.imgbtnpaper); 222

14 mimgviewcomplay = (ImageView) getview().findviewbyid(r.id.imgviewcomplay); // 以下介面元件是在另一個 Fragment 中, 因此必須呼叫所屬的 Activity // 才能取得這些介面元件 medtcountset = (EditText) getactivity().findviewbyid(r.id.edtcountset); medtcountplayerwin = (EditText) getactivity().findviewbyid(r.id.edtcountplayerwin); medtcountcomwin = (EditText) getactivity().findviewbyid(r.id.edtcountcomwin); medtcountdraw = (EditText) getactivity().findviewbyid(r.id.edtcountdraw); mimgbtnscissors.setonclicklistener(imgbtnscissorsonclick); mimgbtnstone.setonclicklistener(imgbtnstoneonclick); mimgbtnpaper.setonclicklistener(imgbtnpaperonclick); private View.OnClickListener imgbtnscissorsonclick = new View.OnClickListener() { public void onclick(view v) { // Decide computer play. int icomplay = (int)(math.random()*3 + 1); micountset++; medtcountset.settext(string.valueof(micountset)); // 1 - scissors, 2 - stone, 3 - net. if (icomplay == 1) { mimgviewcomplay.setimageresource(r.drawable.scissors); mtxtresult.settext(getstring(r.string.result) + getstring(r.string.player_draw)); micountdraw++; medtcountdraw.settext(string.valueof(micountdraw)); else if (icomplay == 2) { mimgviewcomplay.setimageresource(r.drawable.stone); mtxtresult.settext(getstring(r.string.result) + getstring(r.string.player_lose)); micountcomwin++; medtcountcomwin.settext(string.valueof(micountcomwin)); else { mimgviewcomplay.setimageresource(r.drawable.paper); mtxtresult.settext(getstring(r.string.result) + getstring(r.string.player_win)); micountplayerwin++; medtcountplayerwin.settext (String.valueOf(miCountPlayerWin)); 223

15 027 使程式介面一分為多用Fragment 讓 ; private View.OnClickListener imgbtnstoneonclick = new View.OnClickListener() { public void onclick(view v) { int icomplay = (int)(math.random()*3 + 1); ; micountset++; medtcountset.settext(string.valueof(micountset)); // 1 - scissors, 2 - stone, 3 - net. if (icomplay == 1) { mimgviewcomplay.setimageresource(r.drawable.scissors); mtxtresult.settext(getstring(r.string.result) + getstring(r.string.player_win)); micountplayerwin++; medtcountplayerwin.settext (String.valueOf(miCountPlayerWin)); else if (icomplay == 2) { mimgviewcomplay.setimageresource(r.drawable.stone); mtxtresult.settext(getstring(r.string.result) + getstring(r.string.player_draw)); micountdraw++; medtcountdraw.settext(string.valueof(micountdraw)); else { mimgviewcomplay.setimageresource(r.drawable.paper); mtxtresult.settext(getstring(r.string.result) + getstring(r.string.player_lose)); micountcomwin++; medtcountcomwin.settext(string.valueof(micountcomwin)); private View.OnClickListener imgbtnpaperonclick = new View.OnClickListener() { public void onclick(view v) { int icomplay = (int)(math.random()*3 + 1); micountset++; medtcountset.settext(string.valueof(micountset)); // 1 - scissors, 2 - stone, 3 - net. if (icomplay == 1) { mimgviewcomplay.setimageresource(r.drawable.scissors); mtxtresult.settext(getstring(r.string.result) + getstring(r.string.player_lose)); 224

16 ; micountcomwin++; medtcountcomwin.settext(string.valueof(micountcomwin)); else if (icomplay == 2) { mimgviewcomplay.setimageresource(r.drawable.stone); mtxtresult.settext(getstring(r.string.result) + getstring(r.string.player_win)); micountplayerwin++; medtcountplayerwin.settext (String.valueOf(miCountPlayerWin)); else { mimgviewcomplay.setimageresource(r.drawable.paper); mtxtresult.settext(getstring(r.string.result) + getstring(r.string.player_draw)); micountdraw++; medtcountdraw.settext(string.valueof(micountdraw)); 學習 Android App 開發的過程中, 會遇到愈來愈多的 class 每一個 class 都有許多內定的方法, 我們必須視程式的需要 override 某些方法, 像是這裡用到的 onactivitycreated() 和 oncreateview() 當要 override 類別內部的方法時, 先將文字輸入游標設定到要插入方法的位置, 再按下滑鼠右鍵, 選擇快顯功能表中的 Generate > Override Methods, 就會顯示方法清單對話盒讓我們選擇 如果程式中有不同類別的程式碼, 把編輯游標設定到不同類別內部, 可以叫出不同的方法清單對話盒 切換到 GameResultFragment 的程式檔, 把內容編輯如下 : package import public class GameResultFragment extends Fragment public View oncreateview(layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) { // 利用 inflater 物件的 inflate() 方法取得介面佈局檔, 225

17 027 使程式介面一分為多 // 並將最後的結果傳回給系統 return inflater.inflate(r.layout.fragment_game_result, container, false); 用Fragment 讓開啟主程式的介面佈局檔 app/res/layout/activity_main.xml, 將內容 編輯如下 <LinearLayout xmlns:android=" ( 自動產生的屬性設定 ) android:orientation="horizontal" android:gravity="center"> <fragment android:id="@+id/fragmain" android:name="com.gameusingfragment.mainfragment" android:layout_width="wrap_content" /> <fragment android:id="@+id/fraggameresult" android:name="com.gameusingfragment.gameresultfragment" android:layout_width="match_parent" /> </LinearLayout> 這個單元是我們第一次學習 Fragment 的用法, 為了不要讓問題太過複 雜, 我們先以靜態的方式使用 Fragment 下一個單元我們將進一步學習, 如何在程式執行的過程中, 動態加入和移除 Fragment 226

18 Lesson 028 動態 Fragment 讓程式成為變形金剛 前一個單元我們介紹了 Fragment 的基本功能和用法, 實作範例是以靜態的方式使用 Fragment 也就是說, 不會在程式執行的過程中讓 Fragment 隱藏或顯示 但是其實 Fragment 最大的優點是動態控制, 也就是在程式執行過程中, 可以隨時加入或是移除 Fragment, 或是用一個新的 Fragment 取代原來的 Fragment 利用這種方式, 我們可以讓程式的操作介面, 依照使用者的喜好, 或是執行環境的限制, 做出各種變化 想要在程式執行的過程中動態控制 Fragment, 需要用到 FragmentManager, 因此接下來就讓我們來介紹本單元的主角 - FragmentManager 28-1 Fragment 的總管 - FragmentManager 要在程式中改變 Fragment, 必須藉助 FragmentManager 物件, FragmentManager 物件提供以下控制 Fragment 的方法 : 1. add() 把 Fragment 加入程式的操作介面, 我們可以指定要加入哪一個介面元件中, 例如指定一個 FrameLayout 元件, 另外也可以設定這個 Fragment 的 tag 名稱 2. remove() 從程式的操作介面中移除指定的 Fragment, 並將它刪除 3. replace() 用另一個 Fragment 取代目前程式畫面中的 Fragment, 它的功能等同於先呼叫 remove() 移除目前的 Fragment, 再呼叫 add() 加入另一個 Fragment 227

19 028 動程式成為變形金剛4. attach() 將之前 detach 的 Fragment 重新顯示在程式畫面,Fragment 的畫面會重新建立 5. detach() 態Fragment 讓將指定的 Fragment 從程式畫面移開, 這時候 Fragment 的畫面會被刪除, 等到下次 attach 的時候再重新建立 6. hide() 隱藏指定的 Fragment 7. show() 顯示之前隱藏的 Fragment 8. addtobackstack() 把這個 Fragment 的交易加入系統的 Back Stack, 這樣當使用者按下手機或平板電腦上的 回上一頁 按鍵時, 就會回復到之前的狀態 9. setcustomanimations() 設定變換 Fragment 時使用的動畫效果 但是要特別注意, 如果使用 Android 3.0 以上的系統內建的 FragmentManager, 必須使用 Property Animation 但是如果是用 android.support.v4.app 套件的 FragmentManager, 就必須使用 View Animation 10. commit() 要求系統開始執行 Fragment 的切換, 但是要注意, 系統是用一個非同步的 process 來進行, 所以 Fragment 的切換不會立即完成 如果程式需要立刻完成 Fragment 的切換, 可以隨後呼叫 FragmentManager 物件的 executependingtransactions() 方法 在程式中, 改變 Fragment 的過程稱為一個 Transaction( 中文的意思是 交易 ) Transaction 的特性是整個操作必須從頭到尾全部完成才算數, 不能只執行其中一部份 如果不能從頭到尾全部完成, 就要回到原來未執行 Transaction 之前的狀態 在使用 FragmentManager 控制 Fragment 的過程中, 必須依序執行以下幾個步驟 : 呼叫 getfragmentmanager() 方法取得 FragmentManager FragmentManager fragmentmgr = getfragmentmanager(); 228

20 呼叫 FragmentManager 的 begintransaction() 方法建立一個 FragmentTransaction 物件 FragmentTransaction fragmenttrans = fragmentmgr.begintransaction(); 利用 FragmentTransaction 物件提供的方法, 控制 Fragment 請讀 者參考以下程式碼範例, 其中的 MyFragmentA 和 MyFragmentB 是 在程式專案中, 已經建立好的二個 Fragment 類別 framelay 是在主 程式介面佈局檔中的 FrameLayout 元件, 通常我們都是用 FrameLayout 當成 Fragment 的容器 也就是說, 把 Fragment 物件 放到 FrameLayout 元件裡頭 MyFragmentA myfragmenta = new MyFragmentA(); MyFragmentB myfragmentb = new MyFragmentB(); fragmenttrans.add(r.id.framelay, myfragmenta, "My fragment A"); fragmenttrans.add(r.id.framelay, myfragmentb, "My fragment B"); 在呼叫 add() 方法之前, 我們必須先建立 Fragment 物件 呼叫 add() 方法時, 必須指定要將 Fragment 加入哪一個介面元件中 ( 這個介面元件就稱為 Fragment 的容器 ) 另外我們也可以幫這個新加入的 Fragment 取一個名稱 ( 稱為 Tag, 就是 add() 方法的第三個參數 ), 這個 Tag 可以讓我們找到特定的 Fragment 使用 new 運算子或是 newinstance() 靜態方法建立 Fragment 物件 Android Developers 官方網站的技術文件, 建議使用 Fragment 類別的 newinstance() 靜態方法來建立 Fragment 物件, 避免使用 new 運算子, 這是考量 Fragment 類別的建構式含有引數的情形 要解釋其中的原因, 必須先瞭解 Android 系統在運作的過程中, 有時候會強制銷毀 Fragment 物件, 再重新建立它, 例如當手機或是平板電腦從直立轉成水平時,App 會被強制結束, 再重新啟動 當 Android 系統要重新建立 Fragment 物件的時候, 會執行空的建構式 ( 也就是不含任何引數的建構式 ), 再將銷毀 Fragment 物件時儲存的 Bundle 物件, 傳給 Fragment 的 oncreate() 方法 這樣 Fragment 物件就可以回復到原來銷毀時的狀態 ( 我們的程式要自己從 Bundle 物件中取出資料來使用 ), 也就是說每一個 Fragment 類別都要提供一個空的建構式讓系統呼叫 如果要在建立 Fragment 物件時傳入引數, 正確的做法是定義一個 newinstance() 靜態方法, 用來接收傳入的引數, 在這個 newinstance() 方法中, 利用 new 運算子建立一個 Fragment 物件, 並且把傳入的引數儲存在一 229

21 028 動程式成為變形金剛個 Bundle 物件裡頭, 再把這個 Bundle 物件設定給 Fragment 物件 然後在 Fragment 的 oncreate() 狀態處理方法中, 取得 Bundle 物件, 再取出其中的資料 如果建立 Fragment 物件時不需要傳入任何引數, 就可以直接利用 new 運算子來建立, 如同本單元的範例程式 態Fragment 讓呼叫 FragmentTransaction 的 commit() 方法, 啟動 Fragment 處理流程 但是要注意,Android 系統並不是立刻執行, 而是以執行緒 ( background thread ) 的方式來處理 如果我們希望立刻執行 Fragment 的處理流程, 必須再執行下一個步驟 fragmenttrans.commit(); 如果程式需要立刻執行 Fragment 的處理, 可以呼叫 FragmentManager 的 executependingtransactions() 方法 fragmentmgr.executependingtransactions(); 我們可以利用之前介紹過的 匿名物件 語法, 將上述操作 Fragment 的程式碼簡化如下 : getfragmentmanager().begintransaction().add(r.id.framelay, myfragmenta, "My fragment A").add(R.id.frameLay, myfragmentb, "My fragment B").commit(); 28-2 範例程式 上一個單元的 電腦猜拳遊戲, 是用二個 Fragment 組成操作介面 其中一個 Fragment 用來顯示操作元件, 另一個則顯示局數統計資料 這二個 Fragment 都是固定出現在程式畫面中 這個單元我們將把局數統計資料的 Fragment 改成可以動態顯示和隱藏, 並且新增第二種局數統計資料的顯示方式, 讓使用者可以依喜好自由選擇 圖 28-1 是程式的執行畫面, 一開始並不會顯示局數統計資料, 必須按下 顯示結果 1 或 顯示結果 2 按鈕才會出現局數統計畫面 以下是完成這個程式專案的詳細步驟 : 230

22 圖 28-1 使用動態 Fragment 的 電腦猜拳遊戲 程式 利用 Windows 檔案總管複製前一個單元的程式專案, 再將複製的資 料夾改成想要的名稱 然後利用 Android Studio 的 Import Project 功 能, 載入複製的 App 專案 依照前一個單元的操作方法, 新增一個 Fragment, 我們可以將它取 名為 GameResult2Fragment, 它是用來當作第二種局數統計資料的 畫面 我們在這個新的介面佈局檔中, 換成用 TableLayout 顯示局數 統計資料 請將介面佈局檔編輯如下, 可以先用 Design 模式加入介 面元件, 再切換到 Text 模式設定屬性 <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android=" ( 自動產生的屬性設定 ) android:layout_gravity="center_horizontal" > <TableRow> <TextView android:text="@string/total_set" android:textsize="20sp" android:textcolor="#0fffff" /> <EditText android:id="@+id/edtcountset" android:focusable="false" android:layout_weight="1" /> </TableRow> 231

23 028 動程式成為變形金剛態Fragment 讓<TableRow> <TextView android:textsize="20sp" android:textcolor="#0fffff" /> <EditText android:focusable="false" android:layout_weight="1" /> </TableRow> <TableRow> <TextView android:textsize="20sp" android:textcolor="#0fffff" /> <EditText android:focusable="false" android:layout_weight="1" /> </TableRow> <TableRow> <TextView android:textsize="20sp" android:textcolor="#0fffff" /> <EditText android:focusable="false" android:layout_weight="1" /> </TableRow> </TableLayout> 我們要先將 MainFragment 中, 用來顯示局數統計的 TextView 物件改成 public, 這樣一來 GameResultFragment 和 GameResult2Fragment 的 程式碼就可以直接使用 public class MainFragment extends Fragment { private ImageButton mimgbtnscissors, mimgbtnstone, mimgbtnpaper; private ImageView mimgviewcomplay; private TextView mtxtresult; public EditText medtcountset, medtcountplayerwin, medtcountcomwin, medtcountdraw; ( 其它程式碼 ) 232

24 將 GameResult2Fragment 的程式檔編輯如下 : package import public class GameResult2Fragment extends Fragment { public GameResult2Fragment() { // Required empty public public View oncreateview(layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) { // 利用 inflater 物件的 inflate() 方法取得介面佈局檔, // 並將最後的結果傳回給系統 return inflater.inflate(r.layout.fragment_game_result2, container, public void onresume() { super.onresume(); MainFragment frag = (MainFragment) getfragmentmanager().findfragmentbyid(r.id.fragmain); frag.medtcountset = (EditText) getactivity(). findviewbyid(r.id.edtcountset); frag.medtcountplayerwin = (EditText) getactivity().findviewbyid(r.id.edtcountplayerwin); frag.medtcountcomwin = (EditText) getactivity().findviewbyid(r.id.edtcountcomwin); frag.medtcountdraw = (EditText)getActivity(). findviewbyid(r.id.edtcountdraw); 以上的程式碼除了 oncreateview() 方法之外, 還多了一個 onresume() 方法 ( 操作提示 : 在程式碼中插入新方法的操作步驟可以參考上一個單元的說明 ) 這個方法裡頭的程式碼是設定用來顯示局數統計資料的介面物件, 這些介面物件是宣告在 MainFragment 類別中, 而且必須等使用者開啟局數統計的 Fragment 之後才能使用, 233

25 028 動程式成為變形金剛態Fragment 讓因此我們必須在 onresume() 中執行 ( 未開啟局數統計 Fragment 之 前這些介面物件並不存在, 因此也無法使用 ) 當使用者建立一個 GameResult2Fragment 物件, 並將它加入程式畫面 時,onCreateView() 方法會先執行 當 GameResult2Fragment 物件即 將顯示在螢幕上時, 會執行 onresume() 方法, 因此我們在 onresume() 方法中設定好介面物件 這裡我們使用 FragmentManager 的 findfragmentbyid() 方法取得程式中的 MainFragment 物件, 再將其中 宣告的介面物件設定成對應的介面元件 在 Android Studio 左邊的專案檢視視窗中, 展開 app/java/( 套件路 徑名稱 )/GameResultFragment 程式檔, 將它開啟, 再依照同樣的 方法加入 onresume(), 然後加入下列粗體標示的程式碼 這一段程 式碼和上一個步驟的程式碼完全相同, 也就是說 GameResultFragment 和 GameResult2Fragment, 除了元件排列方 式不同之外, 內部的功能完全相同 package import public class GameResultFragment extends Fragment public View oncreateview(layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) { // 利用 inflater 物件的 inflate() 方法取得介面佈局檔, // 並將最後的結果傳回給系統 return inflater.inflate(r.layout.fragment_game_result, container, public void onresume() { super.onresume(); MainFragment frag = (MainFragment) getfragmentmanager().findfragmentbyid(r.id.fragmain); frag.medtcountset = (EditText) getactivity().findviewbyid(r.id.edtcountset); frag.medtcountplayerwin = (EditText) getactivity().findviewbyid(r.id.edtcountplayerwin); frag.medtcountcomwin = (EditText) getactivity() 234

26 .findviewbyid(r.id.edtcountcomwin); frag.medtcountdraw = (EditText)getActivity(). findviewbyid(r.id.edtcountdraw); 開啟主程式介面佈局檔 app/res/layout/activity_main.xml, 刪除第二 個 <fragment> 標籤, 然後在同樣的位置加入一個 <FrameLayout> 標 籤, 並且設定屬性如下 這個 FrameLayout 元件將作為 Fragment 物 件的容器, 我們會在程式碼中, 依照使用者的操作, 把不同的 Fragment 放進這個 FrameLayout 元件 <LinearLayout xmlns:android=" xmlns:tools=" android:id="@+id/linearlayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:paddingbottom="@dimen/activity_vertical_margin" android:paddingleft="@dimen/activity_horizontal_margin" android:paddingright="@dimen/activity_horizontal_margin" android:paddingtop="@dimen/activity_vertical_margin" tools:context=".mainactivity" android:gravity="center_horizontal" > <fragment android:id="@+id/fragmain" android:name="com.android.mainfragment" android:layout_width="wrap_content" /> <FrameLayout android:id="@+id/framelay" android:layout_width="wrap_content" android:layout_margin="50dp" android:padding="20dp" /> </LinearLayout> 開啟介面佈局檔 app/res/layout/fragment_main.xml, 我們在最後加入三個按鈕, 使用者可以利用這些按鈕啟動二種局數統計資料畫面, 或是隱藏局數統計資料畫面 這裡我們用到許多控制介面元件位置和外觀的屬性, 以增加程式畫面的美觀 235

27 028 動程式成為變形金剛<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" android:layout_width="400dp" android:layout_height="match_parent" android:layout_gravity="center_horizontal" > 態Fragment 讓 ( 原來的程式碼 ) <Button android:id="@+id/btnshowresult1" android:layout_width="wrap_content" android:text="@string/btn_show_result1" android:layout_below="@id/txtresult" android:layout_alignleft="@id/txtcom" android:textsize="20sp" android:layout_margintop="10dp" /> <Button android:id="@+id/btnshowresult2" android:layout_width="wrap_content" android:text="@string/btn_show_result2" android:layout_below="@id/txtresult" android:layout_alignleft="@id/imgbtnpaper" android:textsize="20sp" android:layout_margintop="10dp" /> <Button android:id="@+id/btnhiddenresult" android:layout_width="wrap_content" android:text="@string/btn_hidden_result" android:layout_below="@id/btnshowresult1" android:layout_centerinparent="true" android:textsize="20sp" android:layout_margintop="10dp" /> </RelativeLayout> 這三個新按鈕用到定義在字串資源檔中的字串 : <?xml version="1.0" encoding="utf-8"?> <resources> ( 原來的字串 ) <string name="btn_show_result1"> 顯示結果 1</string> <string name="btn_show_result2"> 顯示結果 2</string> <string name="btn_hidden_result"> 隱藏結果 </string> </resources> 236

28 開啟負責顯示遊戲畫面的 Fragment 程式檔 src/( 套件路徑名稱 )/ MainFragment.java, 我們在裡頭加入前一個步驟新增的三個按鈕所 對應的物件, 並設定好它們的 OnClickListener, 如以下粗體字的部 分 此外為了記錄程式是否開啟局數統計的顯示畫面, 我們新增一個 mbshowresult 變數, 並在三個按鈕的 OnClickListener 中對它進行 設定 在這些按鈕的 OnClickListener 中, 我們依照上一個小節介紹 的 Fragment 操作技巧, 分別顯示或隱藏局數統計畫面 最後在 剪 刀 石頭 和 布 的按鈕的 OnClickListener 中, 將顯示局數 統計資料的程式碼集中放到最後, 只有當 mbshowresult 變數的值是 true 的時候才顯示 package import public class MainFragment extends Fragment { private ImageButton mimgbtnscissors, mimgbtnstone, mimgbtnpaper; private ImageView mimgviewcomplay; private TextView mtxtresult; public EditText medtcountset, medtcountplayerwin, medtcountcomwin, medtcountdraw; // 新增統計遊戲局數和輸贏的變數 private int micountset = 0, micountplayerwin = 0, micountcomwin = 0, micountdraw = 0; private Button mbtnshowresult1, mbtnshowresult2, mbtnhiddenresult; private boolean mbshowresult = false; private final static String TAG_FRAGMENT_RESULT_1 = "Result 1", TAG_FRAGMENT_RESULT_2 = "Result public View oncreateview(layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) { 237

29 028 動程式成為變形金剛 // TODO Auto-generated method stub // 利用 inflater 物件的 inflate() 方法取得介面佈局檔, // 並將最後的結果傳回給系統 return inflater.inflate(r.layout.fragment_main, container, false); 態Fragment public void onactivitycreated(bundle savedinstancestate) { // TODO Auto-generated method stub super.onactivitycreated(savedinstancestate); // 必須先呼叫 getview() 取得程式畫面物件, 然後才能呼叫它的 // findviewbyid() 取得介面物件 mtxtresult = (TextView) getview().findviewbyid(r.id.txtresult); mimgbtnscissors = (ImageButton) getview().findviewbyid (R.id.imgBtnScissors); mimgbtnstone = (ImageButton) getview().findviewbyid (R.id.imgBtnStone); mimgbtnpaper = (ImageButton) getview().findviewbyid (R.id.imgBtnPaper); mimgviewcomplay = (ImageView) getview().findviewbyid (R.id.imgViewComPlay); // 以下介面元件是在另一個 Fragment 中, 因此必須呼叫所屬的 Activity // 才能取得這些介面元件 /* medtcountset = (EditText) getactivity().findviewbyid (R.id.edtCountSet); medtcountplayerwin = (EditText) getactivity().findviewbyid(r.id.edtcountplayerwin); medtcountcomwin = (EditText) getactivity().findviewbyid (R.id.edtCountComWin); medtcountdraw = (EditText) getactivity().findviewbyid (R.id.edtCountDraw); */ mimgbtnscissors.setonclicklistener(imgbtnscissorsonclick); mimgbtnstone.setonclicklistener(imgbtnstoneonclick); mimgbtnpaper.setonclicklistener(imgbtnpaperonclick); mbtnshowresult1 = (Button) getview().findviewbyid (R.id.btnShowResult1); mbtnshowresult2 = (Button) getview().findviewbyid (R.id.btnShowResult2); mbtnhiddenresult = (Button) getview().findviewbyid (R.id.btnHiddenResult); mbtnshowresult1.setonclicklistener(btnshowresult1onclick); mbtnshowresult2.setonclicklistener(btnshowresult2onclick); mbtnhiddenresult.setonclicklistener(btnhiddenresultonclick); 238

30 private View.OnClickListener imgbtnscissorsonclick = new View.OnClickListener() { public void onclick(view v) { // Decide computer play. int icomplay = (int)(math.random()*3 + 1); micountset++; // medtcountset.settext(string.valueof(micountset)); // 1 - scissors, 2 - stone, 3 - net. if (icomplay == 1) { mimgviewcomplay.setimageresource(r.drawable.scissors); mtxtresult.settext(getstring(r.string.result) + getstring(r.string.player_draw)); micountdraw++; // medtcountdraw.settext(string.valueof(micountdraw)); else if (icomplay == 2) { mimgviewcomplay.setimageresource(r.drawable.stone); mtxtresult.settext(getstring(r.string.result) + getstring(r.string.player_lose)); micountcomwin++; // medtcountcomwin.settext(string.valueof(micountcomwin)); else { mimgviewcomplay.setimageresource(r.drawable.paper); mtxtresult.settext(getstring(r.string.result) + getstring(r.string.player_win)); micountplayerwin++; // medtcountplayerwin.settext(string.valueof(micountplayerwin)); ; if (mbshowresult) { medtcountset.settext(string.valueof(micountset)); medtcountdraw.settext(string.valueof(micountdraw)); medtcountcomwin.settext(string.valueof(micountcomwin)); medtcountplayerwin.settext(string.valueof(micountplayerwin)); private View.OnClickListener imgbtnstoneonclick = new View.OnClickListener() { public void onclick(view v) { ( 參考前面 btnscissorslin 物件的程式碼修改 ) ; private View.OnClickListener imgbtnpaperonclick = 239

31 028 動程式成為變形金剛new View.OnClickListener() { public void onclick(view v) { ( 參考前面 btnscissorslin 物件的程式碼修改 ) ; 態Fragment 讓private View.OnClickListener btnshowresult1onclick = new View.OnClickListener() { public void onclick(view v) { GameResultFragment fraggameresult = new GameResultFragment(); FragmentTransaction fragtran = getfragmentmanager().begintransaction(); fragtran.replace(r.id.framelay, fraggameresult, TAG_FRAGMENT_RESULT_1); fragtran.commit(); ; mbshowresult = true; private View.OnClickListener btnshowresult2onclick = new View.OnClickListener() { public void onclick(view v) { GameResult2Fragment fraggameresult2 = new GameResult2Fragment(); FragmentTransaction fragtran = getfragmentmanager().begintransaction(); fragtran.replace(r.id.framelay, fraggameresult2, TAG_FRAGMENT_RESULT_2); fragtran.commit(); ; mbshowresult = true; private View.OnClickListener btnhiddenresultonclick = new View.OnClickListener() { public void onclick(view v) { mbshowresult = false; FragmentManager fragmgr = getfragmentmanager(); GameResultFragment fraggameresult = (GameResultFragment) fragmgr.findfragmentbytag(tag_ FRAGMENT_RESULT_1); if (null!= fraggameresult) { FragmentTransaction fragtran = fragmgr.begintransaction(); fragtran.remove(fraggameresult); fragtran.commit(); 240

32 return; GameResult2Fragment fraggameresult2 = (GameResult2Fragment) fragmgr.findfragmentbytag (TAG_FRAGMENT_RESULT_2); if (null!= fraggameresult2) { FragmentTransaction fragtran = fragmgr.begintransaction(); fragtran.remove(fraggameresult2); fragtran.commit(); ; return; 完成程式專案的修改之後, 啟動執行 由於這個 App 的介面元件比較多, 如果模擬器的螢幕太小, 會看不到完整的畫面 如果發生這種情況, 可以把每一個介面佈局檔中的 padding 和 margin 相關屬性全部刪除, 或是將文字大小設定成比較小的值 看到程式的執行畫面後, 分別按下二個不同局數統計畫面的按鈕, 將會看到如圖 28-2 和 28-3 的結果 如果要取消局數統計畫面, 可以按下 隱藏結果 按鈕 這個單元示範動態控制 Fragment 的方法, 另外我們還可以針對 Fragment 的操作提供回復 (back stack) 的功能, 這些進階的 Fragment 使用技巧我們留待下一個單元再繼續介紹 圖 28-2 第一種顯示局數統計資料的畫面 圖 28-3 第二種顯示局數統計資料的畫面 241

33 Lesson 034 SeekBar 和 RatingBar 介面元件 SeekBar 介面元件的功能類似 MS Word 程式中用來瀏覽文件的捲軸, 捲軸上有一個可以拖曳的控制鈕, 捲軸的長度代表文件全部的範圍, 控制鈕則代表目前在文件中的位置, 圖 34-1 是一個 SeekBar 元件的範例 要建立 SeekBar 元件只要在程式專案的程式介面佈局檔 res/layout/activity_main.xml 中增加一個 <SeekBar /> 標籤即可, 圖 34-1 就是利用以下的介面元件程式碼所產生 : <SeekBar android:id="@+id/seekbar" android:layout_width="match_parent" android:max="100" android:progress="80" /> 圖 34-1 SeekBar 元件的範例 SeekBar 元件上的控制鈕可以讓使用者拖曳, 程式會根據它的位置來調整顯示的內容 我們必須在程式中建立一個 SeekBar 元件的 OnSeekBarChangeListener 物件, 當使用者改變了 SeekBar 上的控制鈕的位置時,Android 系統就會執行該物件中的程式碼 在這個 OnSeekBarChangeListener 物件中, 我們需要建立以下 3 個方法 : public void onprogresschanged(seekbar seekbar, int progress, boolean fromuser) { // 使用者改變 SeekBar 上的控制鈕位置時執行 public void onstarttrackingtouch(seekbar seekbar) { // 使用者按下 SeekBar 上的控制鈕, 準備要開始拖曳時執行 public void onstoptrackingtouch(seekbar seekbar) { // 使用者放開 SeekBar 上的控制鈕時執行 289

34 034 SeekBar 和RatingBar 介面元件第一個方法 onprogresschanged() 是當使用者改變了 SeekBar 上的控制鈕位置時執行, 後面二個方法是當控制鈕被按下準備拖曳時, 和控制鈕被放開時執行 在一般情況下, 我們只需要處理 onprogresschanged() 這個方法即可, 它輸入的引數包括所操作的 SeekBar 物件, 和目前控制鈕的位置 (progress 引數的值 ) RatingBar 介面元件的外觀比較特別, 它像是經常用來評比商品的一排星星 在評比的時候, 可能會用到一顆完整的星星或是半顆星星, RatingBar 元件也是一樣, 如圖 34-2 建立 RatingBar 元件的方法是在介面佈局檔中加上 <RatingBar /> 標籤如以下範例 : <RatingBar android:id="@+id/ratingbar" android:layout_width="wrap_content" style="?android:attr/ratingbarstyle" android:numstars="5" android:rating="3.5" /> 圖 34-2 RatingBar 介面元件的範例 RatingBar 元件可以利用 style 屬性來設定型態,ratingBarStyle 是預設型態, 我們也可以設定為 ratingbarstylesmall 或是 ratingbarstyleindicator ratingbarstylesmall 表示要使用小的 RatingBar, 如果設定為 ratingbarstyleindicator, 表示只用來顯示評分值, 使用者不能夠對它進行變更 android:numstars 屬性可以用來設定星星的數目,android:rating 屬性則是設定目前的評分值 評分值可以有小數點 (SeekBar 元件的 progress 屬性不可以有小數點 ) 其實 RatingBar 元件的評分值也可以用 progress 屬性來表示,progress 屬性和 rating 屬性之間的關係是,progress 屬性值剛好是 rating 屬性值的兩倍, 也就是說如果 rating 是 0.5 那麼 progress 就是 1, 如果 rating 是 1 那麼 progress 就是 2, 依此類推 程式碼中可以呼叫 RatingBar 元件的 setrating() 方法改變 rating 的值, 使用者也可以用滑鼠按下 RatingBar 元件上的星星來設定 rating 的值 如果程式要取得使用者的設定值, 就要建立一個 OnRatingBarChangeListener 物件, 該物件中需要建立以下方法 方法中的第一個引數是目前操作的 RatingBar 元件, 第二個引數 290

35 是使用者設定的評分值 如果需要取得 getprogress() 方法 progress 的值, 可以呼叫 public void onratingchanged(ratingbar ratingbar, float rating, boolean fromuser) { // 當 RatingBar 上的評分值改變時執行 接下來我們用一個範例程式來示範 SeekBar 和 RatingBar 的功能, 程式的執行畫面如圖 34-3 使用者可以拖曳 SeekBar 元件上的控制鈕, 下方的說明文字會即時更新 progress 的值 使用者也可以用滑鼠點選下方的 RatinBar 元件上的星星, 下方的說明文字會顯示目前設定的 rating 值和 progress 值 這個程式的字串資源檔 介面佈局檔和程式檔如下, 程式碼的部分主要是 SeekBar 和 RatingBar 這二個介面元件的事件處理程序, 請讀者特別留意粗體字的部分 圖 34-3 SeekBar 和 RatingBar 範例程式的執行畫面 字串資源檔 <resources> <string name="app_name">seekbar 和 RatingBar</string> <string name="seek_bar_progress">seekbar 的 Progress 值 :</string> <string name="rating_bar_value">ratingbar 的 Rating 值 :</string> <string name="rating_bar_progress">ratingbar 的 Progress 值 :</string> </resources> 介面佈局檔 <LinearLayout xmlns:android=" ( 自動產生的屬性設定 ) android:orientation="vertical" > <SeekBar 291

36 034 android:layout_width="match_parent" android:max="100" android:layout_margintop="20dp" /> SeekBar 和RatingBar 介面元件<TextView android:layout_width="match_parent" android:textsize="20sp" /> <RatingBar android:layout_width="wrap_content" style="?android:attr/ratingbarstyle" android:numstars="5" android:layout_margintop="20dp" /> <TextView android:layout_width="match_parent" android:textsize="20sp" /> <TextView android:layout_width="match_parent" android:textsize="20sp" /> </LinearLayout> 程式檔 package import public class MainActivity extends AppCompatActivity { private RatingBar mratingbar; private SeekBar mseekbar; private TextView mtxtseekbarprogress, mtxtratingbarvalue, mtxtratingbarprogress; 292

37 @Override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); mratingbar = (RatingBar) findviewbyid(r.id.ratingbar); mseekbar = (SeekBar) findviewbyid(r.id.seekbar); mtxtseekbarprogress = (TextView) findviewbyid(r.id.txtseekbarprogress); mtxtratingbarvalue = (TextView) findviewbyid(r.id.txtratingbarvalue); mtxtratingbarprogress = (TextView) findviewbyid(r.id.txtratingbarprogress); mseekbar.setonseekbarchangelistener(seekbaronchange); mratingbar.setonratingbarchangelistener(ratingbaronchange); private SeekBar.OnSeekBarChangeListener seekbaronchange = new SeekBar.OnSeekBarChangeListener() { public void onprogresschanged(seekbar seekbar, int progress, boolean fromuser) { String s = getstring(r.string.seek_bar_progress); mtxtseekbarprogress.settext(s + String.valueOf(progress)); public void onstarttrackingtouch(seekbar seekbar) { public void onstoptrackingtouch(seekbar seekbar) { ; private RatingBar.OnRatingBarChangeListener ratingbaronchange = new RatingBar.OnRatingBarChangeListener() public void onratingchanged(ratingbar ratingbar, float rating, boolean fromuser) { String s = getstring(r.string.rating_bar_value); mtxtratingbarvalue.settext(s + String.valueOf(rating)); s = getstring(r.string.rating_bar_progress); mtxtratingbarprogress.settext(s + String.valueOf(mRatingBar.getProgress())); ; 293