建立第一個 Android 應用程式

1. 事前準備

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

必要條件

  • 具備 Kotlin 基本知識。

軟硬體需求

  • 最新版 Android Studio。

課程內容

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

建構項目

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

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

這張圖片顯示預設的預覽畫面,搭配「Hi, my name is Meghan!」的說明文字,以及洋紅色背景和邊框間距。

軟硬體需求

  • 已安裝 Android Studio 的電腦。

2. 使用範本建立專案

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

如要在 Android Studio 中建立專案:

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

這張圖片顯示 Android Studio 的標誌。

  1. 在「Welcome to Android Studio」對話方塊中,按一下「New Project」

這張圖片是 Android Studio 的開啟頁面

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

這張圖片顯示「New project」視窗,其中包含用來為手機和平板電腦、Wear OS、Android TV 和 Automotive 建立應用程式時適用的範本。

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

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

「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」核取方塊。

d22bfe6ae8de4147.png

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

這張圖片顯示進度列旁出現旋轉的圓圈,並顯示「2 processes running...」的文字。

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

這張圖片顯示 Gradle 同步處理訊息,該則訊息的內容為「Gradle sync finished in 44s 546 ms」。

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

這張圖片顯示「What's New」窗格,其中提供有關 Android Studio 更新的相關資訊。

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

b19824b6bdd2eb0e.png

按下「Split」後,應該會看到三個區域:

1dd07c51c7fff62c.png

「Project」檢視畫面 (1) 用於顯示專案的檔案和資料夾

「Code」檢視畫面 (2) 是您修改程式碼的地方

「Design」檢視畫面 (3) 可讓您預覽應用程式的外觀。

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

這段文字其中一行為:「A successful build is needed before the preview can be displayed」,在該行下方則為「Build and Refresh」。

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

這張圖片顯示預設預覽畫面,畫面上顯示「Hello Android!」的文字。

3. 尋找專案檔案

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

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

這張圖片顯示「Android」選單的「Project」分頁標籤。

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

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

這張圖片顯示「Project」分頁標籤,其中已選取「Project Source Files」選單。

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

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

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

雖然我們在前面已瞭解了函式 (如需複習,請參閱「建立及使用 Kotlin 函式」這個 codelab),但可組合函式仍有些不同之處。

67e3f969c53e7149.png

  • @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!")
}
  1. 按下設計窗格左上方的 2c3d9b02e673771c.png 按鈕,即可重新建立 DefaultPreview:

這張圖片顯示預設預覽畫面,畫面上會顯示「Hello Android!」的文字。

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

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

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

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

這張圖片以白色背景和黑體字呈現「Hello Android」,底下圖片則以黑色背景和黑體字呈現「Hello Android」。

  1. 使用您的名字更新 DefaultPreview() 函式。接著重新建立並查看您的個人化賀卡!
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
   GreetingCardTheme {
       Greeting("Meghan")
   }
}

這張圖片顯示預設預覽畫面,畫面上的文字為「Hi, my name is Meghan!」。

5. 變更文字背景顏色

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

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

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

這張圖片顯示遭到醒目顯示的「Text」元件,以及下方選單已選取「Surround with widget」。

  1. 選擇「Surround with Container」

62635b6fe2eabb0a.png

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

9fbdb58d26bd577a.png

  1. 刪除「Box」,改為輸入「Surface()」。
@Composable
fun Greeting(name: String) {
   Surface() {
       Text(text = "Hi, my name is $name!")
   }
}
  1. Surface 容器包含 color 參數,因此請輸入「Color」,然後加入一個句點。畫面上會顯示彈出式視窗,當中列出各種不同的顏色選項。這是 Android Studio 中一項很酷的功能,非常聰明且可適時提供您協助。在此情況下,這項功能知道您想要指定顏色,因此建議了不同的顏色。

這張程式碼圖片顯示接受 Color 引數的介面。這個顏色旁邊會顯示一個圓點,圓點後面則有一個不同顏色名稱的選單。

  1. 選擇界面的顏色。這個程式碼研究室使用的是洋紅色,但您可以選擇自己喜歡的顏色!
@Composable
fun Greeting(name: String) {
   Surface(color = Color.Magenta) {
       Text(text = "Hi, my name is $name!")
   }
}
  1. 按一下「Build & Refresh」。文字隨即會被您選擇的顏色包圍起來!

這張圖片顯示預設預覽畫面,畫面上的文字為「Hi, my name is Meghan!」,背景為洋紅色。

6. 加上邊框間距

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

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

在文字中加入 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))
   }
}

這張圖片顯示預設預覽畫面,搭配「Hi, my name is Meghan!」的說明文字,以及洋紅色背景和邊框間距。

恭喜,您已經在 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」,輸入專案名稱,然後調整專案設定。
  • 您可以使用預覽窗格,查看應用程式的外觀。
  • 可組合函式與一般函式類似,但仍有一些差異:函式名稱採用首字母大寫、必須在函式前面加上 @Composable 註解,以及 @Composable 函式無法傳回任何值。
  • Modifier 是用來擴增或裝飾可組合的內容。

瞭解詳情