Compose 的版面配置 Layouts

Jetpack Compose 可協助您為應用程式輕鬆設計高效率的版面配置。
以下頁面詳細介紹如何設計和實作版面配置：

• Layout basics 版面配置基本概念：瞭解直觀應用程式 UI 的建構模塊。
• Material Components and layouts 質感元件和版面配置：瞭解 Compose 的質感元件和版面配置。
• Custom layouts 自訂版面配置：瞭解如何控管應用程式的版面配置，以及如何設計自己的自訂版面配置。
• Build adaptive layouts 建立自動調整版面配置：瞭解如何使用 Compose 根據不同螢幕大小、方向和板型規格建構版面配置。
• Alignment lines 對齊線條：瞭解如何建立自訂對齊線條，以精確對齊並定位 UI 元素。
• Intrinsic measurements 固有測量尺寸：瞭解如何為 UI 元素設定固有高度或寬度，讓您精確控管元素在版面配置中的編排方式。
• ConstraintLayout：瞭解如何在 Compose UI 中使用 ConstraintLayout。

Compose layout basics 版面配置基本概念

Compose 會按照下列的順序，將狀態轉換為 UI 元素：

1. 組合元素
2. 安排元素的版面配置
3. 繪製元素
   

標準版面配置元件

先複習一下 Day4 基本概念 - Layouts 已經介紹過 Column 和 Row , 就等於XML的LinearLayout

• 使用 Column 在畫面上把項目直向排列

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
	//新增加的文字
    Text(text = "This is $name!")
}  

• 使用 Row 在畫面上把項目橫向排列

@Composable
fun Greeting(name: String) {
    Row() {
        Text(text = "Hello $name!")
        //新增加的文字
        Text(text = "This is $name!")
    }
}

再來介紹一下 Box 就等於XML的FrameLayout，直接堆疊圖層

Column() {
        Text(text = "Hello $name!")
        Box {
            Image(painter = painterResource(id = R.drawable.io), contentDescription = "io")
            Icon(
                painter = painterResource(id = R.drawable.top_gun2),
                modifier = Modifier.size(200.dp),
                contentDescription = "logo")
        }
    }

版面配置模型

在版面配置模型中，系統會要求節點自我測量，再依樹狀結構傳遞

分析下列 Greeting的函式

@Composable
fun Greeting(...) {
  Row(...) {
    Image(...)
    Column(...) {
      Text(...)
      Text(..)
    }
  }
}

在 Greeting範例中，系統會按照以下順序安排 UI 樹狀結構的版面配置：

1. 系統要求根節點 Row 進行測量。
2. 根節點 Row 要求其第一個子項 Image 進行測量。
3. Image 是分葉節點 (也就是不含任何子項)，因此會回報大小並傳回位置指示。
4. 根節點 Row 要求其第二個子項 Column 進行測量。
5. Column 節點要求其第一個 Text 子項進行測量。
6. 第一個 Text 節點是分葉節點，因此會回報大小並傳回位置指示。
7. Column 節點要求其第二個 Text 子項進行測量。
8. 第二個 Text 節點是分葉節點，因此會回報大小並傳回位置指示。
9. Column 節點完成測量並設定其子項的大小和位置後，現在可以決定本身的大小和位置。
10. 根節點 Row 完成測量並設定其子項的大小和位置後，現在可以決定本身的大小和位置。
    

參考:

https://developer.android.com/jetpack/compose/layouts/basics