Sürükleme, Kaydırma ve Fırlatma
Hareketi ve momentumu izleyin.
Sürükleme, Kaydırma ve Fırlatma, CoddyKit'te ücretsiz bir Jetpack Compose Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Jetpack Compose Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
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 += dragApply 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. 🎉
Sıkça Sorulan Sorular
“Sürükleme, Kaydırma ve Fırlatma” dersi ücretsiz mi?
Evet — “Sürükleme, Kaydırma ve Fırlatma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Jetpack Compose Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.
“Sürükleme, Kaydırma ve Fırlatma” dersinde ne öğreneceğim?
Hareketi ve momentumu izleyin. Jetpack Compose Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Jetpack Compose Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Jetpack Compose Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Sürükleme, Kaydırma ve Fırlatma” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Jetpack Compose Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Jetpack Compose Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- pointerInput ve detectTapGestures
- Sürükleme, Kaydırma ve Fırlatma
- Dönüştürme: Kaydırma, Yakınlaştırma ve Döndürme
- İç İçe Kaydırma Bağlantıları