Android Jetpack Compose Modifier 介紹、常用方式示範 下篇(align, horizontalArrangement, verticalArrangement, weight)

延伸閱讀： Android Jetpack Compose Modifier 介紹、常用方式示範 上篇(size, padding, border, clip)

對齊 align

對齊需要看父元件是什麼來決定 align 內可以傳入什麼參數

父容器是 Box，需要傳入 Alignment:

• Alignment.TopStart
• Alignment.TopCenter
• Alignment.TopEnd
• Alignment.CenterStart
• Alignment.Center
• Alignment.CenterEnd
• Alignment.BottomStart
• Alignment.BottomCenter
• Alignment.BottomEnd

    
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color


Box {
    Text("左上", modifier = Modifier
        .background(color = Color.Yellow)
        .align(Alignment.TopStart)
    )
    Text("中上", modifier = Modifier
        .background(color = Color.Yellow)
        .align(Alignment.TopCenter)
    )
    Text("右上", modifier = Modifier
        .background(color = Color.Yellow)
        .align(Alignment.TopEnd)
    )

    Text("左中", modifier = Modifier
        .background(color = Color.Green)
        .align(Alignment.CenterStart)
    )
    Text("中", modifier = Modifier
        .background(color = Color.Green)
        .align(Alignment.Center)
    )
    Text("右中", modifier = Modifier
        .background(color = Color.Green)
        .align(Alignment.CenterEnd)
    )

    Text("左下", modifier = Modifier
        .background(color = Color.Blue)
        .align(Alignment.BottomStart)
    )
    Text("中下", modifier = Modifier
        .background(color = Color.Blue)
        .align(Alignment.BottomCenter)
    )
    Text("右下", modifier = Modifier
        .background(color = Color.Blue)
        .align(Alignment.BottomEnd)
    )
}
    

父容器是 Row，需要傳入 Alignment.Vertical:

• Alignment.Top
• Alignment.CenterVertically
• Alignment.Bottom

    
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color


Row(
    Modifier.fillMaxSize()
) {
    Text(
        "Top", modifier = Modifier
            .background(color = Color.Yellow)
            .align(Alignment.Top)
    )
    Text(
        "CenterVertically", modifier = Modifier
            .background(color = Color.Green)
            .align(Alignment.CenterVertically)
    )
    Text(
        "Bottom", modifier = Modifier
            .background(color = Color.Cyan)
            .align(Alignment.Bottom)
    )
}
    

父容器是 Column ，需要傳入 Alignment.Horizontal:

• Alignment.Start
• Alignment.CenterHorizontally
• Alignment.End

    
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color


Column(
    Modifier.fillMaxSize()
) {
    Text(
        "Start", modifier = Modifier
            .background(color = Color.Yellow)
            .align(Alignment.Start)
    )
    Text(
        "CenterHorizontally", modifier = Modifier
            .background(color = Color.Green)
            .align(Alignment.CenterHorizontally)
    )
    Text(
        "End", modifier = Modifier
            .background(color = Color.Cyan)
            .align(Alignment.End)
    )
}
    

疑？這樣好像怪怪的，但其實這是最容易搞混的部分。
Column 是垂直一直增加內容，單個內容使用 align 可以決定靠左、中、右。
Row 是水平一直增加內容，單個內容使用 align 可以決定靠上、中、下。
Box 則可以將單個內容指定在 4 邊中間、4 個角和正中間。

水平和垂直排列對齊方式

上面提到 align 是指定單一內容的對齊方式，那在 Column 或 Row 中想要對齊該怎麼做呢？可以使用 Arrangement:

• Arrangement.Start
• Arrangement.Center
• Arrangement.End
• Arrangement.SpaceEvenly
• Arrangement.SpaceAround
• Arrangement.SpaceBetween

Row 是使用 horizontalArrangement ，而 Column 是使用 verticalArrangement。下面以 Row 做示範:

    
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color


Row(
    Modifier.fillMaxSize(),
    horizontalArrangement = Arrangement.Start,
) {
    Text(
        "Top", modifier = Modifier
            .background(color = Color.Yellow)
    )
    Text(
        "CenterVertically", modifier = Modifier
            .background(color = Color.Green)
    )
    Text(
        "Bottom", modifier = Modifier
            .background(color = Color.Cyan)
    )
}
    

Row 的效果如下:

Column 的效果如下:

看完上面的圖後會發現圖中的種類有 7 個，而上面 Arrangement 列出的只有六個，少了 Equal Weight ，全部相等。而這個可以透過將所有項目都設定相同的 weight 來達成:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color


Column {
    Row {
        Text("Top", modifier = Modifier.background(color = Color.Yellow))
        Text("CenterVertically", modifier = Modifier.background(color = Color.Green))
        Text("Bottom", modifier = Modifier.background(color = Color.Cyan))
    }

    Row {
        Text(
            "Top", modifier = Modifier
                .background(color = Color.Yellow)
                .weight(1f)
        )
        Text(
            "CenterVertically", modifier = Modifier
                .background(color = Color.Green)
                .weight(1f)
        )
        Text(
            "Bottom", modifier = Modifier
                .background(color = Color.Cyan)
                .weight(1f)
        )
    }
}
    

參考資料：
Android developers - Compose 版面配置基本概念
Android developers - Compose 修飾符清單
Android developers - Alignment
Android developers - Arrangement