At first glance, I can see several methods used by motionlayout

author ：newki
Reprinted address ：https://juejin.cn/post/7110027299214999589

MotionLayout Several ways to achieve the effect

MotionLayout Everyone should know how to use , If not here .

This article is not about how to use , What attribute means , How to use it , This is just a discussion MotionLayout Several ways to achieve the effect .

One 、ConstraintLayout Method definition of

We know MotionLayout yes ConstraintLayout Functions in the library , We can use it directly ConstraintLayout To define two different sets of ConstraintLayout Layout , Use ConstraintSet To switch between different layouts .

Original layout ：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/constraint_parent" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorPrimary" app:layout_constraintVertical_bias="0.3">

    <TextView android:id="@+id/view_2" android:layout_width="200dp" android:layout_height="wrap_content" android:background="@android:color/white" android:padding="16dp" app:layout_constraintBottom_toBottomOf="@id/view_1" app:layout_constraintEnd_toEndOf="@id/view_1" app:layout_constraintStart_toStartOf="@id/view_1" />

    <androidx.appcompat.widget.AppCompatImageView android:id="@+id/view_1" android:layout_width="200dp" android:layout_height="170dp" android:background="@color/colorAccent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.AppCompatImageView android:id="@+id/icon" android:layout_width="32dp" android:layout_height="32dp" android:layout_margin="16dp" android:src="@mipmap/ic_launcher_round" app:layout_constraintBottom_toBottomOf="@id/view_1" app:layout_constraintEnd_toEndOf="@id/view_1" app:layout_constraintTop_toTopOf="@id/view_1" />

    <View android:id="@+id/bottom" android:layout_width="match_parent" android:layout_height="50dp" android:background="@color/colorAccent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Changed layout ：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:background="@color/colorPrimary" app:layout_constraintVertical_bias="0.3" android:layout_height="match_parent">

    <TextView android:id="@+id/view_2" app:layout_constraintStart_toStartOf="@id/view_1" app:layout_constraintEnd_toEndOf="@id/view_1" android:layout_width="200dp" android:background="@android:color/white" android:padding="16dp" app:layout_constraintTop_toBottomOf="@id/view_1" android:layout_height="wrap_content" />

    <androidx.appcompat.widget.AppCompatImageView android:layout_width="200dp" android:layout_height="150dp" android:id="@+id/view_1" android:background="@color/colorAccent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toTopOf="parent"/>

    <androidx.appcompat.widget.AppCompatImageView android:layout_width="32dp" android:src="@mipmap/ic_launcher_round" android:id="@+id/icon" app:layout_constraintEnd_toEndOf="@id/view_1" app:layout_constraintTop_toBottomOf="@id/view_1" app:layout_constraintBottom_toBottomOf="@id/view_1" android:layout_margin="16dp" android:layout_height="32dp"/>

    <View android:layout_width="match_parent" android:layout_height="50dp" android:id="@+id/bottom" app:layout_constraintTop_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" android:background="@color/colorAccent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

When you use it ：

      val raw = ConstraintSet().apply {
            this.clone([email protected], R.layout.activity_demo13_java)
        }

        val detail = ConstraintSet().apply {
            this.clone([email protected], R.layout.activity_demo13_java_transform)
        }

        val constraintLayout = findViewById<ConstraintLayout>(R.id.constraint_parent)

        constraintLayout.click {
            val constraintSet = if (toggle) detail else raw
            TransitionManager.beginDelayedTransition(constraintLayout)
            constraintSet.applyTo(constraintLayout)

            toggle = !toggle
        }

effect ：

The thing to notice here is this View The number and Id It takes a year a pair Should be Oh ！

Two 、MotionLayout Xml Method definition of

That is, the default definition , The most common way , stay Previous post There are some complex ways to define .

Here is a simple Demo Tell me how to use ：

<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:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white" app:layoutDescription="@xml/activity_demo13_xml_scene" app:showPaths="true">

   <View android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@color/colorAccent" />

</androidx.constraintlayout.motion.widget.MotionLayout>

Defined scenarios xml:

