建立第一個 Android 應用程式

1. 事前準備

如果尚未在電腦上安裝 Android Studio，請先安裝。您必須確認電腦符合執行 Android Studio 的系統需求 (位於下載頁面的底部)。如需設定程序的詳細操作說明，請查看「下載並安裝 Android Studio」程式碼研究室。

在這個程式碼研究室中，您可以使用 Android Studio 提供的專案範本建立第一個 Android 應用程式。您可以透過 Kotlin 和 Jetpack Compose 自訂應用程式。請注意，Android Studio 會更新，有時使用者介面也會變更，所以如果 Android Studio 和這個程式碼研究室中的螢幕截圖稍有不同，也是屬於正常情況。

必要條件

• Kotlin 基本知識

軟硬體需求

• 最新版 Android Studio

課程內容

• 如何使用 Android Studio 建立 Android 應用程式
• 如何在 Android Studio 中使用預覽工具執行應用程式
• 如何使用 Kotlin 更新文字
• 如何使用 Jetpack Compose 更新使用者介面 (UI)
• 如何在 Jetpack Compose 中使用預覽功能預覽應用程式

建構項目

• 這款應用程式可讓您自訂簡介！

完成這個程式碼研究室後，您所建構的應用程式外觀看起來會如下所示 (不過系統會用您的名稱加以自訂！)：

軟硬體需求

• 已安裝 Android Studio 的電腦。

2. 觀看程式設計示範影片 (可略過)

如果您想觀看課程老師示範完成此程式碼研究室，請觀看以下影片。

建議您在全螢幕模式下觀看影片 (點選影片右下角的 圖示)，以便清楚看見 Android Studio 和程式碼。

您可以跳過這個步驟，也可以不觀看這段影片，立即開始執行程式碼研究室的操作步驟。

3. 使用範本建立專案

在這個程式碼研究室中，您可以使用 Android Studio 提供的 Empty Compose Activity 專案範本建立 Android 應用程式。

如要在 Android Studio 中建立專案：

1. 按兩下 Android Studio 圖示來啟動 Android Studio。

2. 在「Welcome to Android Studio」對話方塊中，按一下「New Project」。

「New Project」視窗會隨即開啟，其中列出 Android Studio 提供的範本清單。

在 Android Studio 中，專案範本是一個可為特定類型應用程式提供藍圖的 Android 專案。範本會建立專案的結構，以及 Android Studio 建立專案所需的檔案。根據您選擇的範本，系統可提供範例程式碼來協助加快速度。

3. 確認已選取「Phone and Tablet」分頁標籤。
4. 按一下「Empty Compose Activity」範本，選取該範本做為專案的範本。「Empty Compose Activity template」這個範本可用來建立簡易專案，您可以使用此專案來建構 Compose 應用程式。這個範本只有單一螢幕畫面，並顯示「"Hello Android!"」的文字。
5. 按一下「Next」。「New Project」對話方塊隨即會開啟。您可以使用以下欄位來設定專案。
6. 按以下方式設定專案：

「Name」欄位用於輸入專案名稱。在這個程式碼研究室中，請輸入「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」核取方塊。

7. 按一下「Finish」。請稍待片刻，這時候不妨來杯茶吧！在 Android Studio 設定期間，系統會顯示進度列和訊息，指出 Android Studio 是否仍在設定您的專案。畫面可能會如下所示：

專案設定建立時，會出現類似以下的訊息通知您。

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

9. 按一下 Android Studio 右上方的「Split」，即可同時查看程式碼和設計。您也可以按一下「Code」只查看程式碼，或按一下「Design」只查看設計。

按下「Split」後，應該會看到三個區域：

• 「Project」檢視畫面 (1) 用於顯示專案的檔案和資料夾
• 「Code」檢視畫面 (2) 是您修改程式碼的地方
• Design檢視畫面 (3) 可讓您預覽應用程式的外觀。

在「Design」檢視畫面中，您會看到一個顯示以下文字的空白窗格：

10. 按一下「Build & Refresh」。建構作業可能需要一段時間才能完成，不過完成後，預覽畫面就會顯示「Hello Android!」的文字方塊。「Empty Compose」活動包含所有建立這個應用程式所需的程式碼。

4. 尋找專案檔案

在這個部分中，您將進一步瞭解檔案結構，藉此繼續探索 Android Studio。

1. 在 Android Studio 中查看「Project」分頁標籤。「Project」分頁標籤會顯示專案的檔案和資料夾。設定專案時，套件名稱為 com.example.greetingcard。您可以在「Project」分頁標籤中查看該套件。套件基本上就是程式碼所在的資料夾。Android Studio 會將專案整理成由套件組成的目錄結構。
2. 如有需要，請在「Project」分頁的下拉式選單中選取「Android」。

這就是您使用的檔案標準檢視和架構，對於為專案撰寫程式碼相當實用，因為您可以輕鬆存取將在應用程式中處理的檔案。不過，如果在檔案瀏覽器 (例如 Finder 或 Windows 檔案總管) 中查看檔案，檔案階層的結構會有所不同。

3. 在下拉式選單中選取「Project Source Files」。您現在可以使用與任何檔案瀏覽器相同的方式瀏覽檔案。

4. 再次選取「Android」，以切換回前一個檢視畫面。您將在本課程中使用 Android 裝置。如果檔案結構看起來很奇怪，請確認您目前是否仍在 Android 檢視畫面中。

5. 更新文字

認識 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() 函式是這個應用程式的進入點，會呼叫其他函式來建立使用者介面。在 Kotlin 程式中，main() 函式是 Kotlin 編譯器在程式碼中開始編譯的特定位置。在 Android 應用程式中，則是由 onCreate() 函式擔任這個角色。

onCreate() 函式中的 setContent() 函式透過可組合函式用來定義版面配置。任何標有 @Composable 註解的函式都可以從 setContent() 函式或其他可組合函式進行呼叫。該註解告知 Kotlin 編譯器 Jetpack Compose 使用這個函式來產生使用者介面。

接下來，請查看 Greeting() 函式。Greeting() 函式是可組合函式，請留意上方的 @Composable 註解。可組合函式會接受部分輸入內容，並產生螢幕上顯示的內容。

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

雖然我們在前面已瞭解了函式 (如需複習，請參閱「建立及使用 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. 重構 DefaultPreview 的方法是按一下設計窗格左上角的 按鈕：

太好了！您變更了文字，但系統卻向您介紹 Android，但這應該不是您的名字吧。接下來，必須進行個人化設定，才能向大家介紹您的姓名！

DefaultPreview() 函式是一項很酷的功能，讓您不需建構整個應用程式，就可以查看應用程式外觀。如要使其成為預覽函式，則必須新增 @Preview 註解。

如您所見，@Preview 註解使用名為 showBackground 的參數。如果將 showBackground 設為 true，應用程式預覽就會加上背景。

由於 Android Studio 預設編輯器使用的是淺色主題，因此很難看出 showBackground = true 和 showBackground = false 兩者的差別。不過，使用深色主題就可以看出差別了。請注意，圖片中的白色背景已設定為 True。

3. 使用您的名字更新 DefaultPreview() 函式。接著重新建立並查看您的個人化賀卡！

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

6. 變更背景顏色

您已完成自我介紹的文字，但有點無聊！這個章節將說明如何變更背景顏色。

如要為自我介紹設定不同的背景顏色，請使用 Surface 將文字包圍起來。Surface 是一個容器，代表使用者介面的一部分，您可以在其中更改外觀 (例如背景顏色或邊框)。

1. 如要使用 Surface 包圍文字，請醒目顯示以下這行，按下 Alt+Enter (Windows) 或 Option+Enter (Mac)，然後選取「Surround with widget」。

2. 選擇「Surround with Container」。

預設容器為 Box，但您可以將其變更為其他容器類型。

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

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

4. Surface 容器包含 color 參數，並將其設為 Color。

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

5. 輸入顏色時，可能會看到紅色並加上底線。如要解決這個問題，請捲動至檔案頂端顯示「匯入」的地方，然後按下三個按鈕。

6. 將此陳述式新增至匯入清單底部。

import androidx.compose.ui.graphics.Color

完整的匯入清單看起來會像這樣：

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.myapplication.ui.theme.GreetingCard
import androidx.compose.ui.graphics.Color

7. 在您的編碼中，最佳做法是按匯入字母順序列出。方法是按一下頂端工具列中的「Help」(說明)，然後輸入「Optimize Imports」(最佳化匯入) ，再按一下「Optimize Imports」(最佳化匯入)。

完整的匯入清單看起來會像這樣：

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import com.example.myapplication.ui.theme.GreetingCard

8. 請注意，您在 Surface 括號中輸入的 Color 已從字體紅色與畫底線，改成以紅色底線標示。如要修正這個問題，請在後方加上句號。畫面上會顯示彈出式視窗，當中列出各種不同的顏色選項。

這是 Android Studio 中很酷的智慧型功能，可適時提供協助。在此情況下，這項功能知道您想要指定顏色，因此建議了不同的顏色。

9. 選擇界面的顏色。這個程式碼研究室使用的是洋紅色，但您可以選擇自己喜歡的顏色！

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

10. 按一下「Build & Refresh」。文字隨即會被您選擇的顏色包圍起來！

7. 加上邊框間距

現在文字有了背景顏色，接下來則是要在文字周圍加上一些間距，也就是邊框間距。

Modifier 是用來擴增或裝飾可組合的內容。您可以使用 padding 修飾符來修改元素，這個元素會將間距套用至該元素周圍 (這裡指的是文字周圍的間距)。此方法為使用 Modifier.padding() 函式來完成。

1. 將這些匯入項目新增至匯入陳述式部分。

請務必使用「最佳化匯入」功能以排序新匯入的資料。

import androidx.compose.ui.unit.dp
import androidx.compose.foundation.layout.padding

2. 在文字中加入 24.dp 的文字邊框間距修飾詞，然後按一下「Build & Refresh」。

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

恭喜，您已經在 Compose 中建立了第一個 Android 應用程式！這不是件容易的事。不妨花些時間嘗試各種顏色和文字，打造個人專屬的應用程式！

8. 查看解決方案程式碼

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.padding
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.GreetingCardTheme

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")
   }
}

9. 結語

您已經瞭解 Android Studio，並使用 Compose 建立了第一個 Android 應用程式，太棒了！

這個程式碼研究室是「Android 基本概念：使用 Compose」課程的一部分。如要瞭解如何在模擬器或實體裝置中執行您的應用程式，請查看此課程的後續程式碼研究室。

摘要

• 如要建立新專案：請開啟 Android Studio，依序點選「New Project」>「Empty Compose Activity」>「Next」，輸入專案名稱，然後調整專案設定。
• 您可以使用預覽窗格，查看應用程式的外觀。
• 可組合函式與一般函式類似，但仍有一些差異：函式名稱採用首字母大寫、必須在函式前面加上 @Composable 註解，以及 @Composable 函式無法傳回任何值。
• Modifier 是用來擴增或裝飾可組合的內容。

瞭解詳情

• Android Kotlin 基本概念的相關詞彙
• 認識 Android Studio
• 專案總覽
• 建立專案
• 加入範本中的程式碼
• Jetpack Compose