Android 專案結構與基本元件介紹

本文撰寫時間為 2025 年 7 月，請注意該文章的介紹是否與閱讀時有落差。

今天我們會進入正式的 Android App 介紹，開發 App 類似於開發常見的網站前端，是跟後端的 API 端口互動而不是直接像 PC 應用一樣直接呼叫資料庫。

目標

1. 了解 Android 專案的基本資料夾與檔案結構

2. 認識 Android 的四大元件

3. 實際操作 Android Studio，修改畫面內容

4. 建立第一個客製化的 UI 組件

前置條件

• 已安裝好 JDK（Java Development Kit）

• 已安裝 Android Studio 並成功開啟 Emulator 或連接測試裝置

• 使用 Kotlin + Jetpack Compose 建立專案（建議最低 API 24）

• 已安裝好 JDK（Java Development Kit）

專案結構總覽

當你用 Android Studio 建立一個新專案時，會看到如下目錄結構：

app/
├── src/
│   ├── main/
│   │   ├── java/com/example/myapplication/
│   │   │   ├── MainActivity.kt
│   │   │   └── ui/theme/
│   │   │       ├── Color.kt
│   │   │       ├── Theme.kt
│   │   │       └── Type.kt
│   │   ├── res/
│   │   └── AndroidManifest.xml

MainActivity.kt => App 的進入點，setContent {} 是放 Composable 的地方

ui.theme/ => 是 Jetpack Compose 自動產生的 Material 3 主題設定

Color.kt => 定義顏色資源（取代 XML 中的 colors.xml）

Theme.kt => 自訂 MyApplicationTheme，包裝整個 UI 外觀

Type.kt => 定義字型排版（Typography）設定

Android 四大元件介紹

Android 的核心是四大元件（Components）：

1. Activity：單一使用者畫面（UI）

• 每個 App 至少有一個 MainActivity

• 控制畫面內容、處理使用者互動

2. Service：背景執行邏輯

• 無 UI，例如下載檔案、播放音樂

• 可與 Activity 分離執行

3. BroadcastReceiver：接收廣播事件

• 如開機完成、電量過低、網路變更

• 適合觸發式操作

4. ContentProvider：資料存取中介

• 提供跨 App 的資料分享（如聯絡人、相簿）

修改 Hello World 畫面

Android Studio 預設會建立一個 Hello World App，我們將從這個基礎開始修改。

1. 找到 MainActivity.kt

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MyApplicationTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

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

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    MyApplicationTheme {
        Greeting("Android")
    }
}

2. 修改畫面內容

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MyApplicationTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "AgriLinq",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

Zoom image will be displayed

這就可以看到已經從 Android 修改成了AgriLinq。

3. Composable 組件

之所以改變 Greeting 函數就可以改變畫面，是因為以下的組件

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

可以在裡面改變內容使用來改變呈現畫面，如

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "歡迎你 $name!",
        modifier = modifier
    )
}