<?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">

   <!--  Only some Constraint Some special properties of the layout   For position transformation  -->
   <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">

           <!--  You can set custom properties  -->
           <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#D81B60" />

       </Constraint>

   </ConstraintSet>

   <ConstraintSet android:id="@+id/end">
       <Constraint android:id="@+id/button" android:layout_width="34dp" android:layout_height="34dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent">

           <!--  You can set custom properties  -->
           <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#9999FF" />

       </Constraint>
   </ConstraintSet>

   <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start" motion:duration="1000" motion:motionInterpolator="linear">

       <!--  Click on  -->
       <OnClick motion:clickAction="toggle" motion:targetId="@+id/button" />

       <KeyFrameSet>

           <KeyAttribute android:rotation="-45" android:scaleX="2" android:scaleY="2" motion:framePosition="40" motion:motionTarget="@+id/button" />

           <KeyPosition motion:framePosition="70" motion:keyPositionType="parentRelative" motion:motionTarget="@+id/button" motion:percentY="0.25" />

       </KeyFrameSet>

   </Transition>

</MotionScene>

effect ：

The settings inside the scene involve the configuration of key frame positions and key frame attributes , There are detailed comments in the code , Just pay attention ！

3、 ... and 、MotionLayout coordination AppbarLayout

Encapsulate one's own MotionLayout, When AppbarLayout Monitor its completion during scrolling , Set up MotionLayout Of Progress.

Customize MotionLayout：

class MyAppbarMotionLayout @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : MotionLayout(context, attrs, defStyleAttr), AppBarLayout.OnOffsetChangedListener {

    override fun onOffsetChanged(appBarLayout: AppBarLayout?, verticalOffset: Int) {
        val progressVal = -verticalOffset / appBarLayout?.totalScrollRange?.toFloat()!!
        YYLogUtils.w("progress:$progressVal")
        progress = progressVal

    }

    override fun onAttachedToWindow() {
        super.onAttachedToWindow()
        (parent as? AppBarLayout)?.addOnOffsetChangedListener(this)
    }
}

Use ：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white" android:orientation="vertical">

    <com.guadou.lib_baselib.view.titlebar.EasyTitleBar android:layout_width="match_parent" android:layout_height="wrap_content" app:Easy_title=" synergy AppbarLayout" />

    <androidx.coordinatorlayout.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="wrap_content">

        <com.google.android.material.appbar.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/white" android:orientation="vertical" app:elevation="0dp">

            <com.guadou.kt_demo.demo.demo13_motionlayout.view.MyAppbarMotionLayout android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="200dp" android:minHeight="50dp" app:layoutDescription="@xml/scene_13_appbar" app:layout_scrollFlags="scroll|enterAlways|snap|exitUntilCollapsed">

                <ImageView android:id="@+id/background" android:layout_width="match_parent" android:layout_height="200dp" android:scaleType="centerCrop" android:src="@drawable/chengxiao" />

                <TextView android:id="@+id/label" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Cheng Xiao" android:textColor="#FFFFFF" android:textSize="25dp" android:transformPivotX="0dp" android:transformPivotY="0dp" />

            </com.guadou.kt_demo.demo.demo13_motionlayout.view.MyAppbarMotionLayout>

        </com.google.android.material.appbar.AppBarLayout>

        <androidx.core.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/scroll_content" />

        </androidx.core.widget.NestedScrollView>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</LinearLayout>

Defined scenarios ：

<?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:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start" />

    <ConstraintSet android:id="@+id/start">
        <Constraint android:id="@+id/background" android:layout_width="match_parent" android:layout_height="200dp" android:alpha="1.0" motion:layout_constraintBottom_toBottomOf="parent" />

        <Constraint android:id="@+id/label" android:layout_width="wrap_content" android:layout_height="wrap_content" android:rotation="-90.0" motion:layout_constraintBottom_toBottomOf="@+id/background" motion:layout_constraintLeft_toLeftOf="@id/background">

            <CustomAttribute motion:attributeName="textSize" motion:customFloatValue="25" />

            <CustomAttribute motion:attributeName="textColor" motion:customColorValue="@color/white" />

        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">

        <Constraint android:id="@+id/background" android:layout_width="match_parent" android:layout_height="50dp" android:alpha="0.7" motion:layout_constraintBottom_toBottomOf="parent" />

        <Constraint android:id="@+id/label" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="8dp" android:layout_marginBottom="8dp" android:rotation="0.0" motion:layout_constraintBottom_toBottomOf="@+id/background" motion:layout_constraintLeft_toLeftOf="@id/background" motion:layout_constraintRight_toRightOf="@id/background" motion:layout_constraintTop_toTopOf="@id/background">

            <CustomAttribute motion:attributeName="textSize" motion:customFloatValue="18" />

            <CustomAttribute motion:attributeName="textColor" motion:customColorValue="@color/black" />

        </Constraint>

    </ConstraintSet>
</MotionScene>

In this way... Can be achieved MotionLayout Follow AppbarLayout The scrolling of does the corresponding scrolling .

effect ：

Four 、MotionLayout coordination ViewPager

This effect is similar to AppbarLayout The situation is similar , When ViewPager When scrolling the page , At the top of the MotionLayout Do the corresponding animation .

Customize MotionLayout:

class MyViewpagerMotionLayout @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : MotionLayout(context, attrs, defStyleAttr), ViewPager.OnPageChangeListener {

    override fun onPageScrollStateChanged(state: Int) {
    }

    override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
        val numPages = 3
        progress = (position + positionOffset) / (numPages - 1)
    }

    override fun onPageSelected(position: Int) {
    }

    override fun onAttachedToWindow() {
        super.onAttachedToWindow()

        val viewGroup = (parent as? ViewGroup)!!
        for (i in 0 until viewGroup.childCount) {
            val view = viewGroup.getChildAt(i)
            if (view is ViewPager) {
                view.addOnPageChangeListener(this)
                break
            }
        }

    }
}

The use of xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white" android:orientation="vertical">

    <com.guadou.lib_baselib.view.titlebar.EasyTitleBar android:layout_width="match_parent" android:layout_height="wrap_content" app:Easy_title=" synergy AppbarLayout" />

    <com.guadou.kt_demo.demo.demo13_motionlayout.view.MyViewpagerMotionLayout android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="200dp" app:layoutDescription="@xml/scene_13_viewpager">

        <ImageView android:id="@+id/background" android:layout_width="match_parent" android:layout_height="200dp" android:scaleType="centerCrop" android:src="@drawable/chengxiao" />

        <TextView android:id="@+id/label" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Cheng Xiao" android:textColor="#FFFFFF" android:textSize="25dp" />

    </com.guadou.kt_demo.demo.demo13_motionlayout.view.MyViewpagerMotionLayout>

    <androidx.viewpager.widget.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent">

    </androidx.viewpager.widget.ViewPager>

</LinearLayout>

Of the scene xml:

<?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:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start" />

    <KeyFrameSet>

        <KeyAttribute motion:framePosition="50" motion:motionTarget="@id/label" >

            <CustomAttribute motion:attributeName="textSize" motion:customFloatValue="15" />

            <CustomAttribute motion:attributeName="textColor" motion:customColorValue="@android:color/holo_blue_light" />

        </KeyAttribute>

        <KeyPosition motion:framePosition="50" motion:keyPositionType="parentRelative" motion:motionTarget="@id/label" motion:percentY="0.15" />

    </KeyFrameSet>

    <ConstraintSet android:id="@+id/start">
        <Constraint android:id="@+id/background" android:layout_width="match_parent" android:layout_height="200dp" android:alpha="1.0" motion:layout_constraintBottom_toBottomOf="parent" />

        <Constraint android:id="@+id/label" android:layout_width="wrap_content" android:layout_height="wrap_content" motion:layout_constraintBottom_toBottomOf="@+id/background" motion:layout_constraintLeft_toLeftOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="@id/background">

            <CustomAttribute motion:attributeName="textSize" motion:customFloatValue="25" />

            <CustomAttribute motion:attributeName="textColor" motion:customColorValue="@color/white" />

        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">

        <Constraint android:id="@+id/background" android:layout_width="match_parent" android:layout_height="200dp" android:alpha="1.0" motion:layout_constraintBottom_toBottomOf="parent" />

        <Constraint android:id="@+id/label" android:layout_width="wrap_content" android:layout_height="wrap_content" motion:layout_constraintBottom_toBottomOf="@+id/background" motion:layout_constraintRight_toRightOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="@id/background">

            <CustomAttribute motion:attributeName="textSize" motion:customFloatValue="25" />

            <CustomAttribute motion:attributeName="textColor" motion:customColorValue="@android:color/holo_red_dark" />

        </Constraint>

    </ConstraintSet>
</MotionScene>

When ViewPager When rolling , Set up MotionLayout Of progress .

effect ：

The settings within the scene of this effect involve the configuration of key frame positions and key frame attributes , A custom attribute is defined in the keyframe attribute , Pay attention to ！

summary

MotionLayout Sure There are many controls that work together , Here is just a list of some commonly used controls , It can also cooperate DrawerLayout TabLayout etc. . The essence is to listen to events , change MotionLayout Of Progress value .

Combine these common ways , We can complete most of the page animation effects ！