1 of 78

1

Jetpack Compose Modifier�徹底解説

@wiroha

Copyright © ZOZO, Inc.

2 of 78

2

株式会社ZOZO

技術本部 技術戦略部 DevRelブロック

@wiroha（ゐろは）

バックエンドエンジニア、PM、Androidエンジニアなどを経て現職のDevRelへ。

イベントの運営、文章を書くことが好き。

© ZOZO, Inc.

3 of 78

目次

  • 導入・概要
  • プロダクトコードおけるModifierの使用頻度集計
  • Modifier解説 - 全47種
  • 使用回数 総合ランキング

3

© ZOZO, Inc.

4 of 78

目次

  • 導入・概要
  • プロダクトコードおけるModifierの使用頻度集計
  • Modifier解説 - 全47種
  • 使用回数 総合ランキング

4

© ZOZO, Inc.

5 of 78

導入・概要

  • Jetpack Composeを用いたUI開発において、Modifierは欠かせない要素です。�Composableの外観、レイアウト、動作などを変更するために使います。

​

​

​

  • しかし、普段使わないModifierは知らない方も多いのではないでしょうか？
  • 本セッションでは、Jetpack ComposeのModifier約150種類の中から、時間の許す限り解説します！

​

​

​

​

​

Text(

text = "padding 32dp",

modifier = Modifier.padding(32.dp)

)

​

5

© ZOZO, Inc.

6 of 78

導入・概要

  • 具体的なコード例に加え、画像・アニメーションを用いて視覚的にわかりやすく解説します。�公式ドキュメントの文章を読むだけではピンと来ない内容も、直感的に理解できるはずです。

Icon(

imageVector = Icons.Filled.Favorite,

modifier = Modifier.alpha(0.5f)

)

​

6

引用元 https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).alpha(kotlin.Float)

© ZOZO, Inc.

7 of 78

目次

  • 導入・概要
  • プロダクトコードおけるModifierの使用頻度集計
  • Modifier解説 - 全47種
  • 使用回数 総合ランキング

7

© ZOZO, Inc.

8 of 78

カテゴリごとのModifierの一覧

​

​

公式ドキュメント「Compose 修飾子のリスト」ページより。

8

カテゴリ名

日本語訳

種類数

カテゴリ名

日本語訳

種類数

Action

操作

11

Padding

パディング

16

Alignment

位置揃え

3

Pointer

ポインタ

4

Animation

アニメーション

2

Position

位置

3

Border

枠線

1

Semantics

セマンティクス

4

Drawing

描画

12

Scroll

スクロール

11

Focus

フォーカス

9

Size

サイズ

33

Graphics

グラフィック

2

Testing

テスト

1

Keyboard

キーボード

2

Transformations

変換

3

Layout

レイアウト

3

Other

その他

27

© ZOZO, Inc.

9 of 78

たくさんある！！

ピックアップ時の参考用に

ZOZOのプロダクトコードでの使用頻度を集計

10 of 78

10

https://zozo.jp/

  • ファッションEC
  • 1,600以上のショップ、9,000以上のブランドの取り扱い
  • 常時102万点以上の商品アイテム数と毎日平均2,600点以上の新着 商品を掲載（2024年6月末時点）
  • ブランド古着のファッションゾーン「ZOZOUSED」や

コスメ専門モール「ZOZOCOSME」、靴の専門モール

「ZOZOSHOES」、ラグジュアリー＆デザイナーズゾーン

「ZOZOVILLA」を展開

  • 即日配送サービス
  • ギフトラッピングサービス
  • ツケ払い など

© ZOZO, Inc.

11 of 78

11

https://wear.jp/

  • あなたの「似合う」が探せるファッションコーディネートアプリ
  • 1,700万ダウンロード突破、コーディネート投稿総数は1,400万件以上（2024年6月末時点）
  • コーディネートや最新トレンド、メイクなど豊富なファッション情報をチェック
  • AIを活用したファッションジャンル診断や、フルメイクをARで試せる「WEARお試しメイク」を提供
  • コーディネート着用アイテムを公式サイトで購入可能
  • WEAR公認の人気ユーザーをWEARISTAと認定。モデル・タレント・デザイナー・インフルエンサーといった各界著名人も参加

