目录
Android之MotionLayout(一),MotionLayout的基本使用
Android之MotionLayout(二),MotionScene的标签属性说明
Android之MotionLayout(三),用 MotionLayout 来做过渡动画,如何使用ConstraintSet
Android之MotionLayout(四),用 MotionLayout实现向上拉的折叠效果
Android之MotionLayout(五),如何使用 MotionLayout的自定义属性
Android之MotionLayout(六),如果使用Keyframes实现实现YouTube切换效果
MotionLayout 控件只会检测标准属性和ConstraintLayout 属性这类布局相关的属性变动，对于其他的属性变动，如 View 的背景颜色变动是无法检测出来的，因此就需要使用自定义属性
在 <Constraint>元素中使用 <CustomAttribute> 子元素来指定自定义属性。
我们先看下效果:
custom-attribute.gif
第一步我们还是要创建一下布局activity_custom_attr.xml
<?xml version="1.0" encoding="utf-8"?>
<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_custom"
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>
第二步创建scene_custom.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: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">
<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>
</MotionScene>
这样就完成了
<CustomAttribute> 元素属性说明：
app:attributeName 属性用来指定自定义属性的名字（例如 "backgroundColor"）。
注意:关联的 View 必须要有一对与这个名字相关的getter/setter方法（例如 getBackgroundColor()/setBackgroundColor(int color)）
剩下的其他属性都是用来设置自定义属性的值的。需要根据自定义属性的值类型使用以下 XML 属性之一来设置自定义属性的值：
-
app:customColorValue：设置属性的值（颜色类型）。 -
app:customColorDrawableValue：设置属性的值（颜色类型）。 -
app:customIntegerValue：设置属性的值（整数类型）。 -
app:customFloatValue：设置属性的值（浮点类型）。 -
app:customStringValue：设置属性的值（字符串类型）。 -
app:customDimension：设置属性的值（尺寸类型）。 -
app:customPixelDimension：设置属性的值（尺寸类型）。 -
app:customBoolean：设置属性的值（布尔类型）
结语
MotionLayout系列到这一章算是结束了,如果大家想更近一步的学习MotionLayout,这里给大家推荐三篇文章
- 《「译」MotionLayout 介绍 (part II)》
- 《「译」MotionLayout介绍 (part III)》
- 《「译」 MotionLayout 介绍 (Part IV) 深入理解关键帧》
