MotionLayout ile hareketleri ve widget animasyonunu yönetme

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.

Şekil 1. Dokunma kontrollü temel hareket.

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.

  1. ConstraintLayout bağımlılığını ekleyin: MotionLayout eklemek için Uygulamanızın özelliklerine ConstraintLayout 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-beta01"
    // To use constraintlayout in compose
    implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-beta01"
}

    Kotlin

    dependencies {
    implementation("androidx.constraintlayout:constraintlayout:2.2.0-beta01")
    // To use constraintlayout in compose
    implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-beta01")
}

  2. MotionLayout dosyası oluşturun: MotionLayout ConstraintLayout öğesinin bir alt sınıfıdır. Dolayısıyla istediğiniz Mevcut ConstraintLayout öğesini bir MotionLayout 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>

  3. 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, her MotionLayout ayrı bir harekete referansta bulunuyor sahne. Hareket sahnesindeki tanımlar, benzer tüm tanımlara MotionLayout 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 ve motion: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ır app:layout_constraintTop_toTopOf="parent" ve app: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ığından backgroundColor desteklenir getBackgroundColor() ve setBackgroundColor() 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

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

Şekil 2. Görünüm hareket ettikçe arka plan rengini değiştirir.

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. Siz 0 (geçişin başlangıcı) ile 1 aralığındaki herhangi bir kayan nokta değerini kullanabilir (geçişin sonu).
  • app:currentState="reference", belirli bir ConstraintSet 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: