Android之MotionLayout(五),如何使用 Mot

目录

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) 深入理解关键帧》

(每天学习一点点.每天进步一点点,分享不宜路过点个赞呀,喜欢的点个关注后续更新不断)