© ZOZO, Inc.

12 of 78

  • ショップスタッフの販売サポートツール
  • ブランド自社ECやZOZOTOWNなどの複数チャネルに、無料でコーディネート画像の同時投稿が可能。さらに、投稿したコーディネート経由のEC売上や送客数、コーディネートの閲覧数など、オンライン上での成果を可視化。
  • ZOZOTOWN上で実店舗の在庫取り置きを希望したお客様への対応を、ショップスタッフ様がFAANS上の簡単操作で完結。

​

13 of 78

各Androidアプリの情報

​

​

  • ZOZOTOWN
    • 2012年5月 リリース
    • 2021年6月 Jetpack Compose導入
  • WEAR
    • 2013年10月 リリース
    • 2024年5月 フルリニューアル
    • 2022年4月 Jetpack Compose導入
  • FAANS
    • 2022年7月 リリース
    • 2021年8月 Jetpack Compose導入（リリース前 開発中）

13

© ZOZO, Inc.

14 of 78

プロダクトコードで使用されているModifier

よく使われていて面白そうなカテゴリ、使われていないが注目したいカテゴリから紹介

14

カテゴリ名

日本語訳

使用数/種類数

カテゴリ名

日本語訳

使用数/種類数

Action

操作

4/11

Padding

パディング

6/16

Alignment

位置揃え

3/3

Pointer

ポインタ

1/4

Animation

アニメーション

1/2

Position

位置

2/3

Border

枠線

1/1

Semantics

セマンティクス

0/4

Drawing

描画

6/12

Scroll

スクロール

4/11

Focus

フォーカス

4/9

Size

サイズ

21/33

Graphics

グラフィック

1/2

Testing

テスト

1/1

Keyboard

キーボード

0/2

Transformations

変換

2/3

Layout

レイアウト

2/3

Other

その他

5/27

© ZOZO, Inc.

15 of 78

目次

  • 導入・概要
  • プロダクトコードおけるModifierの使用頻度集計
  • Modifier解説 - 全47種
  • 使用回数 総合ランキング

15

© ZOZO, Inc.

16 of 78

Action

操作

1. clickable

2. draggable

3. selectable

4. combinedClickable

5. draggable2D

6. selectableGroup

7. toggleable

8. triStateToggleable

17 of 78

1. clickable

クリックやタップなどのタッチイベントを検出できるようにします。

val count = remember { mutableStateOf(0) }

Text(

text = "Clicked count: ${count.value}",

modifier = Modifier.clickable { count.value += 1 }

)

17

Action

© ZOZO, Inc.

18 of 78

2. draggable

単一のOrientation（水平または垂直）でドラッグします。

var offsetX by remember { mutableStateOf(0f) }

val draggableState = rememberDraggableState { delta -> offsetX += delta }

​

Box(

modifier = Modifier

.offset(x = offsetX.dp)

.size(100.dp)

.background(Color.Blue)

.draggable(

orientation = Orientation.Horizontal,

state = draggableState

)

)

18

Action

© ZOZO, Inc.

19 of 78

3. selectable

var selected by remember { mutableStateOf(false) }

Row {

Text(

"Option 1", modifier = Modifier

.selectable(selected = selected,

onClick = { selected = true })

.background(

if (selected) Color.Gray else Color.White

)

)

Text(

"Option 2", modifier = Modifier

.selectable(selected = !selected,

onClick = { selected = false })

.background(

if (!selected) Color.Gray else Color.White

))}

項目の選択状態を管理できるようにします。

ラジオボタンやチェックボックスのような動作を実現できます。

19

Action

© ZOZO, Inc.

20 of 78

4. combinedClickable

クリック、ダブルクリック、長押しといった複数のタッチイベントを1つのComposableで処理できるようにします。

var message by remember { mutableStateOf("") }

Box(

modifier = Modifier

.size(200.dp).background(Color.LightGray)

.combinedClickable(

onClick = { message = "Clicked!" },

onDoubleClick = { message = "Double Clicked!" },

onLongClick = { message = "Long Clicked!" },

interactionSource = remember {

MutableInteractionSource()

},

indication = null

),

contentAlignment = Alignment.Center

) {

Text(message)

}

