Glisser, balayer et projeter
Suivez les mouvements et l’inertie.
Glisser, balayer et projeter est une leçon Jetpack Compose Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Jetpack Compose Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Jetpack Compose Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
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. 🎉
Questions Fréquemment Posées
La leçon « Glisser, balayer et projeter » est-elle gratuite ?
Oui — le texte complet de « Glisser, balayer et projeter » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Jetpack Compose Academy, passe à CoddyKit PRO. Le cours Jetpack Compose Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Glisser, balayer et projeter » ?
Suivez les mouvements et l’inertie. Tu pratiques Jetpack Compose Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Jetpack Compose Academy ?
Aucune expérience préalable n'est requise. Jetpack Compose Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Glisser, balayer et projeter » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Jetpack Compose Academy ?
Oui. Chaque leçon Jetpack Compose Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- pointerInput et detectTapGestures
- Glisser, balayer et projeter
- Transformation : déplacement, zoom et rotation
- Connexions de défilement imbriquées