Android UI Layout

開發 Android 畫面有兩種常用方法：

• 使用 XML Layout 檔案
• Jetpack Compose UI (宣告式 UI)

XML Layout

• 在 Android Studio 開啟先前章節建立的 App。
• 將目錄列表切換至 Android 檢視模式（如下圖紅框處）。
• 開啟位於 專案根目錄/app/src/main/res/layout/activity_main.xml 的 XML Layout 檔案（如下圖黃框處）。
  

專案預設 Layout activity_main.xml

activity_main.xml 為 Android App 專案預設的 Layout 檔案

• 命名：英文小寫 + 底線，根據對應的程式檔案命名。此處 activity_main.xml 即對應 MainActivity 名稱。
• UI 預覽：在編輯視窗的右上角，切換至 split 瀏覽模式（如下圖黃框處），在預覽畫面點選元件可以跳至對應語法段落。
  
• 預設的Layout程式碼：

  <?xml version="1.0" encoding="utf-8"?>
  <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      tools:context=".MainActivity">
  
      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Hello World!"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent" />
  
  </androidx.constraintlayout.widget.ConstraintLayout>
  

Layout元件及屬性

目前畫面上的兩個元件：

• ConstraintLayout：常用的 Android 佈局之一，使用水平與垂直Constraint條件來配置 Layout 中個元素的位置。
• TextView：畫面中顯示字串「Hello World!」的元件。

此處Layout元件屬性用途說明：

將 Layout 載入至 Activity

於 MainActivity.kt 的 onCreate(...) function 內以 setContentView(Layout資源名稱) 載入。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main) // 載入 'activity_main.xml' Layout資源
    }
}

啟動專案，UI 畫面呈現