Jetpack Compose Academy · Lektion

Transform: Panorering, zoom og rotation

Understøt knibe- og multitouch-bevægelser.

Lektion 3 af 413 trin

Transform: Panorering, zoom og rotation er en gratis Jetpack Compose Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Jetpack Compose Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Jetpack Compose Academy-kurset indeholder 4 lektioner i alt.

Knib, zoom, rotér

Nogle bevægelser bruger to fingre på samme tid. Compose samler panorering, zoom og rotation i én hjælper, der hedder detectTransformGestures. 🤏

Én registrering, tre værdier

Inde i pointerInput giver detectTransformGestures dig panorering som en Offset, zoom som en Float-skala og rotation i grader samlet.

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

Gem de tre tilstande

Gem en scale, en forskydning og en rotation i en husket tilstand. Opdatér hver af dem ud fra bevægelsen, så elementet transformeres direkte.

var scale by remember { mutableStateOf(1f) }

Multiplicér zoomet

Værdien zoom er relativ, så multiplicér den ind i din skala i stedet for at erstatte den. Når du kniber ud, vokser indholdet; når du kniber ind, bliver det mindre.

scale *= zoom

Tilføj rotationen

Ændringen i rotation er angivet i grader pr. bevægelsestrin. Akkumulér den, så indholdet drejer jævnt, når du vrider to fingre.

angle += rotation

Panorering flytter det

pan-Offset angiver, hvor langt bevægelsens centrum har flyttet sig. Læg den til din forskydningstilstand for at skubbe indholdet under fingrene.

offset += pan

Anvend med graphicsLayer

Den rene måde at gengive transformationer på er graphicsLayer-modifieren. Indstil scaleX, scaleY, rotationZ og translation ét sted.

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

Translér inde i laget

Inde i graphicsLayer skal du indstille translationX og translationY ud fra din forskydning. Det transformerer uden at tvinge et dyrt layout-pas igennem.

translationX = offset.x; translationY = offset.y

Begræns skalaen

Brugere kniber måske voldsomt, så clamp din skala til fornuftige grænser med coerceIn. Det forhindrer, at indholdet forsvinder eller fylder hele verden.

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

Rækkefølgen af handlinger

graphicsLayer anvender scale, derefter rotation og til sidst translation. Når du kender rækkefølgen, kan du forudsige, hvor transformeret indhold ender.

Centreret omkring omdrejningspunktet

Som standard tager transformationer udgangspunkt i elementets centrum. Justér transformOrigin i graphicsLayer for at zoome og rotere omkring et andet punkt.

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

Hurtigt tjek

Hvordan skal du anvende den indkommende zoomværdi på din skalatilstand?

Besvar den i den interaktive lektion

Opsummering: Multi-touch-magi

Du brugte detectTransformGestures til panorering, zoom og rotation og anvendte dem derefter gennem graphicsLayer med begrænsning af værdierne. Knib for at zoome – det kan du nu. 🎉

Gratis at komme i gang

Lær Kotlin med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 30
Lektioner: 120

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Transform: Panorering, zoom og rotation” gratis?

Ja — hele teksten til “Transform: Panorering, zoom og rotation” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Jetpack Compose Academy-kurset, skal du opgradere til CoddyKit PRO. Jetpack Compose Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Transform: Panorering, zoom og rotation”?

Understøt knibe- og multitouch-bevægelser. Du øver dig i Jetpack Compose Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Jetpack Compose Academy?

Der kræves ingen tidligere erfaring. Jetpack Compose Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Transform: Panorering, zoom og rotation”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Jetpack Compose Academy-lektion?

Ja. Alle Jetpack Compose Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Jetpack Compose Academy