0Pricing
Jetpack Compose Academy · Leçon

Transformation : déplacement, zoom et rotation

Prenez en charge les gestes de pincement et multipoints.

Transformation : déplacement, zoom et rotation est une leçon Jetpack Compose Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.

Pinch, Zoom, Rotate

Some gestures use two fingers at once. Compose bundles pan, zoom, and rotate into a single helper called detectTransformGestures. 🤏

One Detector, Three Values

Inside pointerInput, detectTransformGestures hands you pan as an Offset, zoom as a Float scale, and rotation in degrees together.

detectTransformGestures { _, pan, zoom, rotation -> }

Store the Three States

Keep a scale, an offset, and a rotation in remembered state. Update each from the gesture so the element transforms live.

var scale by remember { mutableStateOf(1f) }

Multiply the Zoom

The zoom value is relative, so multiply it into your scale rather than replacing it. Pinch out grows, pinch in shrinks.

scale *= zoom

Add the Rotation

The rotation delta is in degrees per gesture step. Accumulate it so twisting two fingers spins your content smoothly.

angle += rotation

Pan Moves It Around

The pan Offset reports how far the gesture's center moved. Add it to your offset state to slide the content under the fingers.

offset += pan

Apply with graphicsLayer

The clean way to render transforms is the graphicsLayer modifier. Set scaleX, scaleY, rotationZ, and translation in one place.

Modifier.graphicsLayer(scaleX = scale, scaleY = scale, rotationZ = angle)

Translate Inside the Layer

Inside graphicsLayer, set translationX and translationY from your offset. It transforms without forcing a costly layout pass.

translationX = offset.x; translationY = offset.y

Clamp the Scale

Users will pinch wildly, so clamp your scale to sane bounds with coerceIn. This stops content from vanishing or filling the world.

scale = scale.coerceIn(0.5f, 5f)

Order of Operations

graphicsLayer applies scale, then rotation, then translation. Knowing this order helps you predict where transformed content lands.

Centered Around the Pivot

By default transforms pivot around the element's center. Adjust transformOrigin in graphicsLayer to zoom and rotate around another point.

Modifier.graphicsLayer(transformOrigin = TransformOrigin(0f, 0f))

Quick Check

How should you apply the incoming zoom value to your scale state?

Recap: Multi-Touch Magic

You used detectTransformGestures for pan, zoom, and rotate, then applied them through graphicsLayer with clamping. Pinch-to-zoom is yours. 🎉

Questions Fréquemment Posées

La leçon « Transformation : déplacement, zoom et rotation » est-elle gratuite ?

Oui — le texte complet de « Transformation : déplacement, zoom et rotation » 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 « Transformation : déplacement, zoom et rotation » ?

Prenez en charge les gestes de pincement et multipoints. 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 3 sur 4.

Combien de temps prend la leçon « Transformation : déplacement, zoom et rotation » ?

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

  1. pointerInput et detectTapGestures
  2. Glisser, balayer et projeter
  3. Transformation : déplacement, zoom et rotation
  4. Connexions de défilement imbriquées
← Retour à Jetpack Compose Academy