Android Kotlin 基礎知識 03.1：建立片段

這個程式碼研究室是 Android Kotlin 基礎知識課程的一部分。如果您按部就班完成程式碼研究室，就能充分體驗到本課程的價值。所有課程程式碼研究室都列在 Android Kotlin 基礎知識程式碼研究室到達網頁。

在本程式碼研究室中，您將瞭解片段，並在名為 AndroidTrivia 的範例應用程式中建立片段。在下一個程式碼研究室中，您將進一步瞭解導覽功能，並繼續開發 AndroidTrivia 應用程式。

必備知識

• Kotlin 基礎知識
• 如何使用 Kotlin 建立基本 Android 應用程式
• 如何使用版面配置

課程內容

• 如何靜態地將片段新增至應用程式

學習內容

• 在活動中建立片段。

在本課程的三個程式碼研究室中，您將使用名為 AndroidTrivia 的應用程式。完成的應用程式是一個遊戲，使用者要回答三道有關 Android 程式碼的益智問題。如果使用者答對所有問題，即可贏得遊戲並分享結果。

AndroidTrivia 應用程式說明導覽模式和控制項。這個應用程式包含多個元件：

• 在標題畫面 (如上圖左側所示)，使用者會開始遊戲。
• 如上圖中間所示，使用者在遊戲畫面中回答問題並提交答案。
• 如上圖右側所示，導覽匣會從應用程式側邊滑出，內含附有標題的選單。抽屜圖示 可開啟導覽匣。導覽匣選單包含「關於」頁面和遊戲規則的連結。

應用程式頂端會顯示彩色檢視畫面，稱為「應用程式列」，也稱為「動作列」。

在本程式碼研究室中，您將使用範例應用程式，其中提供完成 Trivia 應用程式所需的範本程式碼和片段類別。

1. 下載 AndroidTrivia-Starter Android Studio 專案。
2. 在 Android Studio 中開啟專案並執行應用程式。應用程式開啟後，除了顯示應用程式名稱和空白畫面外，不會執行任何動作。
   
   
   
3. 在 Android Studio 的「Project」窗格中，開啟「Project: Android」檢視畫面，即可探索專案檔案。開啟「app」>「java」資料夾，即可查看 MainActivity 類別和片段類別。
   
   
4. 開啟「res」>「layout」資料夾，然後按兩下「activity_main.xml」。版面配置編輯器會顯示 activity_main.xml 檔案。
5. 按一下「設計」分頁標籤。activity_main.xml 檔案的「Component Tree」 會將根版面配置顯示為垂直 LinearLayout。
   
   
   
   在垂直線性版面配置中，版面配置中的所有子項檢視區塊都會垂直對齊。

片段代表活動中的特定行為或特定使用者介面部分。您可以將多個片段結合為單一活動，建立多窗格使用者介面，並在多個活動中重複使用單一片段。

不妨將片段視為活動的模組化部分，例如可一併用於其他活動中的「子活動」：

• 片段有其生命週期，並會接收自己本身的輸入事件。
• 您可以在活動執行期間新增或移除片段。
• 片段是由 Kotlin 類別定義。
• 片段的 UI 由 XML 版面配置檔案定義。

AndroidTrivia 應用程式有一個主要活動和多個片段。大部分的片段及其版面配置檔案都已為您定義。在這項工作中，您會建立片段，並將片段新增至應用程式的主要活動。

步驟 1：新增片段類別

在這個步驟中，您會建立空白的 TitleFragment 類別。首先，請為新片段建立 Kotlin 類別：

1. 在 Android Studio 中，點選「Project」窗格內的任意位置，將焦點移回專案檔案。例如，按一下「com.example.android.navigation」com.example.android.navigation資料夾。
2. 依序選取「File」>「New」>「Fragment」>「Fragment (Blank)」。
3. 片段名稱請使用 TitleFragment。清除所有核取方塊，包括「create Layout XML」(建立版面配置 XML)、「include fragment factory methods」(加入片段工廠方法) 和「include interface callbacks」(加入介面回呼)。
4. 按一下「完成」。
5. 開啟 TitleFragment.kt 片段檔案 (如果尚未開啟)。其中包含 onCreateView() 方法，這是片段生命週期期間呼叫的方法之一。
6. 在 onCreateView() 中，移除 return TextView(activity).apply 區段，包括開頭為 setText 的資料行。onCreateView() 函式只會留下下列程式碼：

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
}

