Анимация трансляции представления, когда ширина ссылочного представления равна wrap_content в анимации ConstraintSet

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>

Это выглядит примерно так:

За представлением top_layer скрыта кнопка Delete.

Нажав кнопку "X", я хочу, используя анимацию ConstraintSet, просмотреть top_layer, чтобы левая часть находилась за пределами области видимости. экран и раскрыть кнопку Delete, чтобы получить что-то вроде этого:

Проблема заключается в том, что кнопка Delete имеет свою ширинуустановить на wrap_content, но даже если он имеет фиксированную ширину, как я могу установить макет XML end.xml, чтобы получить желаемый дизайн на последнем изображении?

Установка позиции представления, что одна часть этогоза пределами экрана меня озадачивает.

Примечание: я использую top_layer вид по двум причинам:

1. он скрывает DeleteButton

2. , поскольку все виды (X, TextView и предположительно другие, которые должны быть там) должны вместе сдвигаться влево, я установил их ограничения относительно * 10Размеры 41 *.

Answer 1

Обновление: Только что понял, что вы используете анимацию через ConstraintSet . Самое простое, что можно сделать, это настроить клон вашей кнопки удаления (по крайней мере, для некоторого вида с той же шириной) с конечным ограничением, установленным на начало родительского макета. Это даст вам внеэкранный виджет, стартовая сторона которого находится за пределами экрана, насколько далеко вы хотите переместить другие виджеты. Затем вы можете установить новые ограничения для этой левой стороны и применить переход.

Вот пример приложения:

MainActivity.java

public class MainActivity extends AppCompatActivity {

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

    public void onClick(View view) {
        ConstraintLayout layout = findViewById(R.id.layout);
        ConstraintSet cs = new ConstraintSet();
        cs.clone(layout);
        ChangeBounds transition = new ChangeBounds();
        transition.setDuration(1000);

        TransitionManager.beginDelayedTransition(layout, transition);
        cs.connect(R.id.some_text, ConstraintSet.START, R.id.offScreenView, ConstraintSet.START);
        cs.connect(R.id.bet_slip_remove_item, ConstraintSet.END, R.id.delete, ConstraintSet.START);
        cs.applyTo(layout);
    }
}

activity_main.xml Это немного упрощено, но показывает концепции.

<androidx.constraintlayout.widget.ConstraintLayout 
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/offScreenView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:text="@string/delete"
        app:layout_constraintEnd_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/delete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:text="@string/delete"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/some_text"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/holo_blue_light"
        android:gravity="center_vertical"
        android:paddingStart="16dp"
        android:elevation="7dp"
        android:text="@string/timeout_error"
        app:layout_constraintBottom_toBottomOf="@+id/delete"
        app:layout_constraintEnd_toEndOf="@id/bet_slip_remove_item"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageButton
        android:id="@+id/bet_slip_remove_item"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:onClick="onClick"
        android:elevation="7dp"
        app:layout_constraintBottom_toBottomOf="@+id/delete"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/close" />

</androidx.constraintlayout.widget.ConstraintLayout>

---

Анимация со свойством translationX также работает:

Вы можете настроить анимацию свойства translationX для каждого элемента, который нужно переместить влево. Вам также необходимо определить ширину кнопки «удалить», чтобы узнать, как далеко нужно двигаться влево.

Добавьте что-то подобное в стартовую часть вашего приложения - onCreate () длядействие:

// Top level member variables.
private ObjectAnimator slide1Animator;
private ObjectAnimator slide2Animator;
private ObjectAnimator slide3Animator;   

findViewById(R.id.top_layer).getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            View topLayer = findViewById(R.id.top_layer);
            View someText = findViewById(R.id.some_text);
            View delete = findViewById(R.id.bet_slip_remove_item);
            pixToSlide = -findViewById(R.id.delete).getWidth();
            slide1Animator = ObjectAnimator.ofFloat(topLayer, "translationX", pixToSlide)
                    .setDuration(1000);

            slide2Animator = ObjectAnimator.ofFloat(someText, "translationX", pixToSlide)
                    .setDuration(1000);

            slide3Animator = ObjectAnimator.ofFloat(delete, "translationX", pixToSlide)
                    .setDuration(1000);
        }
    });

Затем в обработчике щелчка для "x" выполните следующее:

slide1Animator.start();
slide2Animator.start();
slide3Animator.start();

Это сместит представления влево на экран. и откройте кнопку удаления внизу.