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

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

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

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

[新卒時代に書いた記事はこちらです。](https://qiita.com/zooko/items/9105b6d6a90fb88abc6e)

# 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
子コンポーネントを親コンポーネントの開始位置（左または上）に揃えます。

```kotlin
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.Start,
        ) {
            // 子コンポーネント配置
        }
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542499/1b96d7c5-b5bb-584e-edb7-f0490b9995a5.png)

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

```kotlin
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.End,
        ) {
            // 子コンポーネント配置
        }
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542499/59bf90ea-13e8-b55c-141c-f3e548e96e5d.png)

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

```kotlin
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.Center,
        ) {
            // 子コンポーネント配置
        }
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542499/78570702-33ed-d9a8-d7c1-ebecd5acd935.png)

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

```kotlin
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceEvenly,
        ) {
            // 子コンポーネント配置
        }
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542499/feb304be-02d4-9265-6bb4-b706b8ef6479.png)

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

```kotlin
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceAround,
        ) {
            // 子コンポーネント配置
        }
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542499/961905b2-4a87-0710-2c19-0d2df06cac1a.png)

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

```kotlin
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween,
        ) {
            // 子コンポーネント配置
        }
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542499/ef36965e-aec8-1e04-ad1c-78db1dc9eaee.png)





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

```kotlin
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で設定したものです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542499/f227af36-90fa-459e-a017-30356d0ba714.png)