Question

我想用3张卡片创建一些视图：

带有某些对象的详细信息的顶层卡片
左右卡仅包含主要信息。

如果我单击左侧或右侧卡片，则它会出现在顶部卡片的位置（卡片会切换位置）

但是如果我单击右边的卡片，那么动画会看到很奇怪

首先在进行一些动画处理后，它看起来像预期的那样

对于动画，我创建了运动场景

private EditText automaticThoughtET;
@Inject
ViewModelProviderFactory providerFactory;

@NonNull
private final NoteDao noteDao;

@Inject
public NoteActivity(@NonNull NoteDao noteDao) {
    this.noteDao = noteDao; }


private SharedPreferences loginPref, workoutPref;

private int userId, therapistId, distortions = 0;

private FloatingActionButton nextButton;

private static final String TAG = "sqCbtId";

private int sqCbtId;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_note);

    // Initialising editText form the xml file
    automaticThoughtET = findViewById(R.id.noteThoughtInput);

    // Initialising the nextButton form the xml file
    nextButton = findViewById(R.id.noteActivityButton);

    nextButton.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View view) {

            Note note = new Note(userId, therapistId, "Test", 0, "", "", postedWorkout);
            try {
                noteDao.insert(note);
            } catch (Exception e) {
                e.printStackTrace();
            }

和动作布局

<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ConstraintSet android:id="@+id/center_on_bottom">

        <Constraint android:id="@id/left_card">

            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="@dimen/layout_margin"
                app:layout_constraintBottom_toTopOf="@id/barrier"
                app:layout_constraintEnd_toStartOf="@id/right_card"
                app:layout_constraintHeight_percent="0.2"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <Transform
                android:scaleX="0.90"
                android:scaleY="0.90" />

        </Constraint>

        <Constraint android:id="@id/right_card">

            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="@dimen/layout_margin"
                app:layout_constraintBottom_toTopOf="@id/barrier"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHeight_percent="0.2"
                app:layout_constraintStart_toEndOf="@id/left_card"
                app:layout_constraintTop_toTopOf="parent" />

            <Transform
                android:scaleX="0.90"
                android:scaleY="0.90" />

        </Constraint>

        <Constraint
            android:id="@id/barrier"
            app:barrierDirection="bottom"
            app:constraint_referenced_ids="left_card,right_card" />

        <Constraint android:id="@id/center_card">

            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="@dimen/layout_margin"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/barrier" />

            <Transform
                android:scaleX="1"
                android:scaleY="1" />

        </Constraint>

    </ConstraintSet>

    <ConstraintSet android:id="@+id/center_on_left">

        <Constraint android:id="@id/left_card">

            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="@dimen/layout_margin"
                app:layout_constraintBottom_toTopOf="@id/barrier"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHeight_percent="0.2"
                app:layout_constraintStart_toEndOf="@id/center_card"
                app:layout_constraintTop_toTopOf="parent" />

            <Transform
                android:scaleX="0.90"
                android:scaleY="0.90" />

        </Constraint>

        <Constraint android:id="@id/right_card">

            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="@dimen/layout_margin"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/barrier" />

            <Transform
                android:scaleX="1"
                android:scaleY="1" />

        </Constraint>

        <Constraint
            android:id="@id/barrier"
            app:barrierDirection="bottom"
            app:constraint_referenced_ids="left_card,center_card" />

        <Constraint android:id="@id/center_card">

            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="@dimen/layout_margin"
                app:layout_constraintBottom_toTopOf="@id/barrier"
                app:layout_constraintEnd_toStartOf="@id/left_card"
                app:layout_constraintHeight_percent="0.2"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <Transform
                android:scaleX="0.90"
                android:scaleY="0.90" />

        </Constraint>

    </ConstraintSet>

    <ConstraintSet android:id="@+id/center_on_right">

        <Constraint android:id="@id/left_card">

            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="@dimen/layout_margin"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/barrier" />

            <Transform
                android:scaleX="1"
                android:scaleY="1" />

        </Constraint>

        <Constraint android:id="@id/right_card">

            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="@dimen/layout_margin"
                app:layout_constraintBottom_toTopOf="@id/barrier"
                app:layout_constraintEnd_toStartOf="@id/center_card"
                app:layout_constraintHeight_percent="0.2"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <Transform
                android:scaleX="0.90"
                android:scaleY="0.90" />

        </Constraint>

        <Constraint
            android:id="@id/barrier"
            app:barrierDirection="bottom"
            app:constraint_referenced_ids="right_card,center_card" />

        <Constraint android:id="@id/center_card">

            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="@dimen/layout_margin"
                app:layout_constraintBottom_toTopOf="@id/barrier"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHeight_percent="0.2"
                app:layout_constraintStart_toEndOf="@id/right_card"
                app:layout_constraintTop_toTopOf="parent" />

            <Transform
                android:scaleX="0.90"
                android:scaleY="0.90" />

        </Constraint>

    </ConstraintSet>

    <ConstraintSet
        android:id="@+id/swipeFromLeftToBottom"
        app:deriveConstraintsFrom="@id/center_on_left">

        <Constraint android:id="@id/left_card">

            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="@dimen/layout_margin"
                app:layout_constraintBottom_toTopOf="@id/barrier"
                app:layout_constraintEnd_toStartOf="@id/right_card"
                app:layout_constraintHeight_percent="0.2"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <Transform
                android:scaleX="0.90"
                android:scaleY="0.90" />

        </Constraint>

        <Constraint android:id="@id/right_card">

            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="@dimen/layout_margin"
                app:layout_constraintBottom_toTopOf="@id/barrier"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHeight_percent="0.2"
                app:layout_constraintStart_toEndOf="@id/left_card"
                app:layout_constraintTop_toTopOf="parent" />

            <Transform
                android:scaleX="0.90"
                android:scaleY="0.90" />

        </Constraint>

        <Constraint
            android:id="@id/barrier"
            app:barrierDirection="bottom"
            app:constraint_referenced_ids="left_card,right_card" />

        <Constraint android:id="@id/center_card">

            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="@dimen/layout_margin"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/barrier" />

            <Transform
                android:scaleX="1"
                android:scaleY="1" />

        </Constraint>

    </ConstraintSet>

    <ConstraintSet
        android:id="@+id/swipeFromRightToBottom"
        app:deriveConstraintsFrom="@id/center_on_right">

        <Constraint android:id="@id/left_card">

            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="@dimen/layout_margin"
                app:layout_constraintBottom_toTopOf="@id/barrier"
                app:layout_constraintEnd_toStartOf="@id/right_card"
                app:layout_constraintHeight_percent="0.2"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <Transform
                android:scaleX="0.90"
                android:scaleY="0.90" />

        </Constraint>

        <Constraint android:id="@id/right_card">

            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="@dimen/layout_margin"
                app:layout_constraintBottom_toTopOf="@id/barrier"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHeight_percent="0.2"
                app:layout_constraintStart_toEndOf="@id/left_card"
                app:layout_constraintTop_toTopOf="parent" />

            <Transform
                android:scaleX="0.90"
                android:scaleY="0.90" />

        </Constraint>

        <Constraint
            android:id="@id/barrier"
            app:barrierDirection="bottom"
            app:constraint_referenced_ids="left_card,right_card" />

        <Constraint android:id="@id/center_card">

            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="@dimen/layout_margin"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/barrier" />

            <Transform
                android:scaleX="1"
                android:scaleY="1" />

        </Constraint>

    </ConstraintSet>

    <ConstraintSet
        android:id="@+id/swipeFromBottomToLeft"
        app:deriveConstraintsFrom="@id/center_on_bottom">

        <Constraint android:id="@id/left_card">

            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="@dimen/layout_margin"
                app:layout_constraintBottom_toTopOf="@id/barrier"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHeight_percent="0.2"
                app:layout_constraintStart_toEndOf="@id/center_card"
                app:layout_constraintTop_toTopOf="parent" />

            <Transform
                android:scaleX="0.90"
                android:scaleY="0.90" />

        </Constraint>

        <Constraint android:id="@id/right_card">

            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="@dimen/layout_margin"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/barrier" />

            <Transform
                android:scaleX="1"
                android:scaleY="1" />

        </Constraint>

        <Constraint
            android:id="@id/barrier"
            app:barrierDirection="bottom"
            app:constraint_referenced_ids="left_card,center_card" />

        <Constraint android:id="@id/center_card">

            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="@dimen/layout_margin"
                app:layout_constraintBottom_toTopOf="@id/barrier"
                app:layout_constraintEnd_toStartOf="@id/left_card"
                app:layout_constraintHeight_percent="0.2"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <Transform
                android:scaleX="0.90"
                android:scaleY="0.90" />

        </Constraint>

    </ConstraintSet>

    <ConstraintSet
        android:id="@+id/swipeFromRightToLeft"
        app:deriveConstraintsFrom="@id/center_on_right">

        <Constraint android:id="@id/left_card">

            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="@dimen/layout_margin"
                app:layout_constraintBottom_toTopOf="@id/barrier"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHeight_percent="0.2"
                app:layout_constraintStart_toEndOf="@id/center_card"
                app:layout_constraintTop_toTopOf="parent" />

            <Transform
                android:scaleX="0.90"
                android:scaleY="0.90" />

        </Constraint>

        <Constraint android:id="@id/right_card">

            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="@dimen/layout_margin"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/barrier" />

            <Transform
                android:scaleX="1"
                android:scaleY="1" />

        </Constraint>

        <Constraint
            android:id="@id/barrier"
            app:barrierDirection="bottom"
            app:constraint_referenced_ids="left_card,center_card" />

        <Constraint android:id="@id/center_card">

            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="@dimen/layout_margin"
                app:layout_constraintBottom_toTopOf="@id/barrier"
                app:layout_constraintEnd_toStartOf="@id/left_card"
                app:layout_constraintHeight_percent="0.2"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <Transform
                android:scaleX="0.90"
                android:scaleY="0.90" />

        </Constraint>

    </ConstraintSet>

    <ConstraintSet
        android:id="@+id/swipeFromBottomToRight"
        app:deriveConstraintsFrom="@id/center_on_bottom">

        <Constraint android:id="@id/left_card">

            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="@dimen/layout_margin"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/barrier" />

            <Transform
                android:scaleX="1"
                android:scaleY="1" />

        </Constraint>

        <Constraint android:id="@id/right_card">

            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="@dimen/layout_margin"
                app:layout_constraintBottom_toTopOf="@id/barrier"
                app:layout_constraintEnd_toStartOf="@id/center_card"
                app:layout_constraintHeight_percent="0.2"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <Transform
                android:scaleX="0.90"
                android:scaleY="0.90" />

        </Constraint>

        <Constraint
            android:id="@id/barrier"
            app:barrierDirection="bottom"
            app:constraint_referenced_ids="right_card,center_card" />

        <Constraint android:id="@id/center_card">

            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="@dimen/layout_margin"
                app:layout_constraintBottom_toTopOf="@id/barrier"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHeight_percent="0.2"
                app:layout_constraintStart_toEndOf="@id/right_card"
                app:layout_constraintTop_toTopOf="parent" />

            <Transform
                android:scaleX="0.90"
                android:scaleY="0.90" />

        </Constraint>

    </ConstraintSet>

    <ConstraintSet
        android:id="@+id/swipeFromLeftToRight"
        app:deriveConstraintsFrom="@id/center_on_left">

        <Constraint android:id="@id/left_card">

            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="@dimen/layout_margin"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/barrier" />

            <Transform
                android:scaleX="1"
                android:scaleY="1" />

        </Constraint>

        <Constraint android:id="@id/right_card">

            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="@dimen/layout_margin"
                app:layout_constraintBottom_toTopOf="@id/barrier"
                app:layout_constraintEnd_toStartOf="@id/center_card"
                app:layout_constraintHeight_percent="0.2"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <Transform
                android:scaleX="0.90"
                android:scaleY="0.90" />

        </Constraint>

        <Constraint
            android:id="@id/barrier"
            app:barrierDirection="bottom"
            app:constraint_referenced_ids="right_card,center_card" />

        <Constraint android:id="@id/center_card">

            <Layout
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_margin="@dimen/layout_margin"
                app:layout_constraintBottom_toTopOf="@id/barrier"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHeight_percent="0.2"
                app:layout_constraintStart_toEndOf="@id/right_card"
                app:layout_constraintTop_toTopOf="parent" />

            <Transform
                android:scaleX="0.90"
                android:scaleY="0.90" />

        </Constraint>

    </ConstraintSet>

</MotionScene>

在我的片段中，我根据上一个动画设置了动画

<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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/scene_swipe"
    app:motionDebug="SHOW_ALL">

    <FrameLayout
        android:id="@+id/left_card"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:background="@drawable/cave"
        android:backgroundTint="@color/primaryDarkGreen"
        app:layout_constraintBottom_toTopOf="@id/barrier"
        android:scaleX="0.90"
        android:scaleY="0.90">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_marginEnd="40dp"
            android:layout_marginBottom="40dp"
            android:text="Left card" />

    </FrameLayout>

    <FrameLayout
        android:id="@+id/right_card"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:background="@drawable/cave"
        android:backgroundTint="@color/primaryDarkSlateBlue"
        app:layout_constraintBottom_toTopOf="@id/barrier"
        android:scaleX="0.90"
        android:scaleY="0.90">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_marginEnd="40dp"
            android:layout_marginBottom="40dp"
            android:text="Right card" />

    </FrameLayout>

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="left_card,right_card" />

    <FrameLayout
        android:id="@+id/center_card"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@drawable/cave"
        android:backgroundTint="@color/primaryPink"
        app:layout_constraintTop_toBottomOf="@id/barrier">

        <TextView
            android:id="@+id/likeButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_marginEnd="40dp"
            android:layout_marginBottom="40dp"
            android:text="Top card" />

    </FrameLayout>

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

我在哪里弄错了？

是因为障碍，而没有通过第一个动画渲染吗？

我该如何解决？

请帮助。

Answer 1

一组

app:layout_constraintHeight_percent="0.8"

对于所有通过大布局过渡的视图已解决了问题

具有3个视图和障碍的MotionLayout

1 个答案: