DnD in Compose - Speaker Deck

Slide 1

Slide 1 text

DnD in Compose @punchdrunker 2025/4/4

Slide 2

Slide 2 text

自己紹介 - 2010〜 Android / iOS Dev - Director of DroidKaigi Association - MNG - Tamagotchi Connect

Slide 3

Slide 3 text

ComposeでもDnD(ドラッグアンドドロップ)できる? - Jetpack Compose 1.6からDnDサポート追加 - 具体的には dragAndDropSource と dragAndDropTarget を使う - Viewベースと同じく ClipData でデータを渡せる

Slide 4

Slide 4 text

最小限の実装の流れ構成 - Modifier.dragAndDropSource → ドラッグしたいもの - ClipDataで中身を渡す - Modifier.dragAndDropTarget → ドロップ先 - DragAndDropEventでイベント受け取り 📦 データの受け渡しは ClipData.newPlainText("label", "value") みたいな感じ

Slide 5

Slide 5 text

example: dragAndDropSource

Slide 6

Slide 6 text

example: dragAndDropTarget 1/2

Slide 7

Slide 7 text

example: dragAndDropTarget 2/2 onDropだけ実装必須

Slide 8

Slide 8 text

example: DragAndDropEvent - DragAndDropEvent - mimeType - DragEvent - Offset - ClipData - …(たくさん)

Slide 9

Slide 9 text

まとめまとめ: - ComposeでもDnDができるようになった - Modifierベースで導入も簡単 - ClipDataとDragAndDropEventの理解がポイント - 外部アプリからのDnD対応もできそうなのでやってみたい - ファイルDnDなども試す予定！

Slide 10

Slide 10 text

Resources - actual code: https://github.com/punchdrunker/compose-drag-and-drop/blob/main/app/src/ main/java/com/example/myapplication/MainActivity.kt - overview: https://developer.android.com/reference/kotlin/androidx/compose/foundation/d raganddrop/package-summary -