教程取自于Google官方課程之Android 之 Compose 開發基礎
教程取自于Google官方課程之Jetpack Compose 教程

Android 之 Compose 開發基礎

在本課程中，您將學習使用 Jetpack Compose 構建 Android 應用的基礎知識。Jetpack Compose 是用于構建 Android 應用的全新界面工具包。在這個過程中，您將開發一些應用，為成為一名 Android 開發者奠定基礎。

Jetpack Compose

第 1 單元：您的首個 Android 應用

學習編程基礎知識并構建您的首個 Android 應用。

1. 準備工作

在此 Codelab 中，我們將使用 Android Studio 提供的項目模板創建您的首個 Android 應用。您可以使用 Kotlin 和 Jetpack Compose 自定義您的應用。請注意，Android Studio 會進行更新，有時候界面還會發生變化，因此，如果您的 Android Studio 看起來與本 Codelab 中顯示的屏幕截圖略有不同，也沒關系。

前提條件

• 具備 Kotlin 基礎知識

所需條件

• 最新版本的 Android Studio

學習內容

• 如何使用 Android Studio 創建 Android 應用
• 如何在 Android Studio 中使用預覽工具運行應用
• 如何使用 Kotlin 更新文本
• 如何使用 Jetpack Compose 更新 UI
• 如何在 Jetpack Compose 中使用預覽功能預覽應用

您將構建的內容

• 一個可讓您自定義自我介紹的應用！

當您完成本 Codelab 后，所構建的應用將如下所示（只不過它是使用您的名字自定義的！）：

應用預覽

所需條件

• 一臺安裝了 Android Studio 的計算機。

2. 使用模板創建項目

在本 Codelab 中，我們將使用 Android Studio 提供的 Empty Compose Activity 項目模板創建一個 Android 應用。

如需在 Android Studio 中創建項目，請執行以下操作：

1. 雙擊 Android Studio 圖標來啟動 Android Studio。

Android Studio 圖標

2. 在 Welcome to Android Studio 對話框中，點擊 New Project。

New Project

New Project 窗口隨即會打開，其中列出了 Android Studio 提供的模板。

模板

在 Android Studio 中，項目模板就是用于為特定類型的應用提供藍圖的 Android 項目。模板可用來創建項目結構以及在 Android Studio 中構建項目所需的文件。系統會根據您選擇的模板提供對應的起始代碼，以便您能更快上手。

3. 務必選擇 Phone and Tablet 標簽頁。
4. 點擊 Empty Compose Activity 模板，選擇該模板作為您的項目模板。“Empty Compose Activity”模板是用于創建簡單項目的模板，您可以用它來構建 Compose 應用。這個模板只有一個屏幕，并顯示 "Hello Android!" 文本。
5. 點擊 Next。New Project 對話框隨即會打開，其中包含一些用于配置項目的字段。
6. 按如下方式配置項目：

Name 字段用于輸入項目名稱。在本 Codelab 中，請輸入“Greeting Card”。

保持 Package name 字段不變。該字段用于指定文件在文件結構中的組織方式。在本例中，軟件包名稱將會指定為 com.example.greetingcard。

保持 Save location 字段不變。該字段用于指定保存與項目相關的所有文件的位置。請記下這些文件在您計算機上的保存位置，以便查找文件。

在 Language 字段中，系統已選擇 Kotlin。“Language”字段用于指定您在構建項目時所采用的編程語言。由于 Compose 僅與 Kotlin 兼容，因此您無法更改此字段。

從 Minimum SDK 字段提供的菜單中選擇 API 21: Android 5.0 (Lollipop)。Minimum SDK 字段用于指定可運行您應用的最低 Android 版本。

Use legacy android.support libraries 復選框目前已處于取消選中狀態。

最低 Android 版本

7. 點擊 Finish。此過程可能需要一些時間，這個時候很適合來杯茶哦！在 Android Studio 設置過程中，界面中會顯示進度條和消息來指示 Android Studio 是否仍在設置您的項目，具體可能如下所示：

進度條

在創建項目設置時，系統會顯示類似如下內容的通知消息。

Gradle 同步消息

8. 您可能會看到 What's New 窗格，其中包含有關 Android Studio 新功能的最新動態。現階段，請關閉此窗格。

最新動態

9. 點擊 Android Studio 右上角的 Split，即可同時查看代碼和設計。您也可以點擊 Code，僅查看代碼；或點擊 Design，僅查看設計。

查看類型

