Jetpack Compose における Modifier について #JetpackCompose

Jetpack Compose における Modifier は、Composable 要素の見た目や動作を修飾・構成するための非常に重要なコンセプトです。Modifier を使用することで、レイアウトのパラメータを設定したり、背景を描画したり、ユーザーのインタラクションを処理したりすることができます。以下では、Jetpack Compose でよく使われる Modifier とその使い方について詳しく説明します。

よく使われる Modifier

レイアウト関連の Modifier
- padding：内側の余白を設定します。
- size：幅と高さを設定します。
- fillMaxSize：利用可能なスペースを全て埋めるようにします。
- wrapContentSize：内容のサイズに基づいて自身のサイズを調整します。
描画関連の Modifier
- background：背景色や背景画像を設定します。
- border：境界線を設定します。
- clip：内容を切り取ります。
インタラクション関連の Modifier
- clickable：要素をクリック可能にします。
- draggable：要素をドラッグ可能にします。
- scrollable：要素をスクロール可能にします。
配置関連の Modifier
- align：親レイアウト内での配置を設定します。
- offset：位置をオフセットします。
- zIndex：要素の層の順序を設定します。

使用例と方法

基本的な使用法

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun ModifierExample() {
    Box(
        modifier = Modifier
            .size(100.dp)
            .padding(16.dp)
            .background(Color.Blue)
            .clickable { /* クリック処理 */ }
    )
}

Modifier のチェーン呼び出し

@Composable
fun ChainModifierExample() {
    Box(
        modifier = Modifier
            .size(200.dp)
            .padding(16.dp)
            .background(Color.Green)
            .border(2.dp, Color.Black)
            .padding(8.dp)
    )
}

align と offset の使用

@Composable
fun AlignAndOffsetExample() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray),
        contentAlignment = Alignment.Center
    ) {
        Box(
            modifier = Modifier
                .size(100.dp)
                .background(Color.Red)
                .align(Alignment.BottomEnd)
                .offset(x = (-16).dp, y = (-16).dp)
        )
    }
}

クリック可能およびドラッグ可能

import androidx.compose.foundation.gestures.detectDragGestures
import androidx.compose.ui.input.pointer.pointerInput

@Composable
fun DraggableExample() {
    Box(
        modifier = Modifier
            .size(100.dp)
            .background(Color.Blue)
            .pointerInput(Unit) {
                detectDragGestures { change, dragAmount ->
                    // ドラッグ処理
                }
            }
    )
}

zIndex を使用して層の順序を調整

@Composable
fun ZIndexExample() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Gray)
    ) {
        Box(
            modifier = Modifier
                .size(100.dp)
                .background(Color.Red)
                .zIndex(1f)
        )

        Box(
            modifier = Modifier
                .size(50.dp)
                .background(Color.Blue)
                .zIndex(2f)
        )
    }
}

カスタム Modifier の作成

既存の Modifier ではニーズを満たせない場合、自分でカスタム Modifier を作成することも可能です。

import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.unit.dp

fun Modifier.customBorder(color: Color, width: Float) = this.then(
    Modifier.drawBehind {
        drawRect(color = color, size = this.size, style = androidx.compose.ui.graphics.drawscope.Stroke(width))
    }
)

@Composable
fun CustomModifierExample() {
    Box(
        modifier = Modifier
            .size(100.dp)
            .customBorder(Color.Magenta, 4.dp.toPx())
    )
}

まとめ

Modifier は Jetpack Compose で非常に強力かつ柔軟なツールであり、Composable の見た目や動作をカスタマイズするために使用されます。チェーン呼び出しや複数の Modifier の組み合わせにより、複雑な UI 要件を満たすことができます。Modifier を理解し、熟練して使用することで、効率的かつ美しい Compose アプリケーションを開発することができます。