使用MotionLayout和MotionScene更改FAB背景颜色

Question

我有一个FloatingActionButton，我想用MotionLayout和MotionScene将其过渡到另一种颜色。

这是我的布局文件中的FAB：

<androidx.constraintlayout.motion.widget.MotionLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/motion_layout"
        app:layoutDescription="@xml/map_activity_scene"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="75dp"
            android:layout_marginEnd="32dp"
            android:id="@+id/fab"
            android:visibility="invisible"
            app:backgroundTint="@color/lightPurple"
            app:srcCompat="@drawable/ic_layers_24px"
            app:tint="@color/white"
            app:layout_constraintBottom_toBottomOf="@+id/map"
            app:layout_constraintEnd_toEndOf="parent"/>

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

以下是我的 MotionScene

<MotionScene xmlns:app="http://schemas.android.com/apk/res-auto"
             xmlns:android="http://schemas.android.com/apk/res/android">
    <Transition
            app:constraintSetStart="@+id/start"
            app:constraintSetEnd="@+id/end"
            app:duration="400">

    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="75dp"
                    android:layout_marginEnd="32dp"
                    android:id="@+id/fab"
                    android:visibility="visible"
                    app:backgroundTint="@color/lightPurple"
                    app:srcCompat="@drawable/ic_layers_24px"
                    app:tint="@color/white"
                    app:layout_constraintBottom_toBottomOf="@+id/map"
                    app:layout_constraintEnd_toEndOf="parent">

            <CustomAttribute
                app:attributeName="backgroundTint"
                app:customColorValue="@color/lightPurple" />
        </Constraint>

    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
                android:id="@+id/fab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:visibility="visible"
                app:backgroundTint="@color/map_fab_transform"
                app:layout_constraintEnd_toEndOf="@+id/revealLayout"
                app:layout_constraintStart_toStartOf="@+id/revealLayout"
                app:layout_constraintBottom_toBottomOf="@+id/revealLayout"
                app:layout_constraintTop_toTopOf="@+id/revealLayout">

            <CustomAttribute
                app:attributeName="backgroundTint"
                app:customColorValue="@color/map_fab_transform" />
        </Constraint>
    </ConstraintSet>
</MotionScene>

当我运行场景时，浮动操作按钮移动到正确的位置，但颜色不会改变，图标也不会从中移除。似乎任何app属性都未被应用。

如何使用MotionLayout更改浮动操作按钮的颜色并去除其中的图标？

- tyczj

---

我检查了你的代码并尝试了很多次，但在检查FloatingActionButton内部类后，我发现没有backgroundTint的setter和getter，因此我们无法在motionlayout中更改它。此外，您可以在motion layout中更改图标颜色"colorFilter"。 - Shweta Chauhan

我尝试了colorFilter，但只改变了图标的颜色。我想我会走另一条路，谢谢！ - tyczj

Answer 1

 app:backgroundTint="@color/lightPurple"
 app:srcCompat="@drawable/ic_layers_24px"
 app:tint="@color/white"

约束不接受这些标签。它只接受有限的一组标签。您需要使用自定义属性设置它们。如果您希望MotionLayout插值自定义属性，则必须在开始和结束约束集上设置它们。

- hoford

---

设置开始和结束的颜色并没有改变颜色，您可以看到我在示例中已经设置了颜色。在MotionScene中，色调颜色不起作用。 - tyczj