Jetpack Compose Modifier 徹底解説 / Jetpack Compose Modifier

DroidKaigi 2024( https://2024.droidkaigi.jp/timetable/692599/ )にて発表したスライド資料です。

アニメーションが多いため、Googleスライドでも公開しています。
https://docs.google.com/presentation/d/1cx0796Gc0qLlzUMJwWTz94PqSZ60LHMFmAdz0m7T3kA/edit?usp=sharing
※こちらのURLは変更する可能性があります

Transcript

1. Jetpack Compose Modifier 徹底解説 @wiroha Copyright © ZOZO, Inc. 1
2. © ZOZO, Inc. 株式会社ZOZO 技術本部 技術戦略部 DevRelブロック @wiroha（ゐろは） バックエンドエンジニア、PM、Androidエンジニアな どを経て現職のDevRelへ。 イベントの運営、文章を書くことが好き。 2
3. © ZOZO, Inc. 3 目次 • 導入・概要 • プロダクトコードおけるModifierの使用頻度集計 • Modifier解説 - 全47種 • 使用回数 総合ランキング
4. © ZOZO, Inc. 4 目次 • 導入・概要 • プロダクトコードおけるModifierの使用頻度集計 • Modifier解説 - 全47種 • 使用回数 総合ランキング
5. © ZOZO, Inc. 5 導入・概要 • Jetpack Composeを用いたUI開発において、Modifierは欠かせない要素です。 Composableの外観、レイアウト、動作などを変更するために使います。 • しかし、普段使わないModifierは知らない方も多いのではないでしょうか？ • 本セッションでは、Jetpack ComposeのModifier約150種類の中から、時間の許す限り解説しま す！ Text( text = "padding 32dp", modifier = Modifier.padding(32.dp) )
6. © ZOZO, Inc. 6 導入・概要 • 具体的なコード例に加え、画像・アニメーションを用いて視覚的にわかりやすく解説します。 公式ドキュメントの文章を読むだけではピンと来ない内容も、直感的に理解できるはずです。 引用元 https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).alpha(kotlin.Float) Icon( imageVector = Icons.Filled.Favorite, modifier = Modifier.alpha(0.5f) )
7. © ZOZO, Inc. 7 目次 • 導入・概要 • プロダクトコードおけるModifierの使用頻度集計 • Modifier解説 - 全47種 • 使用回数 総合ランキング
8. © ZOZO, Inc. 8 カテゴリごとのModifierの一覧 公式ドキュメント「Compose 修飾子のリスト」ページより。 カテゴリ名 日本語訳 種類数 カテゴリ名 日本語訳 種類数 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
9. たくさんある！！ ピックアップ時の参考用に ZOZOのプロダクトコードでの使用頻度を集計
10. © ZOZO, Inc. https://zozo.jp/ 10 • ファッションEC • 1,600以上のショップ、9,000以上のブランドの取り扱い • 常時102万点以上の商品アイテム数と毎日平均2,600点以上の新着 商品を掲載（2024年6月末時点） • ブランド古着のファッションゾーン「ZOZOUSED」や コスメ専門モール「ZOZOCOSME」、靴の専門モール 「ZOZOSHOES」、ラグジュアリー＆デザイナーズゾーン 「ZOZOVILLA」を展開 • 即日配送サービス • ギフトラッピングサービス • ツケ払い など
11. © ZOZO, Inc. https://wear.jp/ 11 • あなたの「似合う」が探せるファッションコーディネートアプリ • 1,700万ダウンロード突破、コーディネート投稿総数は1,400万 件以上（2024年6月末時点） • コーディネートや最新トレンド、メイクなど豊富なファッション 情報をチェック • AIを活用したファッションジャンル診断や、フルメイクをARで試 せる「WEARお試しメイク」を提供 • コーディネート着用アイテムを公式サイトで購入可能 • WEAR公認の人気ユーザーをWEARISTAと認定。モデル・タレン ト・デザイナー・インフルエンサーといった各界著名人も参加
12. • ショップスタッフの販売サポートツール • ブランド自社ECやZOZOTOWNなどの複数チャネルに、無料で コーディネート画像の同時投稿が可能。さらに、投稿したコー ディネート経由のEC売上や送客数、コーディネートの閲覧数な ど、オンライン上での成果を可視化。 • ZOZOTOWN上で実店舗の在庫取り置きを希望したお客様への 対応を、ショップスタッフ様がFAANS上の簡単操作で完結。
13. © ZOZO, Inc. 13 各Androidアプリの情報 • ZOZOTOWN ◦ 2012年5月 リリース ◦ 2021年6月 Jetpack Compose導入 • WEAR ◦ 2013年10月 リリース ◦ 2024年5月 フルリニューアル ◦ 2022年4月 Jetpack Compose導入 • FAANS ◦ 2022年7月 リリース ◦ 2021年8月 Jetpack Compose導入（リリース前 開発中）
14. © ZOZO, Inc. 14 プロダクトコードで使用されているModifier カテゴリ名 日本語訳 使用数/種類数 カテゴリ名 日本語訳 使用数/種類数 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 よく使われていて面白そうなカテゴリ、使われていないが注目したいカテゴリから紹介
15. © ZOZO, Inc. 15 目次 • 導入・概要 • プロダクトコードおけるModifierの使用頻度集計 • Modifier解説 - 全47種 • 使用回数 総合ランキング
16. Action 操作 1. clickable 2. draggable 3. selectable 4. combinedClickable 5. draggable2D 6. selectableGroup 7. toggleable 8. triStateToggleable
17. © ZOZO, Inc. 1. clickable 17 クリックやタップなどのタッチイベントを検出できるようにします。 val count = remember { mutableStateOf(0) } Text( text = "Clicked count: ${count.value}", modifier = Modifier.clickable { count.value += 1 } ) Action
18. © ZOZO, Inc. 2. draggable 18 単一の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 ) ) Action
19. © ZOZO, Inc. 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 ))} 3. selectable 19 項目の選択状態を管理できるようにします。 ラジオボタンやチェックボックスのような動作を実現できます。 Action
20. © ZOZO, Inc. 4. combinedClickable 20 クリック、ダブルクリック、長押しといった複数のタッチイベントを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) } Action
21. © ZOZO, Inc. 5. draggable2D 21 コンポーザブルを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) ) Action
22. © ZOZO, Inc. 6. selectableGroup 22 複数の項目から一つだけを選択できるグループを作成します。 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) ) }} Action
23. © ZOZO, Inc. 7. toggleable 23 入力イベント・ユーザー補助イベントを介して切り替え可能にします。 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") } Action
24. © ZOZO, Inc. 8. triStateToggleable 24 入力イベント・ユーザー補助イベントを介して「オン」「オフ」「不確定」 の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 } } ) Action
25. Alignment 位置揃え 1. align 2. alignByBaseline
26. © ZOZO, Inc. 1. align 26 指定の方向に揃えます。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) ) } Alignment
27. © ZOZO, Inc. 2. alignByBaseline 27 RowやColumn内でComposableのベースラインを揃えます。 Row { Text( text = "24spのテキスト", fontSize = 24.sp, modifier = Modifier.alignByBaseline() ) Text( text = "16spのテキスト", fontSize = 16.sp, modifier = Modifier.alignByBaseline() ) } Alignment alignByBaseline指定なしの場合 WEARアプリ内「コーデ予報」で、気温と”℃”をベースライン揃え
28. Border 枠線 1. border
29. © ZOZO, Inc. 枠線 1. border 29 Composableに枠線を追加します。枠線の太さ、色、形状などを指定できます。 Box( modifier = Modifier .size(100.dp) .border(width = 2.dp, color = Color.Black) ) Border Box( modifier = Modifier .size(100.dp) .border( width = 2.dp, color = Color.Red, shape = RoundedCornerShape(16.dp) ) )
30. Drawing 描画 1. background 2. clip 3. alpha 4. zIndex 5. clipToBounds 6. shadow 7. drawBehind
31. © ZOZO, Inc. 1. background 31 背景に色、グラデーション、画像を設定します。 Box(modifier = Modifier.height(80.dp).width(300.dp) .background(Color.Cyan) ) { Text("background(Color.Cyan)") } Drawing .background( brush = Brush.verticalGradient( colors = listOf(Color.Transparent, Color.Gray) ) )
32. © ZOZO, Inc. 2. clip 32 Composableの描画範囲を指定した形状に切り抜きます。 Box( modifier = Modifier.size(100.dp, 50.dp) .clip(RoundedCornerShape(16.dp)) .background(Color.Red) ) Drawing Box( modifier = Modifier.size(100.dp, 50.dp) .clip(CutCornerShape(topStart = 20.dp)) .background(Color.Blue) )
33. © ZOZO, Inc. 3. alpha 33 0.0f (透明) から 1.0f (不透明) までの値で透明度を指定します。 Icon( imageVector = Icons.Filled.Favorite, contentDescription = "Favorite Icon with Alpha", modifier = Modifier .size(48.dp) .alpha(0.5f) ) Drawing alpha指定なしの場合
34. © ZOZO, Inc. 4. zIndex 34 同じ親レイアウトの子の描画順序を制御し、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) ) } Drawing
35. © ZOZO, Inc. 5. clipToBounds 35 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) ) } Drawing
36. © ZOZO, Inc. 6. shadow 36 影を描画する graphicsLayer を作成します。 影の色、形状などを指定できます。 Box( modifier = Modifier .height(100.dp) .width(100.dp) .shadow(elevation = 8.dp) .background(Color.White) ) Drawing .shadow( elevation = 16.dp, shape = RoundedCornerShape(16.dp), spotColor = Color.Blue ) .background(Color.White)
37. © ZOZO, Inc. 7. drawBehind 37 要素の背後にカスタム描画を行います。線を描画する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 ) } Drawing
38. Padding パディング 1. padding 2. paddingFromBaseline
39. © ZOZO, Inc. 1. padding 39 コンテンツの端にスペースを追加します。 引数にはall, paddingValues, 各方向などを指定できます。 Text( text = "padding 32dp", modifier = Modifier.padding(32.dp) ) Padding
40. © ZOZO, Inc. 2. paddingFromBaseline 40 要素のベースラインからのパディングを指定します。 Text( text = "paddingFromBaseLine", modifier = Modifier .paddingFromBaseline(top = 24.dp) ) Padding 引用元 https://developer.android.com/develop/ui/compose/layouts/custom?hl=ja
41. © ZOZO, Inc. Padding その他 41 • paddingFrom • absolutePadding • captionBarPadding • displayCutoutPadding • imePadding • mandatorySystemGesturesPadding • navigationBarsPadding Padding • safeContentPadding • safeGesturesPadding • statusBarsPadding • systemBarsPadding • systemGesturesPadding • waterfallPadding • windowInsetsPadding 切り欠きやIMEなど、デバイスの形やシステムUIなどに対応するPaddingが多い。
42. Pointer ポインタ 1. pointerInput
43. © ZOZO, Inc. 1. pointerInput 43 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 }) } ) Pointer
44. Semantics セマンティクス 1. semantics 2. clearAndSetSemantics 3. progressSemantics
45. © ZOZO, Inc. 1. semantics 45 テストやユーザー補助機能などで使用するために、セマンティクスの Key-Valueペアをレイアウトノードに追加します。 Text( text = "semantics text", modifier = Modifier.semantics { stateDescription = "textのstateはvisibleです" contentDescription = "semantics textというテキストです" } ) Semantics ※動画から音声が流れます
46. © ZOZO, Inc. 2. clearAndSetSemantics 46 コンポーザブルとその子要素の既存のセマンティクス情報をクリア し、 新しいセマンティクス情報を設定します。 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" }) } Semantics ※動画から音声が流れます
47. © ZOZO, Inc. 3. progressSemantics 47 スクリーンリーダーなどのアクセシビリティツールが、進行状況インジケーターの現在の進行状況を ユーザーに伝えることができます。 "50% 進行状況バー" のように読み上げます。 var progress by remember { mutableStateOf(0.5f) } Column { Text("Downloading...") LinearProgressIndicator( progress = progress, modifier = Modifier.progressSemantics(progress) ) } Semantics ※動画から音声が流れます
48. 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. © ZOZO, Inc. 1. height, width 49 高さ、幅を指定します。 Box( modifier = Modifier .height(48.dp) .width(256.dp) .background(Color.LightGray) ) { Text("height(48.dp) width(256.dp)") } Size
50. © ZOZO, Inc. 2. fillMaxHeight, fillMaxWidth 50 要素の高さ・幅を親レイアウトに対して指定した割合で広げます。 引数のfractionに0から1の値を渡すことで、親レイアウトの何割にするか指定できます。 Box( modifier = Modifier .fillMaxWidth() .height(100.dp) .background(Color.LightGray) ) { Text("fillMaxWidth()") } Size .fillMaxWidth(0.5f) // 親の50%に設定
51. © ZOZO, Inc. 3. size 51 要素の幅と高さを指定します。 Box( modifier = Modifier .size(width = 200.dp, height = 100.dp) .background(Color.LightGray) ) { Text("size(width = 200.dp, height = 100.dp)") } Size
52. © ZOZO, Inc. 4. fillMaxSize 52 要素の高さ・幅を親レイアウトに対して指定した割合で広げます。 引数のfractionに0から1の値を渡すことで、親レイアウトの何割にする か指定できます。 Box( modifier = Modifier .fillMaxSize() .background(Color.LightGray) ) { Text("fillMaxSize()") } Size
53. © ZOZO, Inc. 5. aspectRatio 53 要素のアスペクト比（幅と高さの比率） を指定します。 Box( modifier = Modifier .aspectRatio(16f / 9f) .background(Color.LightGray) .fillMaxWidth() ) { Text("aspectRatio(16f / 9f)") } Size
54. © ZOZO, Inc. 6. wrapContentHeight, wrapContentWidth 54 要素の内容が収まる最小限の高さ・幅で表示します。 Column( modifier = Modifier .wrapContentHeight() .background(Color.LightGray) ) { Text("wrapContentHeight()") Text("コンテンツに合わせて高さが調整されます。 長い文だと高さが伸びます。") } Size
55. © ZOZO, Inc. 7. wrapContentSize 55 要素の内容が収まる最小限のサイズで表示します。 Column( modifier = Modifier .wrapContentSize() .background(Color.LightGray) ) { Text("wrapContentSize()") Text("コンテンツに合わせて高さ・幅が調整されま す。長い文だと高さ・幅が伸びます。") } Size
56. © ZOZO, Inc. 8. defaultMinSize 56 要素の最小サイズを指定します。 Box( modifier = Modifier .defaultMinSize(minWidth = 100.dp, minHeight = 50.dp) .background(Color.LightGray) ) { Text("Short Text") } Size Box( modifier = Modifier .defaultMinSize(minWidth = 100.dp, minHeight = 50.dp) .background(Color.LightGray) ) { Text("This is a longer text that exceeds the minimum size.") }
57. © ZOZO, Inc. 9. heightIn, widthIn 57 コンテンツの高さ・幅を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) ) Size // heightIn指定なし Image( painter = painterResource(id = R.drawable.icon_wiroha), contentDescription = "normal image", )
58. © ZOZO, Inc. 10. animateContentSize 58 要素のサイズ変更をアニメーションによって滑らかに変化させます。 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" })} Size
59. Test テスト 1. testTag
60. © ZOZO, Inc. 1. testTag 60 Composableにテスト用のタグを付けます。 UIテストを行う際に、このタグを使って特定のComposableを識別できます。 Text( text = "testTag example", modifier = Modifier.testTag("myText") ) Test @get:Rule val composeTestRule = createComposeRule() @Test fun testTextExists() { composeTestRule.setContent { TestTagExample() } composeTestRule.onNodeWithTag("myText") .assertExists() }
61. Transformations 変換 1. rotate 2. scale 3. transformable
62. © ZOZO, Inc. 1. rotate 62 要素を指定した角度で回転させます。 値を増やすと時計回り、負の数にすると反時計回りで回転させます。 Box( modifier = Modifier .size(100.dp) .rotate(30f) .background(Color.Blue) ) Transformations Text( text = "Hello, world!", modifier = Modifier.rotate(-15f) )
63. © ZOZO, Inc. 2. scale 63 要素を指定した倍率で拡大・縮小します。 Text( text = "Hello, world!", modifier = Modifier .scale(scaleX = 1.5f, scaleY = 3f) .background(Color.LightGray) ) Transformations // scale指定なし Text( text = "Hello, world!", modifier = Modifier .background(Color.LightGray) )
64. © ZOZO, Inc. 3. transformable 64 ユーザーのジェスチャー (ピンチイン/アウト、回転など) に応じて 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) ) Transformations
65. Other その他 1. basicMarquee 2. blur 3. hoverable 4. magnifier 5. onPlaced 6. placeholder 7. placeholderShimmer
66. © ZOZO, Inc. 1. basicMarquee 66 幅が広すぎて利用可能なスペースに収まらない場合、コンテンツにマーキーアニメーションを適用します。 iterations, animationMode, delayMillisなどの設定ができます。 Box( modifier = Modifier.fillMaxWidth() ) { Text( ".basicMarquee このように長いテキストだっ た場合にMarqueeで文字が流れます！！！", modifier = Modifier.basicMarquee() ) } Other
67. © ZOZO, Inc. 2. blur 67 要素にぼかし効果を適用します。 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)) ) ) Other
68. © ZOZO, Inc. 3. hoverable 68 要素にマウスホバーなどのホバーインタラクションを追加にします。 マウス接続、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) } Other
69. © ZOZO, Inc. 4. magnifier 69 拡大鏡機能を追加します。 ※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() )}}) Other
70. © ZOZO, Inc. 5. onPlaced 70 要素のレイアウト位置が確定したとき・変更されたときに実行されるコールバックを提供します。 Box( modifier = Modifier .size(100.dp) .background(Color.Blue) .onPlaced { coordinates: LayoutCoordinates -> println("Composable placed at: ${coordinates.positionInRoot()}") } ) Other
71. © ZOZO, Inc. 6. placeholder 71 • 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", )}}, ... Other
72. © ZOZO, Inc. 7. placeholderShimmer 72 • 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() } } Other
73. © ZOZO, Inc. 73 目次 • 導入・概要 • プロダクトコードおけるModifierの使用頻度集計 • Modifier解説 - 全47種 • 使用回数 総合ランキング
74. 使用回数 総合ランキング
75. © ZOZO, Inc. 75 ランキング 1位〜30位 順位 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
76. © ZOZO, Inc. 76 ランキング 31位〜54位 順位 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 ※62位以降は0回で同率
77. © ZOZO, Inc. 77 まとめ • 合計49個のModifierを紹介しました。 • 引数の違いでもさまざまな変化をつけられます。 • 注意点 ◦ Modifier一覧ページではdeprecatedと書いてないものの、実装してみるとdeprecatedの Modifierがありました。（animateItemPlacement、inspectable、menuAnchor） ◦ 詳細がリンク切れしているModifierもありました。（tooltipTrigger） Modifierを駆使して良いJetpack Composeライフを！