Jetpack Composeの基礎

#目次
1. Column, Row, Box
2. サンプルコード
3. まとめ

##1.Column, Row, Box

``Column``‥アイテムを画面上の垂直方向に配置するために使用する。
``Row``‥アイテムを画面上の水平方向に配置するために使用する。
``Box``‥アイテムをアイテムの上に配置するために使用する。

##2.サンプルコード

``Column``

```kotlin
@Composable
fun UnderstandColumn() {
    Column(
            modifier = Modifier
                .fillMaxSize()
        ) {

            Surface(
                modifier = Modifier
                    .width(150.dp)
                    .height(100.dp),
                color = Color.Green
            ) {
                Text(text = "Item1", color = TextBlack, textAlign = TextAlign.Center)
            }

            Surface(
                modifier = Modifier
                    .width(150.dp)
                    .height(100.dp),
                color = Color.Red
            ) {
                Text(text = "Item2", color = TextBlack, textAlign = TextAlign.Center)
            }

            Surface(
                modifier = Modifier
                    .width(150.dp)
                    .height(100.dp),
                color = Color.Gray
            ) {
                Text(text = "Item2", color = TextBlack, textAlign = TextAlign.Center)
            }
      }
}
```

このサンプルコードは、以下のようになります。
![app_result.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512202/74b56720-1159-3040-1f4b-c19449d15f7b.jpeg)

ここで、UIの要素を任意の場所に動かすために以下の引数を考えます。
``verticalArrangement``は、テキストで示しているような配置をとることができます。![verticalArrangment.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512202/fddc424f-a233-141b-9c65-a8bfc27cf043.jpeg)

``horizontalAlignment``は、テキストで示しているような配置をとることができます。
![horizontalAlignment.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512202/867e757d-eff8-1761-ab7b-274fa69a5ec7.jpeg)

``Row``

```kotlin
    Row(
            modifier = Modifier
                .fillMaxSize(),
            verticalAlignment = Alignment.Top
        ) {

            Surface(
                modifier = Modifier
                    .weight(1f)
                    .height(100.dp),
                color = Color.Green
            ) {

                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Text(text = "Item1", color = TextBlack)
                }
            }

            Surface(
                modifier = Modifier
                    .weight(1f)
                    .height(100.dp),
                color = Color.Red
            ) {

                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Text(text = "item2", color = TextBlack)
                }
            }

            Surface(
                modifier = Modifier
                    .weight(1f)
                    .height(100.dp),
                color = Color.Gray
            ) {

                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Text(text = "item3", color = TextBlack)
                }
            }
        }
```

このサンプルコードは、以下のようになります。


![Row.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512202/d8f13873-c86e-8266-205d-c058ccb6843e.jpeg)

Columnと同様に、任意の場所に要素を配置したいときはに次の2つの引数に値を与えることで配置することができますが、**Column**のときと混同しないように注意が必要です。

``horizontalArrangement``は、テキストで示しているような配置をとることができます。
![horizontalArrangement.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512202/281996f7-d6d7-6115-8238-658b103e81fb.jpeg)

``verticalAlignment``は、テキストで示しているような配置をとることができます。![verticalAlignment.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512202/30fbb89c-bbb8-f50f-6cfd-42beeb265333.jpeg)


``Box``
Image上に、チェックマークを以下のコードに示す。

```kotlin
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Image(
                painter = painterResource(id = R.drawable.ic_launcher_foreground),
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .size(60.dp)
                    .clip(CircleShape)
                    .background(BackgroundBlack)
            )
            Icon(
                painter = painterResource(id = R.drawable.ic_check),
                contentDescription = null,
                tint = ButtonBackgroundRed,
                modifier = Modifier.offset(2.dp,15.dp),
            )
        }
```
![icon.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512202/3a96c231-4961-69b8-764f-53301e67bced.jpeg)

アイテムをアイテムの上に配置するためにBoxを使用し、Image上にIconを上記のように表示することができた。

##3.まとめ

Jetpack Composeで、UIを構成するための基礎をまとめました。Animation, Scaffold, Modifier(修飾詞)などを別の記事で紹介したいと思います。