Jetpack Compose Academy · Lektion

Transform: Schwenken, Zoomen und Drehen

Unterstützen Sie Pinch- und Multi-Touch-Gesten.

Transform: Schwenken, Zoomen und Drehen ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Jetpack Compose Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

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. 🎉

Häufig gestellte Fragen

Ist die Lektion „Transform: Schwenken, Zoomen und Drehen“ kostenlos?

Ja — der vollständige Text von „Transform: Schwenken, Zoomen und Drehen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Jetpack Compose Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Transform: Schwenken, Zoomen und Drehen“?

Unterstützen Sie Pinch- und Multi-Touch-Gesten. Du übst Jetpack Compose Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Jetpack Compose Academy zu starten?

Keine Vorkenntnisse erforderlich. Jetpack Compose Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Transform: Schwenken, Zoomen und Drehen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Jetpack Compose Academy-Lektion Code schreiben und ausführen?

Ja. Jede Jetpack Compose Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Jetpack Compose Academy