建立繫結物件

系統不會立即編譯片段，如要編譯片段，您需要建立繫結物件並加載片段的檢視區塊 (相當於對活動使用 setContentView())。

1. 在 TitleFragment.kt 的 onCreateView() 方法中，建立 binding 變數 (val binding)。
2. 如要擴充片段的檢視區塊，請對片段的 Binding 物件 (即 FragmentTitleBinding) 呼叫 DataBindingUtil.inflate() 方法。
   
   將四個參數傳遞至方法：

• inflater，這是用來加載繫結版面配置的 LayoutInflater。
• 要加載的版面配置 XML 資源。使用已為您定義的其中一個版面配置 R.layout.fragment_title。
• container給家長ViewGroup。(此參數為選用參數)。
• false 代表 attachToParent 值。
  

2. 將 DataBindingUtil.inflate 傳回的繫結指派給 binding 變數。
3. 從方法傳回 binding.root，其中包含加載的檢視區塊。onCreateView() 方法現在會如以下程式碼所示：

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
   val binding = DataBindingUtil.inflate<FragmentTitleBinding>(inflater,
           R.layout.fragment_title,container,false)
   return binding.root
   }

步驟 2：將新片段新增至主要版面配置檔案

在這個步驟中，您要將 TitleFragment 新增至應用程式的 activity_main.xml 版面配置檔案。

1. 開啟「res」>「layout」>「activity_main.xml」，然後按一下「Text」分頁標籤，即可查看版面配置 XML 程式碼。
2. 在現有的 LinearLayout 元素中，新增 fragment 元素。
3. 將片段的 ID 設為 titleFragment。
4. 將片段名稱設為片段類別的完整路徑，在本例中為 com.example.android.navigation.TitleFragment。
5. 將版面配置寬度和高度設為 match_parent。

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <fragment
                android:id="@+id/titleFragment"
                android:name="com.example.android.navigation.TitleFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                />
        </LinearLayout>

</layout>

6. 執行應用程式。片段已新增至主畫面。

Android Studio 專案：AndroidTriviaFragment

在本程式碼研究室中，您已將片段新增至 AndroidTrivia 應用程式，並會在接下來兩堂課的程式碼研究室中繼續使用。

• 片段是活動的模組化部分。
• 片段有其生命週期，並會接收自己本身的輸入事件。
• 使用 <fragment> 標記，在 XML 版面配置檔案中定義片段的版面配置。
• 在 onCreateView() 中加載片段的版面配置。
• 您可以在活動執行期間新增或移除片段。

Udacity 課程：

• 使用 Kotlin 開發 Android 應用程式

Android 開發人員說明文件：

• 線性版面配置
• LinearLayout
• 片段生命週期
• DataBindingUtil

本節列出的作業可由課程講師指派給學習本程式碼研究室的學員。講師可自由採取以下行動：

• 視需要指派作業。
• 告知學員如何繳交作業。
• 為作業評分。

講師可以視需求使用全部或部分建議內容，也可以自由指派任何其他合適的作業。

如果您是自行學習本程式碼研究室，不妨利用這些作業驗收學習成果。

回答以下問題

第 1 題

片段和活動有哪些差異？選取所有正確的敘述。

• 建立片段時，請在 onCreateView() 方法中擴充版面配置。建立活動時，您會在 onCreate() 中擴充版面配置。
• 活動有自己的版面配置，但片段無法有自己的版面配置。
• 活動有自己的生命週期，但片段沒有。
• 為片段或活動擴充版面配置時，您可以將版面配置參照為 R.layout.layoutname。

第 2 題

以下有關片段的敘述何者正確？請選取所有適用選項。

• 您可以在一個以上的活動中使用片段。
• 一個活動中可以有多個片段。
• 在 Kotlin 類別中定義片段後，系統就會自動將該片段加入 activity_main.xml 版面配置檔案。
• 使用 <fragment> 標記來定義要在版面配置檔案中插入片段的位置。

開始下一個課程：3.2 定義導覽路徑

如要查看本課程其他程式碼研究室的連結，請參閱 Android Kotlin 基礎知識程式碼研究室登陸頁面。