按下 Split 后，您應該會看到以下三個區域：

查看區域

• Project 視圖 (1) 用于顯示項目的文件和文件夾
• Code 視圖 (2) 是您修改代碼的地方
• Design 視圖 (3) 是您預覽應用外觀的地方

在 Design 視圖中，您會看到一個顯示以下內容的空白窗格：

Design 窗格

10. 點擊 Build & Refresh。構建可能需要花一些時間，不過完成后，預覽便會顯示一個內容為 Hello Android! 的文本框。“Empty Compose Activity”模板會提供創建此應用所需的全部代碼。

默認預覽

3. 查找項目文件

在此部分中，我們將通過進一步熟悉文件結構，繼續對 Android Studio 展開探索。

1. 在 Android Studio 中，進入 Project 標簽頁。Project 標簽頁會顯示項目的文件和文件夾。您在設置項目時，已將軟件包名稱指定為 com.example.greetingcard。因此，您可以直接在 Project 標簽頁中看到該軟件包。軟件包基本上就是代碼所在的文件夾。Android Studio 會將項目整理成一個由軟件包組成的目錄結構。
2. 如有必要，請從 Project 標簽頁的下拉菜單中選擇 Android。

Android 菜單

這就是您使用的標準文件視圖和組織方式，在編寫項目代碼時會非常有用，因為您可以輕松訪問將在應用中使用的各個文件。不過，如果您是通過文件瀏覽器（如 Finder 或 Windows 資源管理器）瀏覽文件，則文件層次結構的組織方式會明顯不同。

3. 從下拉菜單中選擇 Project Source Files。現在，您可以像在任何文件瀏覽器中一樣瀏覽文件了。

Project Source Files

4. 再次選擇 Android，切換回上一個視圖。在本課程中，我們將使用 Android 視圖。如果您的文件結構看起來很奇怪，請檢查您是否還在 Android 視圖中。

4. 更新文本

現在，您已了解 Android Studio，是時候開始制作賀卡了！

打開 MainActivity.kt 文件的 Code 視圖。請注意，此代碼中有一些自動生成的函數，具體而言就是 onCreate() 和 setContent() 函數。

請記住，函數是程序中用于執行特定任務的部分。

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           GreetingCardTheme {
               // A surface container using the 'background' color from the theme
               Surface(
                   modifier = Modifier.fillMaxSize(),
                   color = MaterialTheme.colors.background
               ) {
                   Greeting("Android")
               }
           }
       }
   }
}

onCreate() 函數是此應用的入口點，并會調用其他函數來構建 UI。在 Kotlin 程序中，main() 函數是 Kotlin 編譯器在代碼中開始編譯的特定位置；在 Android 應用中，則是由 onCreate() 函數來擔任這個角色。

onCreate() 函數中的 setContent() 函數用于通過可組合函數定義布局。任何標有 @Composable 注解的函數都可通過 setContent() 函數或其他可組合函數進行調用。該注解可告知 Kotlin 編譯器 Jetpack Compose 使用的這個函數會生成 UI。

請注意：編譯器會接受您編寫的 Kotlin 代碼，并逐行查看，然后將其轉換成計算機可以理解的代碼。此過程稱為代碼編譯。

onCreate() 函數下的 Greeting() 函數是可組合函數。請留意它上方的 @Composable 注解。可組合函數會接受一些輸入，然后生成在屏幕上顯示的內容。

雖然我們在前面已經學習了函數（如果您需要復習，請參閱“在 Kotlin 中創建和使用函數”這個 Codelab），但可組合函數還有一些不同之處。

函數

• @Composable 函數名稱采用首字母大寫形式。
• 需在該函數前面添加 @Composable 注解。
• @Composable 函數無法返回任何內容。

@Composable
fun Greeting(name: String) {
   Text(text = "Hello $name!")
}

目前，Greeting() 函數可接收名稱，并會向其用戶顯示 Hello。

1. 更新 Greeting() 函數來介紹自己，而不是顯示“Hello”：

@Composable
fun Greeting(name: String) {
   Text(text = "Hi, my name is $name!")
}

2. 按下“Design”窗格左上角的按鈕，重新構建 DefaultPreview：

DefaultPreview

太好了！您更改了文本，但它介紹您是 Android，這可能不是您的名字吧。接下來，讓我們對這個文本進行個性化設置，以便您用自己的名字來做介紹！

DefaultPreview() 函數是一項很酷的功能，讓您無需構建整個應用就能查看應用的外觀。若要使其成為預覽函數，您需要添加 @Preview 注解。

如您所見，@Preview 注解可以接收名為 showBackground 的參數。如果 showBackground 設置為 true，則會向應用預覽添加背景。

由于 Android Studio 默認對編輯器使用淺色主題，因此我們很難看出“showBackground = true”和“showBackground = false”之間的區別。不過，如果使用深色主題，您就可以看到如下所示的區別了。請注意，下圖中的白色背景已設置為 true。

showBackground

3. 使用您的名字更新 DefaultPreview() 函數，然后重新構建并查看您的個性化賀卡！

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
   GreetingCardTheme {
       Greeting("Meghan")
   }
}

默認預覽

5. 更改文本背景顏色

現在，我們已經制作出自我介紹文本，但它有點無聊！在這一部分中，我們將了解如何更改背景顏色。

若要為自我介紹設置不同的背景顏色，您需要使用 Surface 將文本包圍起來。Surface 是一個容器，代表界面的某一部分，您可以在其中更改外觀（如背景顏色或邊框）。

1. 若要使用 Surface 將文本包圍起來，請突出顯示該行文本，按下 Alt+Enter (Windows) 或 Option+Enter (Mac)，然后選擇 Surround with widget。

Surround with widget

2. 選擇 Surround with Container。

Surround with Container

默認容器為 Box，但您可以將其更改為其他容器類型。

Box

3. 刪除 Box，改為輸入 Surface()。

@Composable
fun Greeting(name: String) {
   Surface() {
       Text(text = "Hi, my name is $name!")
   }
}

4. Surface 容器具有 color 參數，因此請輸入 Color，然后添加一個句點。您將會看到一個顯示不同顏色選項的彈出式窗口。這是 Android Studio 中一項很棒的功能，它非常智能，可以適時為您提供幫助。在此例中，該功能知道您想指定一種顏色，因此為您建議了各種顏色。

指定一種顏色

5. 為表面選擇一種顏色。本 Codelab 使用的是品紅色，但您可以選擇自己喜歡的顏色！

@Composable
fun Greeting(name: String) {
   Surface(color = Color.Magenta) {
       Text(text = "Hi, my name is $name!")
   }
}

6. 點擊 Build & Refresh。文本即會被您選擇的顏色包圍起來！

默認預覽

6. 添加內邊距

現在文本已有了背景顏色，接下來讓我們在文本周圍添加一些空格（內邊距）。

Modifier 用于擴充或修飾可組合項。您可以使用的其中一個 Modifier 是 padding 修飾符，它會在元素周圍應用空格（在本例中，是在文本周圍添加空格）。為此，請使用 Modifier.padding() 函數。

為文本添加尺寸為 24.dp 的內邊距修飾符，然后點擊 Build & Refresh。

注意：我們將在下一個開發者在線課程中詳細了解密度無關像素 (DP)，但如果您現在就想了解更多內容，請參閱這篇文章。

@Composable
fun Greeting(name: String) {
   Surface(color = Color.Magenta) {
       Text(text = "Hi, my name is $name!", modifier = Modifier.padding(24.dp))
   }
}

默認預覽

恭喜，您已經在 Compose 中構建了自己的首個 Android 應用！這不是一件容易的事，但是您做得很好。不妨花些時間試試其他顏色和文本，打造您的個人專屬應用吧！

7. 查看解決方案代碼

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           GreetingCardTheme {
               // A surface container that uses the 'background' color from the theme
               Surface(color = MaterialTheme.colors.background) {
                   Greeting("Android")
               }
           }
       }
   }
}

@Composable
fun Greeting(name: String) {
   Surface(color = Color.Magenta) {
       Text(text = "Hi, my name is $name!", modifier = Modifier.padding(24.dp))
   }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
   GreetingCardTheme {
       Greeting("Meghan")
   }
}

8. 總結

您已了解 Android Studio，并使用 Compose 構建了自己的首個 Android 應用，太棒了！

總結要點

• 創建新項目的具體方法為：打開 Android Studio，依次點擊 New Project > Empty Compose Activity > Next，輸入項目名稱，然后配置該項目的設置。
• 如要查看應用的外觀，請使用 Preview 窗格。
• 可組合函數與常規函數類似，但存在以下區別：函數名稱采用首字母大寫形式，需在該函數前面添加 @Composable 注解，@Composable 函數無法返回任何內容。
• Modifier 用于擴充或修飾可組合項。