0Pricing
Jetpack Compose Academy · Ders

Dönüştürme: Kaydırma, Yakınlaştırma ve Döndürme

Çimdikleme ve çoklu dokunma hareketlerini destekleyin.

Dönüştürme: Kaydırma, Yakınlaştırma ve Döndürme, CoddyKit'te ücretsiz bir Jetpack Compose Academy dersidir. Bu, 4 dersinin 3. 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.

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

Sıkça Sorulan Sorular

“Dönüştürme: Kaydırma, Yakınlaştırma ve Döndürme” dersi ücretsiz mi?

Evet — “Dönüştürme: Kaydırma, Yakınlaştırma ve Döndürme” 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.

“Dönüştürme: Kaydırma, Yakınlaştırma ve Döndürme” dersinde ne öğreneceğim?

Çimdikleme ve çoklu dokunma hareketlerini destekleyin. 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 3. dersidir.

“Dönüştürme: Kaydırma, Yakınlaştırma ve Döndürme” 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

  1. pointerInput ve detectTapGestures
  2. Sürükleme, Kaydırma ve Fırlatma
  3. Dönüştürme: Kaydırma, Yakınlaştırma ve Döndürme
  4. İç İçe Kaydırma Bağlantıları
← Jetpack Compose Academy Sayfasına Dön