MotionLayout 左右滑动动画问题

Posted 2023-04-18

【中文标题】MotionLayout 左右滑动动画问题

【英文标题】：MotionLayout Swipe left and right animation problem

【发布时间】：2020-07-09 03:46:43

【问题描述】：

我正在创建一个用户可以向左或向右滑动的动作布局，当我添加 layoutDescription layout-width 不再工作时。我希望能够在滑动时调整布局的android:layout_width。这是 MotionScene 和 MotionLayout 的 XML

   <androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
                    android:layout_
                    android:layout_
                    app:layoutDescription="@xml/table_view_odd_list_shuffle"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="@id/guideline5"
                    app:layout_constraintTop_toBottomOf="@id/constraint_layout_spinners">

                    <RelativeLayout
                        android:id="@+id/relative_layout_odds_column"
                        android:layout_
                        android:layout_
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent">

                        <androidx.constraintlayout.widget.ConstraintLayout
                            android:id="@+id/constraint_layout_odds"
                            android:layout_
                            android:layout_>

                            <androidx.recyclerview.widget.RecyclerView
                                android:id="@+id/table_view_recycle_view_odds_1"
                                android:layout_
                                android:layout_
                                android:nestedScrollingEnabled="false"
                                android:orientation="horizontal"
                                app:layout_constraintBottom_toBottomOf="parent"
                                app:layout_constraintEnd_toStartOf="@id/table_view_recycle_view_odds_2"
                                app:layout_constraintStart_toStartOf="parent"
                                app:layout_constraintTop_toTopOf="parent" />

                            <androidx.recyclerview.widget.RecyclerView
                                android:id="@+id/table_view_recycle_view_odds_2"
                                android:layout_
                                android:layout_
                                android:nestedScrollingEnabled="false"
                                android:orientation="horizontal"
                                app:layout_constraintBottom_toBottomOf="parent"
                                app:layout_constraintEnd_toEndOf="parent"
                                app:layout_constraintStart_toEndOf="@id/table_view_recycle_view_odds_1"
                                app:layout_constraintTop_toTopOf="parent" />

                            <androidx.constraintlayout.widget.Guideline
                                android:id="@+id/guideline6"
                                android:layout_
                                android:layout_
                                android:orientation="vertical"
                                app:layout_constraintGuide_percent="0.5"
                                app:layout_constraintTop_toBottomOf="parent" />
                        </androidx.constraintlayout.widget.ConstraintLayout>
                    </RelativeLayout>
                </androidx.constraintlayout.motion.widget.MotionLayout>

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

    <!-- center to left-->
    <Transition
        motion:constraintSetEnd="@id/left"
        motion:constraintSetStart="@id/center"
        motion:duration="200">
        <OnSwipe
            motion:dragDirection="dragLeft"
            motion:touchAnchorId="@id/relative_layout_odds_column"
            motion:touchAnchorSide="left" />
    </Transition>
    <!-- center to right -->
    <Transition
        motion:constraintSetEnd="@id/right"
        motion:constraintSetStart="@id/center"
        motion:duration="200">
        <OnSwipe
            motion:dragDirection="dragRight"
            motion:touchAnchorId="@id/relative_layout_odds_column"
            motion:touchAnchorSide="right" />
    </Transition>

    <ConstraintSet android:id="@+id/center">
        <Constraint
            android:id="@id/relative_layout_odds_column"
            android:layout_
            android:layout_
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
            <PropertySet android:alpha="1" />
        </Constraint>
    </ConstraintSet>
    <!-- place the view on left-->
    <ConstraintSet android:id="@+id/left">
        <Constraint
            android:id="@id/relative_layout_odds_column"
            android:layout_
            android:layout_
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
            <PropertySet android:alpha="1" />
        </Constraint>
    </ConstraintSet>
    <!-- place the view on right-->
    <ConstraintSet android:id="@+id/right">
        <Constraint
            android:id="@id/relative_layout_odds_column"
            android:layout_
            android:layout_
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
            <PropertySet android:alpha="1" />
        </Constraint>
    </ConstraintSet>


</MotionScene>

【参考方案1】：

场景文件中的约束定义存在问题。使用下面的代码而不是你现在拥有的代码。

        <Constraint
            android:id="@id/relative_layout_odds_column"
            android:layout_
            android:layout_
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
            <PropertySet android:alpha="1" />
        </Constraint>
    </ConstraintSet>
    <!-- place the view on left-->
    <ConstraintSet android:id="@+id/left">
        <Constraint
            android:id="@id/relative_layout_odds_column"
            android:layout_
            android:layout_
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
            <PropertySet android:alpha="1" />
        </Constraint>
    </ConstraintSet>
    <!-- place the view on right-->
    <ConstraintSet android:id="@+id/right">
        <Constraint
            android:id="@id/relative_layout_odds_column"
            android:layout_
            android:layout_
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
            <PropertySet android:alpha="1" />
        </Constraint>
    </ConstraintSet>