首页 > 解决方案 > 使用 MotionLayout 和 MotionScene 更改 FAB 背景颜色

问题描述

我有一个 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 删除工厂中的图标?

标签: androidandroid-motionlayout

解决方案


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

约束不采用任何这些标签。它只需要一组有限的标签您必须设置具有自定义属性的标签。如果您希望 MotionLayout 插入自定义属性,则必须在开始和结束 ConstraintSet 上设置它们。


推荐阅读