Bu dokümanda, MotionLayout
'in nasıl kullanılacağına dair örnekler bulunmaktadır.
Her örnekte, hareketi gösteren bir video ile birlikte hareket sahnesi ve düzenleri için ilgili kod yer alır.
Temel hareket
Bu örnekte, dokunup sürükleyerek yatay olarak taşıyabileceğiniz tek bir görünüm bulunmaktadır.
- Düzen XML'ini görüntüleyin.
MotionScene
XML dosyasını görüntüleyin.
Ö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'ini görüntüleyin.
MotionScene
XML dosyasını görüntüleyin.
ImageFilterView - resim geçişi
Bu örnekte, bir ImageFilterView
doygunluk değerinin nasıl geçirileceği gösterilmektedir.
- Düzen XML'ini görüntüleyin.
MotionScene
XML dosyasını görüntüleyin.
Animasyon karesi konumu
Bu örnekte, hareket sırasında görünümün Y konumunu değiştirmek için <KeyFrameSet>
kullanılmaktadır.
- Düzen XML'ini görüntüleyin.
MotionScene
XML dosyasını görüntüleyin.
Animasyon karesi interpolasyonu
Bu örnekte Animasyon karesi konumu örneğine dayanmaktadır ve görünüm geçişine döndürme ve ölçeklendirme eklenmiştir.
- Düzen XML'ini görüntüleyin.
MotionScene
XML dosyasını görüntüleyin.
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.
CoordinatorLayout (1/2)
Bu örnekte, uygulama çubuğuna hareket eklemek için mevcut bir AppBarLayout
öğesine MotionLayout
işareti eklenir. Bu örnek, MotionLayout'a Giriş (bölüm III) bölümünde daha ayrıntılı şekilde açıklanmıştır.
- Düzen XML'ini görüntüleyin.
MotionScene
XML dosyasını görüntüleyin.
CoordinatorLayout (2/2)
Bu örnekte, uygulama çubuğuna hareket eklemek için mevcut bir AppBarLayout
öğesine MotionLayout
işareti eklenir.
- Düzen XML'ini görüntüleyin.
MotionScene
XML dosyasını görüntüleyin.
Çekmece Düzeni (1/2)
Bu örnekte, DrawerLayout
için nasıl hareket ekleneceği gösterilmektedir. Bu örnek, MotionLayout'a Giriş (bölüm III) bölümünde 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.
Çekmece Düzeni (2/2)
Bu örnekte, DrawerLayout
için nasıl hareket ekleneceği gösterilmektedir.
- Düzen XML'ini görüntüleyin.
- Ana içerik için
MotionScene
XML'yi görüntüleyin. MotionScene
Menü XML'sini görüntüleyin.
Yan panel
Bu örnekte, ana içerik alanını sağa sürüklerken yan panelin nasıl görüntüleneceği gösterilmektedir.
- Düzen XML'ini görüntüleyin.
MotionScene
XML dosyasını görüntüleyin.
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.
Sayfa Çağrısı
Bu örnekte, ViewPager
sekmeleri arasında kaydırma yaparken nasıl hareket ekleyebileceğiniz gösterilmektedir.
Bu örnek, MotionLayout'a Giriş (bölüm III) bölümünde daha ayrıntılı şekilde açıklanmıştır.
- Düzen XML'ini görüntüleyin.
MotionScene
XML dosyasını görüntüleyin.
ViewPager - Piyango
Bu örnekte, ViewPager
sekmeleri arasında kaydırma yaparken nasıl hareket ekleyebileceğiniz gösterilmektedir.
- Düzen XML'ini görüntüleyin.
MotionScene
XML dosyasını görüntüleyin.
Karmaşık hareket (1/3)
Bu örnekte, karmaşık hareketi göstermek için önceki örneklerdeki öğeler birleştirilmektedir.
- Düzen XML'ini görüntüleyin.
MotionScene
XML dosyasını görüntüleyin.
Karmaşık hareket (2/3)
Bu örnekte, karmaşık hareketi göstermek için önceki örneklerdeki öğeler birleştirilmektedir.
- Düzen XML'ini görüntüleyin.
MotionScene
XML dosyasını görüntüleyin.
Karmaşık hareket (3/3)
Bu örnekte, karmaşık hareketi göstermek için önceki örneklerdeki öğeler birleştirilmektedir.
- Düzen XML'ini görüntüleyin.
MotionScene
XML dosyasını görüntüleyin.
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.
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.
YouTube benzeri hareket
Bu örnekte, kompakt görünüm ile ek içeriğe sahip tam ekran deneyimi arasında geçiş gösterilmektedir.
- Düzen XML'ini görüntüleyin.
MotionScene
XML dosyasını görüntüleyin.
Tuş Tetikleyici
Bu örnekte, geçiş ilerleme eşiğini aştığında kayan 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.
Birden fazla eyalet
Bu örnekte, hangi hareketin uygulanacağını belirlemek için durumun nasıl kullanılacağı gösterilmektedir.
- Düzen XML'ini görüntüleyin.
MotionScene
XML dosyasını görüntüleyin.