Jetpack Compose Modifier(修飾)

#目次

1. Modifierとは
2. サンプルコード
3. まとめ

##1. Modifierとは

``Modifier``‥コンポーザブルを修飾する、もしくは拡張するときに利用する。
このクラス関数を連鎖させてコンポーズを作成することが可能です。

では、実際にどのようなことができるかを確認してみましょう。


**1. コンポーザブルのレイアウト、動作を変更できる**
**2. UIの要素をクリック可能、スクロール可能、ドラッグ可能にできる**

では、実際にサンプルコードを通して確認してみましょう。

##2. サンプルコード

Background Color
---

```kotlin
Box(
        contentAlignment = Alignment.Center
    ) {

        Text(
            text = "Modifier Example",
            modifier = Modifier
                .background(Color.Red)
        )
}
```

![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512202/e5d44e25-844f-7e71-2f71-b271a329ebff.jpeg)


Padding
---

```kotlin
Box(
        contentAlignment = Alignment.Center
    ) {

        // Padding
        Text(
            text = "Modifier Example",
            modifier = Modifier
                .padding(10.dp)
                .background(Color.Red)
                .padding(10.dp)
                .background(Color.Green)
        )
}
```

![3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512202/33473d6d-2e10-f32f-72a9-4146396de21c.jpeg)


Height and Width
---

```kotlin
Box(
        contentAlignment = Alignment.Center
    ) {

        //Height and Width
        Text(
            text = "Modifier Example",
            modifier = Modifier
                .background(Color.Red)
                .height(150.dp)
                .width(250.dp)
        )
}
```

![4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512202/0f82d1f4-b246-5b2c-0ce1-09ad285b3d91.jpeg)

Size
---
```kotlin
Box(
        contentAlignment = Alignment.Center
    ) {

        //Size
        Text(
            text = "Modifier Example",
            modifier = Modifier
                .background(Color.Red)
                .size(250.dp, 150.dp)
        )
}
```

![4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512202/0f82d1f4-b246-5b2c-0ce1-09ad285b3d91.jpeg)

weight
---
```kotlin
Row(
        modifier = Modifier.fillMaxWidth()
    ) {
        Text(
            text = "1",
            modifier = Modifier
                .weight(1f)
                .height(100.dp)
                .background(Color.Red),
            textAlign = TextAlign.Center
        )
        Text(
            text = "2",
            modifier = Modifier
                .weight(1f)
                .height(100.dp)
                .background(Color.Green),
            textAlign = TextAlign.Center
        )
        Text(
            text = "3",
            modifier = Modifier
                .weight(1f)
                .height(100.dp)
                .background(Color.Blue),
            textAlign = TextAlign.Center
        )
}
```

![row.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512202/902ea830-e751-147e-77eb-7fcfbaec974d.jpeg)


Scale
---
```kotlin
//Scale
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Green),
    ) {
        Text(
            text = "Scale",
            modifier = Modifier.scale(0.9f, 0.9f)
        )
}
```

![scale.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512202/44d3f077-5ded-6de6-0486-358265ddbca3.jpeg)


fillMaxHeight, fillMaxWidth, fillMaxSize
---
```kotlin
//fillMaxHeight
    Column(
        modifier = Modifier.fillMaxHeight()
    ) {
        Text(
            text = "1",
            modifier = Modifier
                .weight(1f)
                .width(100.dp)
                .background(Color.Red),
            textAlign = TextAlign.Center
        )
        Text(
            text = "2",
            modifier = Modifier
                .weight(1f)
                .width(100.dp)
                .background(Color.Green),
            textAlign = TextAlign.Center
        )
        Text(
            text = "3",
            modifier = Modifier
                .weight(1f)
                .width(100.dp)
                .background(Color.Blue),
            textAlign = TextAlign.Center
        )
    }

    //fillMaxWidth
    Row(
        modifier = Modifier.fillMaxSize()
    ) {
        Text(
            text = "1",
            modifier = Modifier
                .weight(1f)
                .height(100.dp)
                .background(Color.Red),
            textAlign = TextAlign.Center
        )
        Text(
            text = "2",
            modifier = Modifier
                .weight(1f)
                .height(100.dp)
                .background(Color.Green),
            textAlign = TextAlign.Center
        )
        Text(
            text = "3",
            modifier = Modifier
                .weight(1f)
                .height(100.dp)
                .background(Color.Blue),
            textAlign = TextAlign.Center
        )
    }

    //fillMaxSize
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Green),
        contentAlignment = Alignment.Center
    ) {
        Text(text = "FillMaxSize")
    }
```

![column.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512202/88c1f859-85a4-e6fc-c7a6-10d7132fce59.jpeg)
![row.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512202/c59164ac-7c2d-b183-88d6-af7ee9eee0e2.jpeg)
![5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512202/f57ce554-5f91-7ab2-33de-326c39bd0db3.jpeg)


Rotate
---
```kotlin
    //Rotate
    Box(
        modifier = Modifier
            .rotate(40f)
            .size(250.dp)
            .background(Color.Green),
    )
```

![6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512202/650f3c89-bbb6-1c1e-08a0-dc0025b6c543.jpeg)


Clip
---
```kotlin
    //Clip
    Box(
        modifier = Modifier
            .fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "FillMaxSize",
            modifier = Modifier
                .size(100.dp)
                .clip(RoundedCornerShape(10.dp))
                .background(Color.Green)
                .padding(10.dp)
        )
}
```

![7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512202/01d986d4-2bfe-1638-0f4d-ab671a3d50ea.jpeg)


Border
---
```kotlin
    //Border
    Box(
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "FillMaxSize",
            modifier = Modifier
                .size(100.dp)
                .border(2.dp, Color.Green)
                .background(Color.Green)
                .padding(10.dp)
        )
    }
```

![8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512202/5f697e28-a5ee-1bae-cc1e-1e1028c69d01.jpeg)


Clickable
---
```kotlin
    //Clickable
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Green),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "FillMaxSize",
            modifier = Modifier
                .size(100.dp)
                .background(Color.Gray)
                .clickable {

                }
                .padding(10.dp)
        )
    }
```

![clickable.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512202/f945d4fa-43fe-aa23-c2ab-4fdf9723d3d2.gif)


Scrollable
---
```kotlin
    //Scrollable
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Green)
            .verticalScroll(rememberScrollState()),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        repeat(100){
            Text(
                text = "Number $it",
                modifier = Modifier.padding(10.dp)
            )
        }
    }
```

![scrollable.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512202/a4a7b01a-a369-7e17-05c9-61741eb61ee1.gif)


draggable
---
```kotlin
    //draggable
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Green)
    ) {

        var offsetX by remember { mutableStateOf(0f) }
        var offsetY by remember { mutableStateOf(0f) }

        Box(
            modifier = Modifier
                .offset{ IntOffset(offsetX.roundToInt(), offsetY.roundToInt()) }
                .background(Color.Red)
                .size(50.dp)
                .pointerInput(Unit) {
                    detectDragGestures { change, dragAmount ->
                        change.consumeAllChanges()
                        offsetX += dragAmount.x
                        offsetY += dragAmount.y
                    }
                }
        )
    }
```

``draggable``‥**scaleX, scaleY**をステートとして管理して、``pointerInput``のラムダ内で検出した変更を、**change.consumeAllChanges()**で読み取り、ステートとして管理していた**scaleX, scaleY**の状態に変更を加えることで実現しています。

![draggable.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512202/5b297312-5372-5596-ab0d-a657563e1637.gif)


##3. まとめ

この記事で紹介したのは一例ですが、Modifierを使ったコンポーザブルの修飾をざっくりとつかむことができたと思います。

[公式ドキュメント](https://developer.android.com/jetpack/compose/modifiers-list?hl=ja)で紹介されて気になったものがあればぜひ試してみてください。