20

Action

© ZOZO, Inc.

21 of 78

5. draggable2D

コンポーザブルを2次元平面（水平と垂直の両方）でドラッグします。

var offsetX by remember { mutableStateOf(0f) }

var offsetY by remember { mutableStateOf(0f) }

val state = rememberDraggable2DState { delta ->

offsetX += delta.x

offsetY += delta.y

}

​

Box(

modifier = Modifier

.offset { IntOffset(offsetX.roundToInt(), offsetY.roundToInt()) }

.size(100.dp)

.background(Color.Blue)

.draggable2D(state)

)

​

21

Action

© ZOZO, Inc.

22 of 78

6. selectableGroup

複数の項目から一つだけを選択できるグループを作成します。

Column(Modifier.selectableGroup()) {

options.forEach { option ->

Row(

Modifier.fillMaxWidth().height(56.dp)

.selectable(

selected = (option == selectedOption),

onClick = { selectedOption = option }

)

.padding(horizontal = 16.dp),

verticalAlignment = Alignment.CenterVertically

) {

RadioButton(

selected = (option == selectedOption), onClick = null

)

Text(

text = option,

modifier = Modifier.padding(start = 16.dp)

)

}}

22

Action

© ZOZO, Inc.

23 of 78

7. toggleable

入力イベント・ユーザー補助イベントを介して切り替え可能にします。

var checkedState by remember { mutableStateOf(false) }

Row(

modifier = Modifier.fillMaxWidth().padding(16.dp),

verticalAlignment = Alignment.CenterVertically

) {

Box(

modifier = Modifier.size(24.dp)

.background(

color = if (checkedState) Color.Blue else Color.LightGray)

.toggleable(

value = checkedState,

onValueChange = { checkedState = it },

role = Role.Checkbox

)

)

Spacer(modifier = Modifier.width(8.dp))

Text(text = if (checkedState) "On" else "Off")

}

23

Action

© ZOZO, Inc.

24 of 78

8. triStateToggleable

入力イベント・ユーザー補助イベントを介して「オン」「オフ」「不確定」の3つの状態の間で切り替え可能にします。

.background(

color = when (state) {

ToggleableState.On -> Color.Black

ToggleableState.Off -> Color.White

ToggleableState.Indeterminate -> Color.Gray

}

)

.triStateToggleable(

state = state,

onClick = {

state = when (state) {

ToggleableState.On -> ToggleableState.Indeterminate

ToggleableState.Indeterminate -> ToggleableState.Off

ToggleableState.Off -> ToggleableState.On

}

}

)

24

Action

© ZOZO, Inc.

25 of 78

Alignment

位置揃え

1. align

2. alignByBaseline

26 of 78

1. align

指定の方向に揃えます。Column, Row, Box内で使用できます。

Row (modifier = Modifier

.height(150.dp)

.background(Color.LightGray)) {

Text(

"Top",

modifier = Modifier.align(Alignment.Top)

)

Text(

"Bottom",

modifier = Modifier.align(Alignment.Bottom)

)

Text(

"CenterVertically",

modifier = Modifier.align(Alignment.CenterVertically)

)

}

​

​

​

​

26

Alignment

© ZOZO, Inc.

27 of 78

2. alignByBaseline

RowやColumn内でComposableのベースラインを揃えます。

Row {

Text(

text = "24spのテキスト",

fontSize = 24.sp,

modifier = Modifier.alignByBaseline()

)

Text(

text = "16spのテキスト",

fontSize = 16.sp,

modifier = Modifier.alignByBaseline()

)

}

alignByBaseline指定なしの場合

27

Alignment

WEARアプリ内「コーデ予報」で、気温と”℃”をベースライン揃え

© ZOZO, Inc.

28 of 78

Border

枠線

1. border

29 of 78

枠線 1. border

Composableに枠線を追加します。枠線の太さ、色、形状などを指定できます。

Box(

modifier = Modifier

.size(100.dp)

.border(width = 2.dp, color = Color.Black)

)

​

Box(

modifier = Modifier

.size(100.dp)

.border(

width = 2.dp,

color = Color.Red,

shape = RoundedCornerShape(16.dp)

)

)

​

​

29

Border

© ZOZO, Inc.

30 of 78

Drawing

描画

1. background

2. clip

3. alpha

4. zIndex

5. clipToBounds

6. shadow

7. drawBehind

31 of 78

1. background

背景に色、グラデーション、画像を設定します。

Box(modifier = Modifier.height(80.dp).width(300.dp)

.background(Color.Cyan)

) {

Text("background(Color.Cyan)")

}

.background(

brush = Brush.verticalGradient(

colors = listOf(Color.Transparent, Color.Gray)

)

)

31

Drawing

© ZOZO, Inc.

32 of 78

2. clip

Composableの描画範囲を指定した形状に切り抜きます。

Box(

modifier = Modifier.size(100.dp, 50.dp)

.clip(RoundedCornerShape(16.dp))

.background(Color.Red)

)

​

​

Box(

modifier = Modifier.size(100.dp, 50.dp)

.clip(CutCornerShape(topStart = 20.dp))

.background(Color.Blue)

)

​

​

32

Drawing

© ZOZO, Inc.

33 of 78

3. alpha

0.0f (透明) から 1.0f (不透明) までの値で透明度を指定します。

Icon(

imageVector = Icons.Filled.Favorite,

contentDescription = "Favorite Icon with Alpha",

modifier = Modifier

.size(48.dp)

.alpha(0.5f)

)

alpha指定なしの場合

33

Drawing

© ZOZO, Inc.

34 of 78

4. zIndex

同じ親レイアウトの子の描画順序を制御し、zIndex値が大きい要素を手前に描画します。

レイアウトにzIndexが適用されていない場合の、デフォルトのzIndex値は0です。

Box {

Box(

modifier = Modifier

.size(100.dp)

.background(Color.Red)

.zIndex(1f) // 赤いBoxを上に表示

)

Box(

modifier = Modifier

.size(150.dp)

.background(Color.Blue)

)

}

34

Drawing

© ZOZO, Inc.

35 of 78

5. clipToBounds

Composableの子要素が親要素の境界からはみ出さないように切り取ります。

子要素が親要素の範囲外に描画されるのを防ぎたい場合に使用します。

Box(

modifier = Modifier

.size(200.dp)

.background(Color.Gray)

.clipToBounds()

) {

Box(

modifier = Modifier

.size(300.dp)

.offset(50.dp, 50.dp)

.background(Color.Red, shape = CircleShape)

)

}

35

Drawing

© ZOZO, Inc.

36 of 78

6. shadow

影を描画する graphicsLayer を作成します。

影の色、形状などを指定できます。

Box(

modifier = Modifier

.height(100.dp)

.width(100.dp)

.shadow(elevation = 8.dp)

.background(Color.White)

)

.shadow(

elevation = 16.dp,

shape = RoundedCornerShape(16.dp),

spotColor = Color.Blue

)

.background(Color.White)

​

36

Drawing

© ZOZO, Inc.

37 of 78

7. drawBehind

要素の背後にカスタム描画を行います。線を描画するdrawLine、円を描画するdrawCircle、テキストを描画するdrawTextなど様々な描画関数が用意されています。

Box(

modifier = Modifier.size(150.dp, 100.dp)

.background(Color.Gray)

.drawBehind {

drawLine(

color = Color.Cyan,

start = Offset(size.width, 0f), // 右上

end = Offset(0f, size.height), // 左下

strokeWidth = 4.dp.toPx() // 線の太さ

)

}

) {

Text(

text = ".drawBehindの例",

modifier = Modifier.align(Alignment.Center),

color = Color.White

)

}

​

37

Drawing

© ZOZO, Inc.

38 of 78

Padding

パディング

1. padding

2. paddingFromBaseline

39 of 78

1. padding

コンテンツの端にスペースを追加します。�引数にはall, paddingValues, 各方向などを指定できます。

Text(

text = "padding 32dp",

modifier = Modifier.padding(32.dp)

)

39

Padding

© ZOZO, Inc.

40 of 78

2. paddingFromBaseline

要素のベースラインからのパディングを指定します。

Text(

text = "paddingFromBaseLine",

modifier = Modifier

.paddingFromBaseline(top = 24.dp)

)

40

Padding

引用元 https://developer.android.com/develop/ui/compose/layouts/custom?hl=ja

© ZOZO, Inc.

41 of 78

Padding その他

  • paddingFrom
  • absolutePadding
  • captionBarPadding
  • displayCutoutPadding
  • imePadding
  • mandatorySystemGesturesPadding
  • navigationBarsPadding

切り欠きやIMEなど、デバイスの形やシステムUIなどに対応するPaddingが多い。

41

Padding

  • safeContentPadding
  • safeGesturesPadding
  • statusBarsPadding
  • systemBarsPadding
  • systemGesturesPadding
  • waterfallPadding
  • windowInsetsPadding

© ZOZO, Inc.

42 of 78

Pointer

ポインタ

1. pointerInput

43 of 78

1. pointerInput

Composableでタッチやマウスなどのポインターイベントを処理するための低レベルのModifierです。ドラッグ、タップ、ズームなどのカスタムジェスチャーを実装する際に使用します。

var isPressed by remember { mutableStateOf(false) }

​

Box(

Modifier

.background(

if (isPressed) Color.Blue else Color.DarkGray

)

.size(100.dp)

.pointerInput(Unit) {

detectTapGestures(

onPress = {

isPressed = true

tryAwaitRelease()

isPressed = false

})

}

)

43

Pointer

© ZOZO, Inc.

44 of 78

Semantics

セマンティクス

1. semantics

2. clearAndSetSemantics

3. progressSemantics

45 of 78

1. semantics

テストやユーザー補助機能などで使用するために、セマンティクスのKey-Valueペアをレイアウトノードに追加します。

Text(

text = "semantics text",

modifier = Modifier.semantics {

stateDescription = "textのstateはvisibleです"

contentDescription = "semantics textというテキストです"

}

)

45

Semantics

※動画から音声が流れます

© ZOZO, Inc.

46 of 78

2. clearAndSetSemantics

コンポーザブルとその子要素の既存のセマンティクス情報をクリアし、 新しいセマンティクス情報を設定します。

Column(modifier = Modifier.clearAndSetSemantics {

contentDescription = "全体のcontentDescriptionです"

}) {

Text(text = "Text 1", modifier = Modifier.semantics {

contentDescription = "Text 1"

})

Text(text = "Text 2", modifier = Modifier.semantics {

contentDescription = "Text 2"

})

}

46

Semantics

※動画から音声が流れます

© ZOZO, Inc.

47 of 78

3. progressSemantics

スクリーンリーダーなどのアクセシビリティツールが、進行状況インジケーターの現在の進行状況をユーザーに伝えることができます。�"50% 進行状況バー" のように読み上げます。

var progress by remember { mutableStateOf(0.5f) }

Column {

Text("Downloading...")

LinearProgressIndicator(

progress = progress,

modifier = Modifier.progressSemantics(progress)

)

}

​

47

Semantics

※動画から音声が流れます

© ZOZO, Inc.

48 of 78

Size

サイズ

1. height, width

2. fillMaxHeight, � fillMaxWidth

3. size

4. fillMaxSize

5. aspectRatio

6. wrapContentHeight,� wrapContentWidth

7. wrapContentSize

8. defaultMinSize

9. heightIn, widthIn

10. animateContentSize

49 of 78

1. height, width

高さ、幅を指定します。

Box(

modifier = Modifier

.height(48.dp)

.width(256.dp)

.background(Color.LightGray)

) {

Text("height(48.dp) width(256.dp)")

}

​

49

Size

© ZOZO, Inc.

50 of 78

2. fillMaxHeight, fillMaxWidth

要素の高さ・幅を親レイアウトに対して指定した割合で広げます。

引数のfractionに0から1の値を渡すことで、親レイアウトの何割にするか指定できます。

Box(

modifier = Modifier

.fillMaxWidth()

.height(100.dp)

.background(Color.LightGray)

) {

Text("fillMaxWidth()")

}

.fillMaxWidth(0.5f) // 親の50%に設定

50

Size

© ZOZO, Inc.

51 of 78

3. size

要素の幅と高さを指定します。

Box(

modifier = Modifier

.size(width = 200.dp, height = 100.dp)

.background(Color.LightGray)

) {

Text("size(width = 200.dp, height = 100.dp)")

}

​

51

Size

© ZOZO, Inc.

52 of 78

4. fillMaxSize

要素の高さ・幅を親レイアウトに対して指定した割合で広げます。

引数のfractionに0から1の値を渡すことで、親レイアウトの何割にするか指定できます。

Box(

modifier = Modifier

.fillMaxSize()

.background(Color.LightGray)

) {

Text("fillMaxSize()")

}

52

Size

© ZOZO, Inc.

53 of 78

5. aspectRatio

要素のアスペクト比（幅と高さの比率） を指定します。

Box(

modifier = Modifier

.aspectRatio(16f / 9f)

.background(Color.LightGray)

.fillMaxWidth()

) {

Text("aspectRatio(16f / 9f)")

}

53

Size

© ZOZO, Inc.

54 of 78

6. wrapContentHeight, wrapContentWidth

要素の内容が収まる最小限の高さ・幅で表示します。

Column(

modifier = Modifier

.wrapContentHeight()

.background(Color.LightGray)

) {

Text("wrapContentHeight()")

Text("コンテンツに合わせて高さが調整されます。長い文だと高さが伸びます。")

}

54

Size

© ZOZO, Inc.

55 of 78

7. wrapContentSize

要素の内容が収まる最小限のサイズで表示します。

Column(

modifier = Modifier

.wrapContentSize()

.background(Color.LightGray)

) {

Text("wrapContentSize()")

Text("コンテンツに合わせて高さ・幅が調整されます。長い文だと高さ・幅が伸びます。")

}

​

55

Size

© ZOZO, Inc.

56 of 78

8. defaultMinSize

要素の最小サイズを指定します。

Box(

modifier = Modifier

.defaultMinSize(minWidth = 100.dp, minHeight = 50.dp)

.background(Color.LightGray)

) {

Text("Short Text")

}

Box(

modifier = Modifier

.defaultMinSize(minWidth = 100.dp, minHeight = 50.dp)

.background(Color.LightGray)

) {

Text("This is a longer text that exceeds the minimum size.")

}

56

Size

© ZOZO, Inc.

57 of 78

9. heightIn, widthIn

コンテンツの高さ・幅をmin dpからmax dpの範囲に制限します。

画像の場合、アスペクト比を維持したまま縮小します。minより小さい場合でも拡大はされません。

縮小ではなくトリミングしたい場合はclip Modifierを使います。

Image(

painter = painterResource(id = R.drawable.icon_wiroha),

contentDescription = "heightIn image",

modifier = Modifier.heightIn(min = 50.dp, max = 100.dp)

)

​

// heightIn指定なし

Image(

painter = painterResource(id = R.drawable.icon_wiroha),

contentDescription = "normal image",

)

57

Size

© ZOZO, Inc.

58 of 78

10. animateContentSize

要素のサイズ変更をアニメーションによって滑らかに変化させます。

var expanded by remember { mutableStateOf(false) }

Box(

modifier = Modifier

.animateContentSize()

.background(Color.LightGray)

.padding(16.dp)

.clickable { expanded = !expanded }

) {

Text(

text = if (expanded) {

"コンテンツサイズ変更時にアニメーションするModifierです。DroidKaigi 2023で発表した「よく見るあのUIをJetpack_Composeで実装する方法〇選」のアコーディオンでも使っていました。"

} else {

".animateContentSize"

})}

58

Size

© ZOZO, Inc.

59 of 78

Test

テスト

1. testTag

60 of 78

1. testTag

Composableにテスト用のタグを付けます。

UIテストを行う際に、このタグを使って特定のComposableを識別できます。

Text(

text = "testTag example",

modifier = Modifier.testTag("myText")

)

@get:Rule

val composeTestRule = createComposeRule()

​

@Test

fun testTextExists() {

composeTestRule.setContent { TestTagExample() }

composeTestRule.onNodeWithTag("myText")

.assertExists()

}

​

60

Test

© ZOZO, Inc.

61 of 78

Transformations

変換

1. rotate

2. scale

3. transformable

62 of 78

1. rotate

要素を指定した角度で回転させます。

値を増やすと時計回り、負の数にすると反時計回りで回転させます。

Box(

modifier = Modifier

.size(100.dp)

.rotate(30f)

.background(Color.Blue)

)

​

Text(

text = "Hello, world!",

modifier = Modifier.rotate(-15f)

)

62

Transformations

© ZOZO, Inc.

63 of 78

2. scale

要素を指定した倍率で拡大・縮小します。

Text(

text = "Hello, world!",

modifier = Modifier

.scale(scaleX = 1.5f, scaleY = 3f)

.background(Color.LightGray)

)

// scale指定なし

Text(

text = "Hello, world!",

modifier = Modifier

.background(Color.LightGray)

)

63

Transformations

© ZOZO, Inc.

64 of 78

3. transformable

ユーザーのジェスチャー (ピンチイン/アウト、回転など) に応じて Composableのサイズや回転を変更できるようにします。

var scale by remember { mutableStateOf(1f) }

Image(

painter = painterResource(id = R.drawable.icon_wiroha),

contentDescription = "Transformable Image",

modifier = Modifier

.fillMaxSize()

.transformable(

state = rememberTransformableState { zoomChange, _, _ ->

scale *= zoomChange

})

.scale(scale)

)

​

64

Transformations

© ZOZO, Inc.

65 of 78

Other

その他

1. basicMarquee

2. blur

3. hoverable

4. magnifier

5. onPlaced

6. placeholder

7. placeholderShimmer

66 of 78

1. basicMarquee

幅が広すぎて利用可能なスペースに収まらない場合、コンテンツにマーキーアニメーションを適用します。

iterations, animationMode, delayMillisなどの設定ができます。

Box(

modifier = Modifier.fillMaxWidth()

) {

Text(

".basicMarquee このように長いテキストだった場合にMarqueeで文字が流れます！！！",

modifier = Modifier.basicMarquee()

)

}

66

Other

© ZOZO, Inc.

67 of 78

2. blur

要素にぼかし効果を適用します。

radiusX, radiusYでぼかしの半径を指定します。値が大きいほどぼかしが強くなります。�※Android 12 (API レベル 31) 以降で利用可能です。

val image = painterResource(id = R.drawable.icon_wiroha)

Image(

painter = image,

contentDescription = "Blurred Image",

modifier = Modifier

.blur(

radiusX = 5.dp,

radiusY = 30.dp,

edgeTreatment = BlurredEdgeTreatment(RoundedCornerShape(8.dp))

)

)

​

67

Other

© ZOZO, Inc.

68 of 78

3. hoverable

要素にマウスホバーなどのホバーインタラクションを追加にします。

マウス接続、Chromebookなどで使用します。

エミュレータではタッチイベントしかサポートされていないため、hoverableは動作しません。

Box(

modifier = Modifier

.size(64.dp)

.background(if (isHovered) Color.Red else Color.Blue)

.hoverable(interactionSource = interactionSource),

contentAlignment = Alignment.Center

) {

Text(if (isHovered) "Hovered" else "Unhovered", color = Color.White)

}

​

68

Other

© ZOZO, Inc.

69 of 78

4. magnifier

拡大鏡機能を追加します。

※Android 9 (API レベル 28) 以降で利用できます。

Box(

Modifier

.magnifier(

sourceCenter = { magnifierCenter },

zoom = 2.5f

)

.pointerInput(Unit) {

detectDragGestures(

onDragStart = { magnifierCenter = it },

onDrag = { _, delta -> magnifierCenter += delta },

onDragEnd = { magnifierCenter = Offset.Unspecified },

onDragCancel = { magnifierCenter = Offset.Unspecified }

)}

.drawBehind {

for (diameter in 2 until size.maxDimension.toInt() step 10) {

drawCircle(

color = Color.Black,

radius = diameter / 2f,

style = Stroke()

)}})

​

69

Other

© ZOZO, Inc.

70 of 78

5. onPlaced

要素のレイアウト位置が確定したとき・変更されたときに実行されるコールバックを提供します。

Box(

modifier = Modifier

.size(100.dp)

.background(Color.Blue)

.onPlaced { coordinates: LayoutCoordinates ->

println("Composable placed at: ${coordinates.positionInRoot()}")

}

)

70

Other

© ZOZO, Inc.

71 of 78

6. placeholder

  • Wear OS by Googleで、コンテンツの読み込み中などのときにプレースホルダーを表示します。

Chip(

onClick = {},

label = {

Text(

text = labelText,

modifier = Modifier

.fillMaxWidth()

.placeholder(chipPlaceholderState)

)

},

icon = {

Box(

modifier = Modifier

.size(ChipDefaults.IconSize)

.placeholder(chipPlaceholderState)

) {

Icon(

painter = painterResource(id = R.drawable.heart),

contentDescription = "heart",

)}}, ...

71

Other

© ZOZO, Inc.

72 of 78

7. placeholderShimmer

  • Wear OS by Googleで、コンテンツの読み込み中などのときに光る描画を追加します。

...

colors = PlaceholderDefaults.placeholderChipColors(

originalChipColors = ChipDefaults.primaryChipColors(),

placeholderState = chipPlaceholderState

),

modifier = Modifier

.fillMaxWidth()

.placeholderShimmer(chipPlaceholderState)

)

LaunchedEffect(Unit) {

delay(2000)

iconResource = R.drawable.tile_preview

labelText = "Text"

}

if (!chipPlaceholderState.isShowContent) {

LaunchedEffect(chipPlaceholderState) {

chipPlaceholderState.startPlaceholderAnimation()

}

}

72

Other

© ZOZO, Inc.

73 of 78

目次

  • 導入・概要
  • プロダクトコードおけるModifierの使用頻度集計
  • Modifier解説 - 全47種
  • 使用回数 総合ランキング

73

© ZOZO, Inc.

74 of 78

使用回数 総合ランキング

75 of 78

ランキング 1位〜30位

75

順位

Modifier

使用回数

順位

Modifier

使用回数

順位

Modifier

使用回数

1

padding

1949

11

wrapContentHeight

163

21

verticalScroll

33

2

height

1758

12

clickable

147

22

defaultMinSize

29

3

fillMaxWidth

1305

13

border

136

23

nestedScroll

27

4

background

903

14

fillMaxHeight

104

23

heightIn

27

5

size

879

15

aspectRatio

94

25

pointerInput

22

6

width

768

16

wrapContentWidth

70

25

matchParentSize

22

7

align

588

17

offset

64

27

testTag

19

8

fillMaxSize

521

18

wrapContentSize

63

27

shadow

19

9

weight

406

19

alpha

63

29

rotate

18

10

clip

383

20

zIndex

42

30

animateContentSize

17

© ZOZO, Inc.

76 of 78

ランキング 31位〜54位

​

※62位以降は0回で同率

76

順位

Modifier

使用回数

順位

Modifier

使用回数

順位

Modifier

使用回数

31

focusRequester

15

41

layout

3

47

requiredSize

2

32

horizontalScroll

14

41

onFocusEvent

3

47

widthIn

2

33

scale

12

41

draggable

3

47

imePadding

2

34

alignByBaseline

11

41

windowInsetsTopHeight

3

54

focusable

1

35

clipToBounds

9

41

navigationBarsPadding

3

54

graphicsLayer

1

36

pullRefresh

7

41

statusBarsPadding

3

54

onGloballyPositioned

1

37

scrollable

6

47

onSizeChanged

2

54

paddingFromBaseline

1

37

absolutePadding

6

47

animateEnterExit

2

54

combinedClickable

1

39

alignBy

5

47

layoutId

2

54

requiredWidth

1

40

tabIndicatorOffset

4

47

selectable

2

54

fillParentMaxWidth

1

54

basicMarquee

1

© ZOZO, Inc.

77 of 78

まとめ

  • 合計49個のModifierを紹介しました。
  • 引数の違いでもさまざまな変化をつけられます。
  • 注意点
    • Modifier一覧ページではdeprecatedと書いてないものの、実装してみるとdeprecatedのModifierがありました。（animateItemPlacement、inspectable、menuAnchor）
    • 詳細がリンク切れしているModifierもありました。（tooltipTrigger）

77

Modifierを駆使して良いJetpack Composeライフを！

© ZOZO, Inc.

78 of 78