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.ktonCreateView() 方法中,建立 binding 變數 (val binding)。
  2. 如要擴充片段的檢視區塊,請對片段的 Binding 物件 (即 FragmentTitleBinding) 呼叫 DataBindingUtil.inflate() 方法。

    將四個參數傳遞至方法:
  • inflater,這是用來加載繫結版面配置的 LayoutInflater
  • 要加載的版面配置 XML 資源。使用已為您定義的其中一個版面配置 R.layout.fragment_title
  • container給家長ViewGroup。(此參數為選用參數)。
  • false 代表 attachToParent 值。
  1. DataBindingUtil.inflate 傳回的繫結指派給 binding 變數。
  2. 從方法傳回 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>
  1. 執行應用程式。片段已新增至主畫面。

Android Studio 專案:AndroidTriviaFragment

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

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

Udacity 課程:

Android 開發人員說明文件:

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

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

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

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

回答以下問題

第 1 題

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

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

第 2 題

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

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

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

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