Jetpack Compose Academy · Pelajaran

Seret, Usap & Lontar

Lacak pergerakan dan momentum.

Seret, Usap & Lontar adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Jetpack Compose Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

Following the Finger

Dragging means tracking how far a finger moves and updating the UI to match. Compose makes this smooth with dedicated drag detectors. ✋

Detect Drag Gestures

Inside pointerInput, call detectDragGestures. Its onDrag lambda fires repeatedly with the change and the distance moved since the last event.

detectDragGestures { change, drag -> /* move */ }

Accumulate the Offset

Keep a state Offset and add each drag delta to it. Then feed that offset into a Modifier so the element follows your finger.

var offset by remember { mutableStateOf(Offset.Zero) }
offset += drag

Apply with offset Modifier

Use the offset modifier to move a composable by your tracked pixels. Convert with roundToInt so it positions cleanly on screen.

Modifier.offset { IntOffset(offset.x.roundToInt(), offset.y.roundToInt()) }

Consume the Change

Call change.consume() in your drag handler. This tells parents you handled the event so they do not also react to it.

detectDragGestures { change, drag -> change.consume() }

Limit to One Axis

Need only sideways motion? Use detectHorizontalDragGestures, or detectVerticalDragGestures for up and down. They report a single Float delta.

detectHorizontalDragGestures { _, dx -> x += dx }

Swipe to Dismiss

A swipe is just a drag you judge at the end. If the finger traveled far enough, treat it as a dismiss instead of snapping back.

The High-Level draggable

For simple single-axis dragging, the draggable modifier is easier. Pair it with rememberDraggableState to collect the delta.

Modifier.draggable(state, orientation = Orientation.Horizontal)

Fling Needs Velocity

A fling keeps moving after release based on speed. Track velocity with a VelocityTracker as the finger moves to capture that momentum.

val tracker = VelocityTracker()

Animate the Decay

Feed the release velocity into an Animatable with a decay spec. It glides to a natural stop, mimicking real physics. 🌀

animatable.animateDecay(velocity, exponentialDecay())

Know When It Ends

detectDragGestures also gives you onDragEnd and onDragCancel. Use them to snap back, settle, or kick off your fling animation.

detectDragGestures(onDragEnd = { /* fling here */ }) {...}

Quick Check

What does a fling animation need that a plain drag does not?

Recap: Move with Momentum

You tracked drags with detectDragGestures, accumulated an offset, judged swipes, and used velocity for a fling. Touch now feels alive. 🎉

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Seret, Usap & Lontar” gratis?

Ya — teks lengkap “Seret, Usap & Lontar” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Jetpack Compose Academy, upgrade ke CoddyKit PRO. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Seret, Usap & Lontar”?

Lacak pergerakan dan momentum. Kamu berlatih Jetpack Compose Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Jetpack Compose Academy?

Tidak diperlukan pengalaman sebelumnya. Jetpack Compose Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Seret, Usap & Lontar” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Jetpack Compose Academy ini?

Ya. Setiap pelajaran Jetpack Compose Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Jetpack Compose Academy