ドラッグ、スワイプ、フリング
動きと慣性を追跡します。
「ドラッグ、スワイプ、フリング」はCoddyKit上の無料Jetpack Compose Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。
指に追従させる
ドラッグとは、指がどれだけ動いたかを追跡し、それに合わせてUIを更新することです。Composeでは専用のdrag検出器を使って滑らかに処理できます。✋
ドラッグジェスチャーを検出する
pointerInput内でdetectDragGesturesを呼び出します。そのonDragラムダは、変化と前回のイベントからの移動距離を受け取り、繰り返し実行されます。
detectDragGestures { change, drag -> /* move */ }オフセットを累積する
状態としてOffsetを保持し、各ドラッグ差分を加算します。そのオフセットをModifierに渡すと、要素を指に追従させられます。
var offset by remember { mutableStateOf(Offset.Zero) }
offset += dragoffset Modifierで適用する
offset修飾子を使って、追跡したピクセル分だけComposableを移動します。roundToIntで変換すると、画面上にきれいに配置できます。
Modifier.offset { IntOffset(offset.x.roundToInt(), offset.y.roundToInt()) }変化を消費する
ドラッグハンドラーでchange.consume()を呼び出します。これによりイベントを処理したことが親に伝わり、親が同じイベントに反応するのを防げます。
detectDragGestures { change, drag -> change.consume() }1つの軸に制限する
横方向だけに動かしたい場合はdetectHorizontalDragGesturesを使います。上下方向ならdetectVerticalDragGesturesを使います。どちらも単一のFloat差分を報告します。
detectHorizontalDragGestures { _, dx -> x += dx }スワイプして閉じる
スワイプとは、最後に結果を判定するドラッグです。指が十分な距離を移動していれば、元に戻すのではなく閉じる操作として扱います。
高レベルのdraggable
単純な1軸のドラッグにはdraggable修飾子が便利です。rememberDraggableStateと組み合わせて差分を収集します。
Modifier.draggable(state, orientation = Orientation.Horizontal)フリングには速度が必要
フリングは、離した後も速度に応じて動き続けます。指の動きに合わせてVelocityTrackerで速度を追跡し、その勢いを取得します。
val tracker = VelocityTracker()減衰をアニメーションする
離したときの速度を減衰仕様とともにAnimatableへ渡します。実際の物理法則のように、自然に停止するまで滑らかに動きます。🌀
animatable.animateDecay(velocity, exponentialDecay())終了を把握する
detectDragGesturesにはonDragEndとonDragCancelもあります。これらを使って、元に戻す、位置を確定する、フリングアニメーションを開始するといった処理を行います。
detectDragGestures(onDragEnd = { /* fling here */ }) {...}理解度チェック
通常のドラッグにはなく、フリングアニメーションに必要なものは何ですか？
復習：勢いをつけて動かす
detectDragGesturesでドラッグを追跡し、オフセットを累積し、スワイプを判定して、フリングに速度を使いました。タッチ操作が生き生きと動くようになりました。🎉
AI チューターと学ぶ Kotlin — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「ドラッグ、スワイプ、フリング」レッスンは無料ですか？
はい。「ドラッグ、スワイプ、フリング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。
「ドラッグ、スワイプ、フリング」で何を学びますか？
動きと慣性を追跡します。 ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Jetpack Compose Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJetpack Compose Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「ドラッグ、スワイプ、フリング」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJetpack Compose Academyレッスンでコードを書いて実行できますか？
はい。すべてのJetpack Compose Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。