教程取自于Google官方課程之Android 之 Compose 開(kāi)發(fā)基礎(chǔ)
教程取自于Google官方課程之Jetpack Compose 教程

Android 之 Compose 開(kāi)發(fā)基礎(chǔ)

在本課程中，您將學(xué)習(xí)使用 Jetpack Compose 構(gòu)建 Android 應(yīng)用的基礎(chǔ)知識(shí)。Jetpack Compose 是用于構(gòu)建 Android 應(yīng)用的全新界面工具包。在這個(gè)過(guò)程中，您將開(kāi)發(fā)一些應(yīng)用，為成為一名 Android 開(kāi)發(fā)者奠定基礎(chǔ)。

Jetpack Compose

第 1 單元：您的首個(gè) Android 應(yīng)用

學(xué)習(xí)編程基礎(chǔ)知識(shí)并構(gòu)建您的首個(gè) Android 應(yīng)用。

1. 準(zhǔn)備工作

在此 Codelab 中，我們將使用 Android Studio 提供的項(xiàng)目模板創(chuàng)建您的首個(gè) Android 應(yīng)用。您可以使用 Kotlin 和 Jetpack Compose 自定義您的應(yīng)用。請(qǐng)注意，Android Studio 會(huì)進(jìn)行更新，有時(shí)候界面還會(huì)發(fā)生變化，因此，如果您的 Android Studio 看起來(lái)與本 Codelab 中顯示的屏幕截圖略有不同，也沒(méi)關(guān)系。

前提條件

• 具備 Kotlin 基礎(chǔ)知識(shí)

所需條件

• 最新版本的 Android Studio

學(xué)習(xí)內(nèi)容

• 如何使用 Android Studio 創(chuàng)建 Android 應(yīng)用
• 如何在 Android Studio 中使用預(yù)覽工具運(yùn)行應(yīng)用
• 如何使用 Kotlin 更新文本
• 如何使用 Jetpack Compose 更新 UI
• 如何在 Jetpack Compose 中使用預(yù)覽功能預(yù)覽應(yīng)用

您將構(gòu)建的內(nèi)容

• 一個(gè)可讓您自定義自我介紹的應(yīng)用！

當(dāng)您完成本 Codelab 后，所構(gòu)建的應(yīng)用將如下所示（只不過(guò)它是使用您的名字自定義的?。?/p>

應(yīng)用預(yù)覽

所需條件

• 一臺(tái)安裝了 Android Studio 的計(jì)算機(jī)。

2. 使用模板創(chuàng)建項(xiàng)目

在本 Codelab 中，我們將使用 Android Studio 提供的 Empty Compose Activity 項(xiàng)目模板創(chuàng)建一個(gè) Android 應(yīng)用。

如需在 Android Studio 中創(chuàng)建項(xiàng)目，請(qǐng)執(zhí)行以下操作：

1. 雙擊 Android Studio 圖標(biāo)來(lái)啟動(dòng) Android Studio。

Android Studio 圖標(biāo)

2. 在 Welcome to Android Studio 對(duì)話框中，點(diǎn)擊 New Project。

New Project

New Project 窗口隨即會(huì)打開(kāi)，其中列出了 Android Studio 提供的模板。

模板

在 Android Studio 中，項(xiàng)目模板就是用于為特定類(lèi)型的應(yīng)用提供藍(lán)圖的 Android 項(xiàng)目。模板可用來(lái)創(chuàng)建項(xiàng)目結(jié)構(gòu)以及在 Android Studio 中構(gòu)建項(xiàng)目所需的文件。系統(tǒng)會(huì)根據(jù)您選擇的模板提供對(duì)應(yīng)的起始代碼，以便您能更快上手。

3. 務(wù)必選擇 Phone and Tablet 標(biāo)簽頁(yè)。
4. 點(diǎn)擊 Empty Compose Activity 模板，選擇該模板作為您的項(xiàng)目模板。“Empty Compose Activity”模板是用于創(chuàng)建簡(jiǎn)單項(xiàng)目的模板，您可以用它來(lái)構(gòu)建 Compose 應(yīng)用。這個(gè)模板只有一個(gè)屏幕，并顯示 "Hello Android!" 文本。
5. 點(diǎn)擊 Next。New Project 對(duì)話框隨即會(huì)打開(kāi)，其中包含一些用于配置項(xiàng)目的字段。
6. 按如下方式配置項(xiàng)目：

Name 字段用于輸入項(xiàng)目名稱(chēng)。在本 Codelab 中，請(qǐng)輸入“Greeting Card”。

保持 Package name 字段不變。該字段用于指定文件在文件結(jié)構(gòu)中的組織方式。在本例中，軟件包名稱(chēng)將會(huì)指定為 com.example.greetingcard。

保持 Save location 字段不變。該字段用于指定保存與項(xiàng)目相關(guān)的所有文件的位置。請(qǐng)記下這些文件在您計(jì)算機(jī)上的保存位置，以便查找文件。

在 Language 字段中，系統(tǒng)已選擇 Kotlin?！癓anguage”字段用于指定您在構(gòu)建項(xiàng)目時(shí)所采用的編程語(yǔ)言。由于 Compose 僅與 Kotlin 兼容，因此您無(wú)法更改此字段。

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

Use legacy android.support libraries 復(fù)選框目前已處于取消選中狀態(tài)。

最低 Android 版本

7. 點(diǎn)擊 Finish。此過(guò)程可能需要一些時(shí)間，這個(gè)時(shí)候很適合來(lái)杯茶哦！在 Android Studio 設(shè)置過(guò)程中，界面中會(huì)顯示進(jìn)度條和消息來(lái)指示 Android Studio 是否仍在設(shè)置您的項(xiàng)目，具體可能如下所示：

進(jìn)度條

在創(chuàng)建項(xiàng)目設(shè)置時(shí)，系統(tǒng)會(huì)顯示類(lèi)似如下內(nèi)容的通知消息。

Gradle 同步消息

8. 您可能會(huì)看到 What's New 窗格，其中包含有關(guān) Android Studio 新功能的最新動(dòng)態(tài)?，F(xiàn)階段，請(qǐng)關(guān)閉此窗格。

最新動(dòng)態(tài)

9. 點(diǎn)擊 Android Studio 右上角的 Split，即可同時(shí)查看代碼和設(shè)計(jì)。您也可以點(diǎn)擊 Code，僅查看代碼；或點(diǎn)擊 Design，僅查看設(shè)計(jì)。

查看類(lèi)型

按下 Split 后，您應(yīng)該會(huì)看到以下三個(gè)區(qū)域：

查看區(qū)域

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

在 Design 視圖中，您會(huì)看到一個(gè)顯示以下內(nèi)容的空白窗格：

Design 窗格

10. 點(diǎn)擊 Build & Refresh。構(gòu)建可能需要花一些時(shí)間，不過(guò)完成后，預(yù)覽便會(huì)顯示一個(gè)內(nèi)容為 Hello Android! 的文本框?！癊mpty Compose Activity”模板會(huì)提供創(chuàng)建此應(yīng)用所需的全部代碼。

默認(rèn)預(yù)覽

3. 查找項(xiàng)目文件

在此部分中，我們將通過(guò)進(jìn)一步熟悉文件結(jié)構(gòu)，繼續(xù)對(duì) Android Studio 展開(kāi)探索。

1. 在 Android Studio 中，進(jìn)入 Project 標(biāo)簽頁(yè)。Project 標(biāo)簽頁(yè)會(huì)顯示項(xiàng)目的文件和文件夾。您在設(shè)置項(xiàng)目時(shí)，已將軟件包名稱(chēng)指定為 com.example.greetingcard。因此，您可以直接在 Project 標(biāo)簽頁(yè)中看到該軟件包。軟件包基本上就是代碼所在的文件夾。Android Studio 會(huì)將項(xiàng)目整理成一個(gè)由軟件包組成的目錄結(jié)構(gòu)。
2. 如有必要，請(qǐng)從 Project 標(biāo)簽頁(yè)的下拉菜單中選擇 Android。

Android 菜單

這就是您使用的標(biāo)準(zhǔn)文件視圖和組織方式，在編寫(xiě)項(xiàng)目代碼時(shí)會(huì)非常有用，因?yàn)槟梢暂p松訪問(wèn)將在應(yīng)用中使用的各個(gè)文件。不過(guò)，如果您是通過(guò)文件瀏覽器（如 Finder 或 Windows 資源管理器）瀏覽文件，則文件層次結(jié)構(gòu)的組織方式會(huì)明顯不同。

3. 從下拉菜單中選擇 Project Source Files?，F(xiàn)在，您可以像在任何文件瀏覽器中一樣瀏覽文件了。

Project Source Files

4. 再次選擇 Android，切換回上一個(gè)視圖。在本課程中，我們將使用 Android 視圖。如果您的文件結(jié)構(gòu)看起來(lái)很奇怪，請(qǐng)檢查您是否還在 Android 視圖中。

4. 更新文本

現(xiàn)在，您已了解 Android Studio，是時(shí)候開(kāi)始制作賀卡了！

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

請(qǐng)記住，函數(shù)是程序中用于執(zhí)行特定任務(wù)的部分。

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() 函數(shù)是此應(yīng)用的入口點(diǎn)，并會(huì)調(diào)用其他函數(shù)來(lái)構(gòu)建 UI。在 Kotlin 程序中，main() 函數(shù)是 Kotlin 編譯器在代碼中開(kāi)始編譯的特定位置；在 Android 應(yīng)用中，則是由 onCreate() 函數(shù)來(lái)?yè)?dān)任這個(gè)角色。

onCreate() 函數(shù)中的 setContent() 函數(shù)用于通過(guò)可組合函數(shù)定義布局。任何標(biāo)有 @Composable 注解的函數(shù)都可通過(guò) setContent() 函數(shù)或其他可組合函數(shù)進(jìn)行調(diào)用。該注解可告知 Kotlin 編譯器 Jetpack Compose 使用的這個(gè)函數(shù)會(huì)生成 UI。

請(qǐng)注意：編譯器會(huì)接受您編寫(xiě)的 Kotlin 代碼，并逐行查看，然后將其轉(zhuǎn)換成計(jì)算機(jī)可以理解的代碼。此過(guò)程稱(chēng)為代碼編譯。

onCreate() 函數(shù)下的 Greeting() 函數(shù)是可組合函數(shù)。請(qǐng)留意它上方的 @Composable 注解?？山M合函數(shù)會(huì)接受一些輸入，然后生成在屏幕上顯示的內(nèi)容。

雖然我們?cè)谇懊嬉呀?jīng)學(xué)習(xí)了函數(shù)（如果您需要復(fù)習(xí)，請(qǐng)參閱“在 Kotlin 中創(chuàng)建和使用函數(shù)”這個(gè) Codelab），但可組合函數(shù)還有一些不同之處。

函數(shù)

• @Composable 函數(shù)名稱(chēng)采用首字母大寫(xiě)形式。
• 需在該函數(shù)前面添加 @Composable 注解。
• @Composable 函數(shù)無(wú)法返回任何內(nèi)容。

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

目前，Greeting() 函數(shù)可接收名稱(chēng)，并會(huì)向其用戶顯示 Hello。

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

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

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

DefaultPreview

太好了！您更改了文本，但它介紹您是 Android，這可能不是您的名字吧。接下來(lái)，讓我們對(duì)這個(gè)文本進(jìn)行個(gè)性化設(shè)置，以便您用自己的名字來(lái)做介紹！

DefaultPreview() 函數(shù)是一項(xiàng)很酷的功能，讓您無(wú)需構(gòu)建整個(gè)應(yīng)用就能查看應(yīng)用的外觀。若要使其成為預(yù)覽函數(shù)，您需要添加 @Preview 注解。

如您所見(jiàn)，@Preview 注解可以接收名為 showBackground 的參數(shù)。如果 showBackground 設(shè)置為 true，則會(huì)向應(yīng)用預(yù)覽添加背景。

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

showBackground

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

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

默認(rèn)預(yù)覽

5. 更改文本背景顏色

現(xiàn)在，我們已經(jīng)制作出自我介紹文本，但它有點(diǎn)無(wú)聊！在這一部分中，我們將了解如何更改背景顏色。

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

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

Surround with widget

2. 選擇 Surround with Container。

Surround with Container

默認(rèn)容器為 Box，但您可以將其更改為其他容器類(lèi)型。

Box

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

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

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

指定一種顏色

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

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

6. 點(diǎn)擊 Build & Refresh。文本即會(huì)被您選擇的顏色包圍起來(lái)！

默認(rèn)預(yù)覽

6. 添加內(nèi)邊距

現(xiàn)在文本已有了背景顏色，接下來(lái)讓我們?cè)谖谋局車(chē)砑右恍┛崭瘢▋?nèi)邊距）。

Modifier 用于擴(kuò)充或修飾可組合項(xiàng)。您可以使用的其中一個(gè) Modifier 是 padding 修飾符，它會(huì)在元素周?chē)鷳?yīng)用空格（在本例中，是在文本周?chē)砑涌崭瘢?。為此，?qǐng)使用 Modifier.padding() 函數(shù)。

為文本添加尺寸為 24.dp 的內(nèi)邊距修飾符，然后點(diǎn)擊 Build & Refresh。

注意：我們將在下一個(gè)開(kāi)發(fā)者在線課程中詳細(xì)了解密度無(wú)關(guān)像素 (DP)，但如果您現(xiàn)在就想了解更多內(nèi)容，請(qǐng)參閱這篇文章。

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

默認(rèn)預(yù)覽

恭喜，您已經(jīng)在 Compose 中構(gòu)建了自己的首個(gè) Android 應(yīng)用！這不是一件容易的事，但是您做得很好。不妨花些時(shí)間試試其他顏色和文本，打造您的個(gè)人專(zhuān)屬應(yīng)用吧！

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. 總結(jié)

您已了解 Android Studio，并使用 Compose 構(gòu)建了自己的首個(gè) Android 應(yīng)用，太棒了！

總結(jié)要點(diǎn)

• 創(chuàng)建新項(xiàng)目的具體方法為：打開(kāi) Android Studio，依次點(diǎn)擊 New Project > Empty Compose Activity > Next，輸入項(xiàng)目名稱(chēng)，然后配置該項(xiàng)目的設(shè)置。
• 如要查看應(yīng)用的外觀，請(qǐng)使用 Preview 窗格。
• 可組合函數(shù)與常規(guī)函數(shù)類(lèi)似，但存在以下區(qū)別：函數(shù)名稱(chēng)采用首字母大寫(xiě)形式，需在該函數(shù)前面添加 @Composable 注解，@Composable 函數(shù)無(wú)法返回任何內(nèi)容。
• Modifier 用于擴(kuò)充或修飾可組合項(xiàng)。