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

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

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

Jetpack Compose

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

學(xué)習(xí)編程基礎(chǔ)知識并構(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)用兆衅。請注意地沮，Android Studio 會進(jìn)行更新，有時(shí)候界面還會發(fā)生變化羡亩，因此摩疑，如果您的 Android Studio 看起來與本 Codelab 中顯示的屏幕截圖略有不同，也沒關(guān)系畏铆。

前提條件

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

所需條件

• 最新版本的 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)用將如下所示（只不過它是使用您的名字自定義的４蔷印）：

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

所需條件

• 一臺安裝了 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)目率寡，請執(zhí)行以下操作：

1. 雙擊 Android Studio 圖標(biāo)來啟動 Android Studio。

Android Studio 圖標(biāo)

2. 在 Welcome to Android Studio 對話框中倚搬，點(diǎn)擊 New Project冶共。

New Project

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

模板

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

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

Name 字段用于輸入項(xiàng)目名稱卧秘。在本 Codelab 中呢袱，請輸入“Greeting Card”。

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

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

在 Language 字段中，系統(tǒng)已選擇 Kotlin液肌⌒妫“Language”字段用于指定您在構(gòu)建項(xiàng)目時(shí)所采用的編程語言。由于 Compose 僅與 Kotlin 兼容嗦哆，因此您無法更改此字段谤祖。

從 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。此過程可能需要一些時(shí)間橘券，這個(gè)時(shí)候很適合來杯茶哦额湘！在 Android Studio 設(shè)置過程中卿吐，界面中會顯示進(jìn)度條和消息來指示 Android Studio 是否仍在設(shè)置您的項(xiàng)目，具體可能如下所示：

進(jìn)度條

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

Gradle 同步消息

8. 您可能會看到 What's New 窗格，其中包含有關(guān) Android Studio 新功能的最新動態(tài)√夯溃現(xiàn)階段衍腥，請關(guān)閉此窗格。

最新動態(tài)

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

查看類型

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

查看區(qū)域

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

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

Design 窗格

10. 點(diǎn)擊 Build & Refresh憾儒。構(gòu)建可能需要花一些時(shí)間询兴，不過完成后襟士，預(yù)覽便會顯示一個(gè)內(nèi)容為 Hello Android! 的文本框巾乳∩嵘常“Empty Compose Activity”模板會提供創(chuàng)建此應(yīng)用所需的全部代碼腥沽。

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

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

在此部分中隔箍，我們將通過進(jìn)一步熟悉文件結(jié)構(gòu)抱慌，繼續(xù)對 Android Studio 展開探索豺谈。

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

Android 菜單

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

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

Project Source Files

4. 再次選擇 Android兢哭，切換回上一個(gè)視圖领舰。在本課程中，我們將使用 Android 視圖迟螺。如果您的文件結(jié)構(gòu)看起來很奇怪冲秽，請檢查您是否還在 Android 視圖中。

4. 更新文本

現(xiàn)在矩父，您已了解 Android Studio锉桑，是時(shí)候開始制作賀卡了！

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

請記住后裸，函數(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)冒滩，并會調(diào)用其他函數(shù)來構(gòu)建 UI微驶。在 Kotlin 程序中，main() 函數(shù)是 Kotlin 編譯器在代碼中開始編譯的特定位置开睡；在 Android 應(yīng)用中因苹，則是由 onCreate() 函數(shù)來擔(dān)任這個(gè)角色。

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

請注意：編譯器會接受您編寫的 Kotlin 代碼婚度，并逐行查看蘸秘，然后將其轉(zhuǎn)換成計(jì)算機(jī)可以理解的代碼。此過程稱為代碼編譯蝗茁。

onCreate() 函數(shù)下的 Greeting() 函數(shù)是可組合函數(shù)醋虏。請留意它上方的 @Composable 注解∠蹋可組合函數(shù)會接受一些輸入颈嚼，然后生成在屏幕上顯示的內(nèi)容。

雖然我們在前面已經(jīng)學(xué)習(xí)了函數(shù)（如果您需要復(fù)習(xí)饭寺，請參閱“在 Kotlin 中創(chuàng)建和使用函數(shù)”這個(gè) Codelab）阻课，但可組合函數(shù)還有一些不同之處叫挟。

函數(shù)

• @Composable 函數(shù)名稱采用首字母大寫形式。
• 需在該函數(shù)前面添加 @Composable 注解限煞。
• @Composable 函數(shù)無法返回任何內(nèi)容抹恳。

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

目前，Greeting() 函數(shù)可接收名稱署驻，并會向其用戶顯示 Hello奋献。

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

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

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

DefaultPreview

太好了瓶蚂！您更改了文本，但它介紹您是 Android宣吱，這可能不是您的名字吧窃这。接下來，讓我們對這個(gè)文本進(jìn)行個(gè)性化設(shè)置征候，以便您用自己的名字來做介紹杭攻！

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

如您所見卒煞，@Preview 注解可以接收名為 showBackground 的參數(shù)。如果 showBackground 設(shè)置為 true叼架，則會向應(yīng)用預(yù)覽添加背景畔裕。

由于 Android Studio 默認(rèn)對編輯器使用淺色主題，因此我們很難看出“showBackground = true”和“showBackground = false”之間的區(qū)別乖订。不過扮饶，如果使用深色主題，您就可以看到如下所示的區(qū)別了乍构。請注意甜无，下圖中的白色背景已設(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)無聊奥帘！在這一部分中，我們將了解如何更改背景顏色仪召。

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

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

Surround with widget

2. 選擇 Surround with Container吐句。

Surround with Container

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

Box

3. 刪除 Box嗦枢，改為輸入 Surface()攀芯。

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

4. Surface 容器具有 color 參數(shù)，因此請輸入 Color文虏，然后添加一個(gè)句點(diǎn)侣诺。您將會看到一個(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弛作。文本即會被您選擇的顏色包圍起來涕蜂！

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

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

現(xiàn)在文本已有了背景顏色，接下來讓我們在文本周圍添加一些空格（內(nèi)邊距）映琳。

Modifier 用于擴(kuò)充或修飾可組合項(xiàng)机隙。您可以使用的其中一個(gè) Modifier 是 padding 修飾符，它會在元素周圍應(yīng)用空格（在本例中萨西，是在文本周圍添加空格）有鹿。為此，請使用 Modifier.padding() 函數(shù)原杂。

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

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

@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è)人專屬應(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)目的具體方法為：打開 Android Studio，依次點(diǎn)擊 New Project > Empty Compose Activity > Next粪薛，輸入項(xiàng)目名稱悴了，然后配置該項(xiàng)目的設(shè)置。
• 如要查看應(yīng)用的外觀违寿，請使用 Preview 窗格湃交。
• 可組合函數(shù)與常規(guī)函數(shù)類似，但存在以下區(qū)別：函數(shù)名稱采用首字母大寫形式藤巢，需在該函數(shù)前面添加 @Composable 注解搞莺，@Composable 函數(shù)無法返回任何內(nèi)容。
• Modifier 用于擴(kuò)充或修飾可組合項(xiàng)掂咒。