MotionLayout
uygulamanızdaki hareket ve widget animasyonunu yönetmenize yardımcı olan bir düzen türüdür.
MotionLayout
şunun bir alt sınıfıdır:
ConstraintLayout
ve sahip olduğu zengin
düzen özellikleri. ConstraintLayout
kitaplığının bir parçası olarak, MotionLayout
destek kitaplığı olarak kullanılabilir.
MotionLayout
, düzen geçişleri ile karmaşık hareket arasındaki boşluğu doldurur
web sayfası geliştirmelerini içerir. Özellik animasyonu ile
çerçeve,
TransitionManager
ve
CoordinatorLayout
.
MotionLayout
, düzenler arasındaki geçişleri açıklamanın yanı sıra aşağıdakileri yapmanıza da olanak tanır:
animasyon uygulayabilirsiniz. Dahası, yapısı gereği aranabilir
değiştirilebilir. Bu, geçişin herhangi bir noktasını anında gösterebileceğiniz anlamına gelir
bir koşula bağlı olarak değişebilir. MotionLayout
şu kaynakları da destekliyor:
animasyon kareleri ekleyin.
MotionLayout
tamamen beyana dayalıdır; yani tüm geçişleri şurada açıklayabilirsiniz:
XML, ne kadar karmaşık olursa olsun.
Tasarımla ilgili dikkat edilmesi gereken noktalar
MotionLayout
, tasarlanan kullanıcı arayüzü öğelerini taşımak, yeniden boyutlandırmak ve canlandırmak için kullanılır.
Kullanıcıların düğmeler ve başlık çubukları gibi etkileşim kurduğunu gösterir. Uygulamanızda hareketi şu şekilde kullanmayın:
nedensiz özel efekttir. Kullanıcıların, uygulamanızın ne olduğunu anlamalarına yardımcı olmak için kullanın
yapıyor. Uygulamanızı hareketli bir şekilde tasarlama hakkında daha fazla bilgi için
Materyal Tasarım bölümü Anlama
hareket değerleridir.
Başlayın
Projenizde MotionLayout
ürününü kullanmaya başlamak için aşağıdaki adımları uygulayın.
-
ConstraintLayout
bağımlılığını ekleyin:MotionLayout
eklemek için Uygulamanızın özelliklerineConstraintLayout
2.0 bağımlılığıbuild.gradle
dosya. AndroidX kullanıyorsanız bağımlılık:Eski
dependencies { implementation "androidx.constraintlayout:constraintlayout:2.2.0-alpha14" // To use constraintlayout in compose implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha14" }
Kotlin
dependencies { implementation("androidx.constraintlayout:constraintlayout:2.2.0-alpha14") // To use constraintlayout in compose implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha14") }
-
MotionLayout
dosyası oluşturun:MotionLayout
ConstraintLayout
öğesinin bir alt sınıfıdır. Dolayısıyla istediğiniz MevcutConstraintLayout
öğesini birMotionLayout
olarak aşağıda gösterildiği gibi, düzen kaynak dosyanızdaki sınıf adını şu örneklere bakabilirsiniz:AndroidX
<!-- before: ConstraintLayout --> <androidx.constraintlayout.widget.ConstraintLayout .../> <!-- after: MotionLayout --> <androidx.constraintlayout.motion.widget.MotionLayout .../>
Destek kitaplığı
<!-- before: ConstraintLayout --> <android.support.constraint.ConstraintLayout .../> <!-- after: MotionLayout --> <android.support.constraint.motion.MotionLayout .../>
MotionLayout
dosyasına ait tam bir örneği burada bulabilirsiniz. Şekil 1'de gösterilen düzeni tanımlar:AndroidX
<?xml version="1.0" encoding="utf-8"?> <!-- activity_main.xml --> <androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/scene_01" tools:showPaths="true"> <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:background="@color/colorAccent" android:text="Button" /> </androidx.constraintlayout.motion.widget.MotionLayout>
Destek kitaplığı
<?xml version="1.0" encoding="utf-8"?> <!-- activity_main.xml --> <android.support.constraint.motion.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/scene_01" tools:showPaths="true"> <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:background="@color/colorAccent" android:text="Button" /> </android.support.constraint.motion.MotionLayout>
-
MotionScene oluştur: Önceki
MotionLayout
içinde Örneğin,app:layoutDescription
özelliği bir hareketli sahneyi seçin. Hareket sahnesi, bir XML kaynak dosyasıdır. Bu<MotionScene>
bir hareket sahnesi, sahneye ait tüm hareket açıklamalarını içerir. kullanabilirsiniz. Düzen bilgilerini hareketten ayrı tutmak için açıklamalar, herMotionLayout
ayrı bir harekete referansta bulunuyor sahne. Hareket sahnesindeki tanımlar, benzer tüm tanımlaraMotionLayout
içindeki tanımlar.Burada, temel yatay görünümü açıklayan bir hareket sahnesi dosyası örneği hareket:
<?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:duration="1000"> <OnSwipe motion:touchAnchorId="@+id/button" motion:touchAnchorSide="right" motion:dragDirection="dragRight" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> </MotionScene>
Aşağıdakileri göz önünde bulundurun:
-
<Transition>
hareketin temel tanımını içerir.-
motion:constraintSetStart
vemotion:constraintSetEnd
, hareketin uç noktaları da bulunur. Bu uç noktalar Hareket sahnesinin sonraki bölümlerinde<ConstraintSet>
öğe var. -
motion:duration
, milisaniye sayısını belirtir gerekenden bahsedeceğiz.
-
-
<OnSwipe>
hareket için dokunma kontrolü oluşturmanızı sağlar.-
motion:touchAnchorId
, kullanıcının görüntüleyebileceği görünümü ifade eder sürükleyip bırakın. -
motion:touchAnchorSide
, sağ taraftan sürükleniyor. -
motion:dragDirection
, ilerleme aşamasını belirtir anlamına gelir. Örneğin,motion:dragDirection="dragRight"
, ilerleme durumu anlamına gelir görünüm sağa sürüklendikçe artar.
-
-
<ConstraintSet>
. hareketinizi tanımlayan çeşitli kısıtlamaları tanımladığınız yerdir. Bu örnekte, bir<ConstraintSet>
her bitiş noktasını görebilirsiniz. Bu uç noktalar dikey olarak ortalanırapp:layout_constraintTop_toTopOf="parent"
veapp:layout_constraintBottom_toBottomOf="parent"
. Yatay olarak uç noktalar, panelin en sol ve sağ taraflarındadır. tıklayın.
Bir hareketli sahnede bulunan çeşitli öğelere daha ayrıntılı daha fazla bilgi edinmek için MotionLayout örnekleri.
-
İnterpole edilen özellikler
Bir hareket sahnesi dosyası içinde ConstraintSet
öğeleri,
özellikleri kullanır. Konumlandırmaya ve
sınırlarından biri, aşağıdaki özellikler MotionLayout
tarafından ara değer olarak hesaplanır:
alpha
visibility
elevation
rotation
,rotationX
,rotationY
translationX
,translationY
,translationZ
scaleX
,scaleY
Özel özellikler
Bir <Constraint>
içinde <CustomAttribute>
öğesini kullanarak
yalnızca konumla veya View
ile ilgili olmayan özellikler için bir geçiş
özellikleri hakkında daha fazla bilgi edinin.
<Constraint android:id="@+id/button" ...> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#D81B60"/> </Constraint>
<CustomAttribute>
kendine ait iki özellik içerir:
motion:attributeName
gereklidir ve alıcı ve belirleyici yöntemlerdir. Alıcı ve belirleyici belirli bir kalıpla eşleşmelidir. Örneğin, örnek, görünüm temel alındığındanbackgroundColor
desteklenirgetBackgroundColor()
vesetBackgroundColor()
yöntemleri.- Sağlamanız gereken diğer özellik, değer türüne bağlıdır. Şunlar arasından seçim yapın:
aşağıdaki desteklenen türler:
- Renkler için
motion:customColorValue
- Tam sayılar için
motion:customIntegerValue
- Kayan reklamlar için
motion:customFloatValue
- Dizeler için
motion:customStringValue
- Boyutlar için
motion:customDimension
- Booleler için
motion:customBoolean
- Renkler için
Özel bir özellik belirtirken hem başlangıç hem de
son <ConstraintSet>
öğeleri.
Arka plan rengini değiştir
Önceki örneğe göre, görünümün renklerinin değişmesini istediğinizi varsayalım hareketinin bir parçası olarak gösterilebilir.
Aşağıdaki gibi her ConstraintSet
öğesine bir <CustomAttribute>
öğesi ekleyin
şu kod snippet'ini kullanabilirsiniz:
<ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent"> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#D81B60" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent"> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#9999FF" /> </Constraint> </ConstraintSet>
Ek MotionLayout özellikleri
MotionLayout
, önceki örnekte yer alan özelliklere ek olarak başka
özellikle birlikte belirtmek isteyebilirsiniz:
app:applyMotionScene="boolean"
, hareket sahnesinin uygulanıp uygulanmayacağını belirtir.true
, bu özellik için varsayılan değerdir.app:showPaths="boolean"
, hareket yollarının hareket ediyor olabilir.false
, bu özellik için varsayılan değerdir.app:progress="float"
, geçişin ilerleme durumunu açıkça belirtmenizi sağlar. Siz0
(geçişin başlangıcı) ile1
aralığındaki herhangi bir kayan nokta değerini kullanabilir (geçişin sonu).app:currentState="reference"
, belirli birConstraintSet
belirtmenizi sağlar.app:motionDebug
, hareket ettirir. Olası değerler:"SHOW_PROGRESS"
,"SHOW_PATH"
veya"SHOW_ALL"
.
Ek kaynaklar
MotionLayout
hakkında daha fazla bilgi için aşağıdaki kaynaklara göz atın:
- Kotlin 03.2'de Gelişmiş Android: MotionLayout ile Animasyon
- MotionLayout örnekleri
- GitHub'da MotionLayout/ConstraintLayout Örnekleri
- MotionLayout'a Giriş (I. bölüm)
- MotionLayout'a Giriş (2. bölüm)
- MotionLayout'a Giriş (bölüm III)
- MotionLayout'a Giriş (bölüm IV)