当参考视图的宽度为ConstraintSet动画中的wrap_content时的视图平移动画

Question

这是xml布局begin.xml的设计：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

    <Button
            android:id="@+id/delete"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="@string/delete"
            android:layout_margin="0dp"
            style="@style/DeleteButton"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:translationZ="-2dp"
            />

    <View
            android:id="@+id/top_layer"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@color/white"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            />

    <ImageButton
            android:id="@+id/bet_slip_remove_item"
            android:layout_width="30dp"
            android:layout_height="30dp"
            app:srcCompat="@drawable/close"
            android:background="@drawable/button_white_radius_10"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="@id/top_layer"
            android:contentDescription="@string/close"
            />

    <TextView
        android:id="@+id/some_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/timeout_error"
        app:layout_constraintTop_toTopOf="@id/top_layer"
        app:layout_constraintBottom_toBottomOf="@id/top_layer"
        app:layout_constraintStart_toStartOf="@id/top_layer"
        android:layout_marginStart="8dp"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

看起来像这样：

Delete视图后隐藏一个top_layer按钮。

[我希望通过使用ConstraintSet动画单击“ X”，使top_layer视图向左移动，使其左侧位于屏幕之外，并显示Delete按钮，以得到类似以下内容：

问题在于Delete按钮的宽度设置为wrap_content，但是即使按钮的宽度固定，我如何设置xml布局end.xml，以在最后一张图片上获得所需的设计？

将视图的一部分设置在屏幕之外的位置使我感到困惑。

旁注：我使用top_layer视图有两个原因：

1. 它隐藏DeleteButton

2. 由于所有视图（X，TextView以及应该存在的其他视图）都应一起向左移动，因此我将其约束设置为相对于top_layer的尺寸。

Answer 1

更新：