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 中使用預覽功能預覽應用程式
建構項目
- 這款應用程式可讓您自訂簡介!
完成這個程式碼研究室後,您所建構的應用程式外觀看起來會如下所示 (不過系統會用您的名稱加以自訂!):
軟硬體需求
- 已安裝 Android Studio 的電腦。
2. 使用範本建立專案
在這個程式碼研究室中,您可以使用 Android Studio 提供的 Empty Compose Activity 專案範本建立 Android 應用程式。
如要在 Android Studio 中建立專案:
- 按兩下 Android Studio 圖示來啟動 Android Studio。
- 在「Welcome to Android Studio」對話方塊中,按一下「New Project」。
「New Project」視窗會隨即開啟,其中列出 Android Studio 提供的範本清單。
在 Android Studio 中,專案範本是一個可為特定類型應用程式提供藍圖的 Android 專案。範本會建立專案的結構,以及 Android Studio 建立專案所需的檔案。根據您選擇的範本,系統可提供範例程式碼來協助加快速度。
- 確認已選取「Phone and Tablet」分頁標籤。
- 按一下「Empty Compose Activity」範本,選取該範本做為專案的範本。「Empty Compose Activity template」這個範本可用來建立簡易專案,您可以使用此專案來建構 Compose 應用程式。這個範本只有單一螢幕畫面,並顯示「
"Hello
Android!"
」的文字。 - 按一下「Next」。「New Project」對話方塊隨即會開啟。您可以使用以下欄位來設定專案。
- 按以下方式設定專案:
「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」核取方塊。
- 按一下「Finish」。請稍待片刻,這時候不妨來杯茶吧!在 Android Studio 設定期間,系統會顯示進度列和訊息,指出 Android Studio 是否仍在設定您的專案。畫面可能會如下所示:
專案設定建立時,會出現類似以下的訊息通知您。
- 您可能會看到「What's New」窗格,其中包含 Android Studio 新功能的最新消息。現階段請關閉此窗格。
- 按一下 Android Studio 右上方的「Split」,即可同時查看程式碼和設計。您也可以按一下「Code」只查看程式碼,或按一下「Design」只查看設計。
按下「Split」後,應該會看到三個區域:
「Project」檢視畫面 (1) 用於顯示專案的檔案和資料夾
「Code」檢視畫面 (2) 是您修改程式碼的地方
「Design」檢視畫面 (3) 可讓您預覽應用程式的外觀。
在「Design」檢視畫面中,您會看到一個顯示以下文字的空白窗格:
- 按一下「Build & Refresh」。建構作業可能需要一段時間才能完成,不過完成後,預覽畫面就會顯示「Hello Android!」的文字方塊。「Empty Compose」活動包含所有建立這個應用程式所需的程式碼。
3. 尋找專案檔案
在這個部分中,您將進一步瞭解檔案結構,藉此繼續探索 Android Studio。
- 在 Android Studio 中查看「Project」分頁標籤。「Project」分頁標籤會顯示專案的檔案和資料夾。設定專案時,套件名稱為 com.example.greetingcard。您可以在「專案」分頁標籤中查看該套件。套件基本上就是程式碼所在的資料夾。Android Studio 會將專案整理成由套件組成的目錄結構。
- 如有需要,請在「Project」分頁標籤的下拉式選單中選取「Android」。
這就是您使用的檔案標準檢視和架構,對於為專案撰寫程式碼相當實用,因為您可以輕鬆存取將在應用程式中處理的檔案。不過,如果在檔案瀏覽器 (例如 Finder 或 Windows 檔案總管) 中查看檔案,檔案階層的結構會有所不同。
- 在下拉式選單中選取「Project Source Files」。您現在可以使用與任何檔案瀏覽器相同的方式瀏覽檔案。
- 再次選取「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),但可組合函式仍有些不同之處。
@Composable
函式名稱採首字母大寫。- 您必須在函式前面加上
@Composable
註解。 @Composable
函式無法傳回任何內容。
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
目前,Greeting()
函式可接收名稱,並向使用者顯示 Hello
。
- 更新
Greeting()
函式來介紹自己,而不是顯示「Hello」:
@Composable
fun Greeting(name: String) {
Text(text = "Hi, my name is $name!")
}
- 按下設計窗格左上方的
按鈕,即可重新建立 DefaultPreview:
太好了!您變更了文字,但系統卻向您介紹 Android,但這應該不是您的名字吧。接下來,必須進行個人化設定,才能向大家介紹您的姓名!
DefaultPreview()
函式是一項很酷的功能,讓您不需建構整個應用程式,就可以查看應用程式外觀。如要使其成為預覽函式,則必須新增 @Preview
註解。
如您所見,@Preview
註解使用名為 showBackground
的參數。如果將 showBackground
設為 true,應用程式預覽就會加上背景。
由於 Android Studio 預設編輯器使用的是淺色主題,因此很難看出 showBackground
= true 和 showBackground
= false 兩者的差別。不過,使用深色主題就可以看出差別了。請注意,圖片中的白色背景已設定為 True。
- 使用您的名字更新
DefaultPreview()
函式。接著重新建立並查看您的個人化賀卡!
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
GreetingCardTheme {
Greeting("Meghan")
}
}
5. 變更文字背景顏色
您已完成自我介紹的文字,但有點無聊!這個章節將說明如何變更背景顏色。
如要為自我介紹設定不同的背景顏色,請使用 Surface
將文字包圍起來。Surface
是一個容器,代表使用者介面的一部分,您可以在其中更改外觀 (例如背景顏色或邊框)。
- 如要使用
Surface
包圍文字,請醒目顯示以下這行,按下Alt+Enter
(Windows) 或Option+Enter
(Mac),然後選取「Surround with widget」。
- 選擇「Surround with Container」。
預設容器為 Box
,但您可以將其變更為其他容器類型。
- 刪除「
Box
」,改為輸入「Surface()
」。
@Composable
fun Greeting(name: String) {
Surface() {
Text(text = "Hi, my name is $name!")
}
}
Surface
容器包含color
參數,因此請輸入「Color
」,然後加入一個句點。畫面上會顯示彈出式視窗,當中列出各種不同的顏色選項。這是 Android Studio 中一項很酷的功能,非常聰明且可適時提供您協助。在此情況下,這項功能知道您想要指定顏色,因此建議了不同的顏色。
- 選擇界面的顏色。這個程式碼研究室使用的是洋紅色,但您可以選擇自己喜歡的顏色!
@Composable
fun Greeting(name: String) {
Surface(color = Color.Magenta) {
Text(text = "Hi, my name is $name!")
}
}
- 按一下「Build & Refresh」。文字隨即會被您選擇的顏色包圍起來!
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))
}
}
恭喜,您已經在 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
是用來擴增或裝飾可組合的內容。