这是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
视图后面的按钮。
通过单击“X”,我希望通过使用 ConstraintSet 动画,top_layer
查看向左移动,其左侧部分位于屏幕之外并显示Delete
按钮,以获得如下效果:
问题在于Delete
按钮的宽度设置为wrap_content
,但即使它具有固定宽度,我如何设置 xml 布局end.xml
,以在最后一张图片上获得所需的设计?
将视图的一部分设置在屏幕之外的位置让我感到困惑。
旁注:我使用top_layer
视图有两个原因:
它隐藏了 DeleteButton
由于所有视图(X、TextView 和可能应该存在的其他视图)都应该一起向左移动,我将它们的约束设置为相对于
top_layer
的尺寸。