新卒時代のXMLをJetpack ComposeのArrangementで再現してみた

目次

• はじめに
• 新卒時代に書いた記事の説明
• JetpackComposeとは
• Arrangementについて
• Weightの制約

はじめに

私は新卒時代、XMLのConstraintLayoutを使ってUIを作る作業には四苦八苦していました。
複雑なUIを複数のサイズが異なる端末で正しく表示する対応が必要でした。
現在、UI作成は苦労したXMLからComposeを利用する流れになりつつあります。

新卒時代記事の説明

新卒時代の記事では、ConstraintLayoutにおけるChainとWeightの利用方法を説明しました。今回は、この同様のレイアウトをJetpack Composeでどのように再現できるかを見ていきます。

新卒時代に書いた記事はこちらです。

JetpackComposeとは

Jetpack Composeは2019年のGoogle I/Oで初めて発表され、2021年7月Jetpack Compose 1.0が正式にリリースされました。
Jetpack Composeは、宣言的UIフレームワークとしての2019年のGoogle I/Oで初めて発表され、2021年7月Jetpack Compose 1.0が正式にリリースされました。発表以来、継続的に進化を続けており、Android開発の未来を担う技術として注目されています。

Arrangementについて

レイアウト内の子コンポーネントをどのように配置するかを指定するためのオプションです。Arrangementは主にRowやColumnなどのレイアウトコンポーネントで使用され、子コンポーネントの配置や間隔を制御します。

※ 以下、Rowで設定したものを例とします。

Start

子コンポーネントを親コンポーネントの開始位置（左または上）に揃えます。

        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.Start,
        ) {
            // 子コンポーネント配置
        }

End

子コンポーネントを親コンポーネントの終了位置（右または下）に揃えます。

        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.End,
        ) {
            // 子コンポーネント配置
        }

Center

子コンポーネントを親コンポーネントの中央に揃えます。

        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.Center,
        ) {
            // 子コンポーネント配置
        }

SpaceEvenly

子コンポーネントの間に均等なスペースを配置します。最初と最後の子コンポーネントの前後にも同じスペースが配置されます。

        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceEvenly,
        ) {
            // 子コンポーネント配置
        }

SpaceAround

子コンポーネントの間に均等なスペースを配置します。最初と最後の子コンポーネントの前後にもスペースが配置されるが、そのスペースは他の間隔の半分になります。

        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceAround,
        ) {
            // 子コンポーネント配置
        }

SpaceBetween

子コンポーネントの間に均等なスペースを配置します。最初と最後の子コンポーネントは親コンポーネントの端に揃えられます。

        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween,
        ) {
            // 子コンポーネント配置
        }

Weightの制約

レイアウト内のスペースを子コンポーネント間でどのように分配するかを指定するための修飾子です。weightを使用することで、親コンポーネントの残りのスペースを特定の割合で子コンポーネントに割り当てることができます。

Row(
    modifier = Modifier.fillMaxWidth()
) {
    Text(
        text = "Text1",
        modifier = Modifier
            .weight(1f)
            .border(
                width = 0.5.dp,
                color = Color.Black,
            ),
        color = Color.Black
    )
    Text(
        text = "Text2",
        modifier = Modifier
            .weight(2f)
            .border(
                width = 0.5.dp,
                color = Color.Black,
            ),
        color = Color.Black
    )
    Text(
        text = "Text3",
        modifier = Modifier
            .weight(3f)
            .border(
                width = 0.5.dp,
                color = Color.Black,
            ),
        color = Color.Black
    )
}

※ 画像は1:2:3で設定したものです。