【Android】＜Kotlin＞Jetpack ComposeのModifierとは？使い方と活用パターンをわかりやすく解説

2025年4月22日

すだ

みなさまこんにちは〜！
メモリアインクのすだです。

本日は、
Jetpack ComposeでUIを実装する際に、ほぼすべてのコンポーネントで出てくる Modifierというクラスについて
使い方などわかりやすくお伝えします。

この記事を読んでわかること…
・Jetpack ComposeのModifierとは？
・Modifierを使ったUIの実装について

環境

Kotlin (ver 1.9.0)
Android Studio (Giraffe | 2022.3.1 Patch 3)

Modifierとは？

Modifier は、Jetpack Compose における UIコンポーネントの見た目や振る舞いを追加・調整するためのクラスです。

Composeでは、UIと装飾（レイアウト、サイズ、動作）をきれいに分けるために Modifier という仕組みを取り入れています。

Modifierでできること

サイズ指定
- size, width, height
余白調整
- padding, margin（Composeでは padding）
色や枠線の装飾
- background, border, clip
配置調整
- align, fillMaxWidth, wrapContentSize
タップ操作
- clickable
スクロール
- verticalScroll, horizontalScroll
アニメーション
- animateContentSize など

Modifireの基本的な使い方

Modifier はチェーンのようにつなげていくスタイルが特徴です。

Text(
    text = "Hello, Compose!",
    modifier = Modifier
        .padding(16.dp)
        .background(Color.Yellow)
        .fillMaxWidth()
)

padding(16.dp) → 外側に16dpの余白を追加
background(Color.Yellow) → 背景を黄色に
fillMaxWidth() → 横幅を画面いっぱいに広げる

Modifierの組み合わせと順序の注意点

Modifier は書く順番によって見た目が変わります。
たとえば▼

// 背景がpaddingの外にまで広がる
Modifier
    .background(Color.Yellow)
    .padding(16.dp)

// paddingの内側だけに背景が付く
Modifier
    .padding(16.dp)
    .background(Color.Yellow)

このように、上から順にデザインが適用されていくので、書き順を考慮して実装を行いましょう。

Modifierをカスタムでまとめる方法

また、同じModifierを何度も使う場合は、カスタムでまとめておくと便利です。

fun Modifier.cardStyle(): Modifier = this
    .padding(16.dp)
    .background(Color.White)
    .border(1.dp, Color.Gray)
    .clip(RoundedCornerShape(8.dp))

// 呼び出し
Box(modifier = Modifier.cardStyle())

.cardStyle()これは自作でつけた関数名です。
Modifier に追加する拡張関数なので、fun Modifier.〇〇(): Modifier という形で定義します。

このように関数化することで、複数箇所で再利用できます。

複数のカスタムを合成する方法

また、以下のようにして複数のカスタムを合成して利用することもできます。▼

fun Modifier.clickableCard(onClick: () -> Unit): Modifier = this
    .cardStyle()
    .clickable { onClick() }
    .animateContentSize()

実践的なModifierの使い方

引数をとるカスタムModifier

Modifierのカスタム関数は、通常のKotlin関数と同じように引数を取ることができます。
たとえば、背景色や角丸を引数で変えたい場合▼

fun Modifier.cardStyle(
    backgroundColor: Color = Color.White,
    cornerRadius: Dp = 8.dp
): Modifier = this
    .padding(16.dp)
    .background(backgroundColor)
    .clip(RoundedCornerShape(cornerRadius))
    .border(1.dp, Color.Gray, RoundedCornerShape(cornerRadius))

// 呼び出し
Box(
    modifier = Modifier.cardStyle(
        backgroundColor = Color.Yellow,
        cornerRadius = 12.dp
    )
)

fun Modifier.cardStyle() の引数には、上記のようにデフォルト値をセットすることもできます。

呼び出し時に、引数に具体的な値をセットすることでその値が適用されます。

条件によって Modifier を変える（if文パターン）

たとえば、選択状態かどうかで背景色を変えたい場合、以下のようにif文を使用することができます。

fun Modifier.selectableCard(isSelected: Boolean): Modifier = this
    .padding(16.dp)
    .background(
        if (isSelected) Color.Yellow else Color.LightGray
    )
    .border(2.dp, if (isSelected) Color.Red else Color.Gray)

// 呼び出し
val isSelected = true
Box(modifier = Modifier.selectableCard(isSelected))

このように状態によって動的にスタイルを切り替えることが可能です。

Modifierの組み合わせを状態によって分岐させる

複雑になったら、以下のようにwhenを使って書き分けることもできます。

fun Modifier.statusStyle(status: Status): Modifier = when (status) {
    Status.SUCCESS -> this.background(Color.Green)
    Status.ERROR -> this.background(Color.Red)
    Status.LOADING -> this.background(Color.Gray).alpha(0.5f)
}

アニメーション付きで Modifier を変化させる（animate*）

たとえばサイズや色をアニメーションで変えたい場合、以下のようにアニメーションを細かく設定することができます。

@Composable
fun AnimatedBox(isExpanded: Boolean) {
    val animatedSize by animateDpAsState(
        targetValue = if (isExpanded) 200.dp else 100.dp,
        animationSpec = tween(durationMillis = 500)
    )

    val animatedColor by animateColorAsState(
        targetValue = if (isExpanded) Color.Blue else Color.Gray
    )

    Box(
        modifier = Modifier
            .size(animatedSize)
            .background(animatedColor)
    )
}

animateDpAsState()はサイズのアニメーション、animateColorAsState()は色のアニメーションです。

targetValue は、「アニメーションの最終的に変化させたい値」のことで、
・isExpanded が true のとき：200dp を目指してサイズがアニメーションで変化、
・isExpanded が false のとき：100dp に戻るようにアニメーション
のように、targetValue に変化があるたびに、現在の状態からアニメーションで追いかけていく仕組みです。