MotionLayout örnekleri

Oluşturma yöntemini deneyin

Android için önerilen kullanıcı arayüzü araç seti Jetpack Compose'dur. Oluşturma'da animasyonları nasıl kullanacağınızı öğrenin.

Oluşturma'daki animasyonlar →

Bu dokümanda, MotionLayout özelliğinin nasıl kullanılacağına dair örnekler verilmiştir. Her örnekte, hareket sahnesi ve düzenler için ilgili kodun yanı sıra hareketi gösteren bir video yer alır.

Temel hareket

Bu örnekte, yatay olarak hareket etmek için dokunup sürükleyebileceğiniz tek bir görünüm bulunur.

• Düzen XML'sini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 1. Bir görünümü sürükleme.

Özel özellik: backgroundColor

Bu örnek, Temel hareket örneğine benzer. Temel harekete ek olarak, görünüm hareket ettikçe görünümün arka plan rengi de değişir.

• Düzen XML'sini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 2. Arka plan rengi değişirken bir görünümü sürükleme

ImageFilterView - resim geçişi

Bu örnekte, bir ImageFilterView öğesinin doygunluk değerinin nasıl geçiş yapılacağı gösterilmektedir.

• Düzen XML'sini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 3. Doygunluğu değişirken bir resmi sürüklemek.

Animasyon karesi konumu

Bu örnekte, hareket sırasında görünümün Y konumunu değiştirmek için <KeyFrameSet> kullanılır.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 4. Bir görünümü sürükleyerek Y konumunu değiştirme

Animasyon karesi interpolasyonu

Bu örnek, Animasyon karesi konumu örneğini temel alır ve görüntü geçişine döndürme ve ölçeklendirme ekler.

• Düzen XML'sini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 5. Bir görünümü sürükleyerek Y konumunu, döndürmeyi ve ölçeği değiştirme

Animasyon karesi döngüsü

Bu örnekte, görünüme dalga benzeri hareket eklemek için <KeyCycle> öğeleri eklenmiştir.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 6. Bir görünümü dalga benzeri bir hareketle sürükleyerek rengini değiştirme

CoordinatorLayout (1/2)

Bu örnekte, uygulama çubuğuna hareket eklemek için mevcut bir AppBarLayout öğesine MotionLayout eklenmektedir. Bu örnek, MotionLayout'a giriş (III. bölüm) başlıklı makalede daha ayrıntılı olarak açıklanmıştır.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 7. Uygulama çubuğu genişlerken içeriği kaydırabilirsiniz.

CoordinatorLayout (2/2)

Bu örnekte, uygulama çubuğuna hareket eklemek için mevcut bir AppBarLayout öğesine MotionLayout eklenmektedir.

• Düzen XML'sini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 8. Uygulama çubuğu genişlerken ve metin uygulama çubuğunda animasyonlu olarak görünüp kaybolurken içerik kaydırma

DrawerLayout (1/2)

Bu örnekte, bir DrawerLayout'e nasıl hareket ekleneceği gösterilmektedir. Bu örnek, MotionLayout'a giriş (III. bölüm) başlıklı makalede daha ayrıntılı olarak açıklanmıştır.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 9. "DrawerLayout" genişletiliyor.

DrawerLayout (2/2)

Bu örnekte, bir DrawerLayout'e nasıl hareket ekleneceği gösterilmektedir.

• Düzen XML'ini görüntüleyin.
• Ana içeriğin MotionScene XML'ini görüntüleyin.
• Menünün MotionScene XML'ini görüntüleyin.

Şekil 10. Animasyonlu menü metniyle "DrawerLayout"ı genişletme.

Yan panel

Bu örnekte, ana içerik alanı sağa sürüklenirken yan panelin nasıl gösterileceği gösterilmektedir.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 11. Ana içeriği sürükleyerek yan panel gösterme

Paralaks

Bu örnekte, farklı arka plan katmanlarının farklı hızlarda hareket ettiği bir paralaks arka plan gösterilmektedir.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 12. Başlık resminde paralaks efekti.

ViewPager

Bu örnekte, ViewPager sekmeleri arasında gezinirken nasıl hareket ekleyebileceğiniz gösterilmektedir. Bu örnek, MotionLayout'a giriş (III. bölüm) başlıklı makalede daha ayrıntılı olarak açıklanmıştır.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 13. "ViewPager" kaydırırken başlık resminde paralaks efekti.

ViewPager - Lottie

Bu örnekte, ViewPager sekmeleri arasında gezinirken nasıl hareket ekleyebileceğiniz gösterilmektedir.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 14. Bir "ViewPager"'da kaydırma yapılırken başlık resminde Lottie efekti gösteren bir resim.

Karmaşık hareket (1/3)

Bu örnekte, karmaşık hareketi göstermek için önceki örneklerdeki öğeler birleştirilmiştir.

• Düzen XML'sini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 15. Karmaşık hareketler oluşturmak için efektleri birleştirme

Karmaşık hareket (2/3)

Bu örnekte, karmaşık hareketi göstermek için önceki örneklerdeki öğeler birleştirilmiştir.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 16. Karmaşık hareketler oluşturmak için efektleri birleştirme

Karmaşık hareket (3/3)

Bu örnekte, karmaşık hareketi göstermek için önceki örneklerdeki öğeler birleştirilmiştir.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 17. Karmaşık hareketler oluşturmak için efektleri birleştirme

Parça geçişi (1/2)

Bu örnekte, parçalar arasında geçiş yapmak için MotionLayout'ü nasıl kullanabileceğiniz gösterilmektedir.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 18. Parça geçişi.

Parça geçişi (2/2)

Bu örnekte, parçalar arasında geçiş yapmak için MotionLayout'ü nasıl kullanabileceğiniz gösterilmektedir.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 19. Parça geçişi.

YouTube'a benzer hareketler

Bu örnekte, kompakt görünüm ile ek içerik içeren tam ekran deneyim arasında geçiş gösterilmektedir.

• Düzen XML'sini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 20. YouTube'a benzer şekilde parça geçişi.

KeyTrigger

Bu örnekte, geçiş bir ilerleme eşiğini aştığında yüzen işlem düğmesinin nasıl gösterileceği ve gizleneceği gösterilmektedir.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 21. Kayan işlem düğmesini gösterin ve gizleyin.

Birden fazla eyalet

Bu örnekte, hangi hareketin uygulanacağını belirlemek için durumun nasıl kullanılacağı gösterilmektedir.

• Düzen XML'sini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 22. Eyalete göre farklı hareketler.