Анимируйте представления Android для изменения их положения и размеров

Question

Не могли бы вы подсказать, как можно анимировать виды в Android, чтобы изменить их положение, ширину, высоту, поля и т. Д. Я приложил изображение с 3 видами (цвета - желтый, синий, оранжевый), которые расположены в группе просмотра.(зеленый цвет), общее количество групп просмотра равно 3. Идея заключается в том, что при нажатии кнопки «Анимация» положение и размеры групп просмотра с их внутренними видами следует изменять с помощью анимации.Фиолетовые стрелки показывают два способа анимированного направления.

Answer 1

Этого можно добиться с помощью анимаций ConstraintLayouts и ConstraintSet, например: layout_1.xml

<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:id="@+id/layout_1"
android:layout_height="match_parent"
tools:context=".MainActivity">

<Button
    android:id="@+id/button1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:background="@android:color/holo_red_dark"
    android:text="View1"
    app:layout_constraintEnd_toStartOf="@+id/button2"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:background="@android:color/holo_red_dark"
    android:text="View2"
    app:layout_constraintBottom_toBottomOf="@+id/button1"
    app:layout_constraintEnd_toStartOf="@+id/button3"
    app:layout_constraintStart_toEndOf="@+id/button1"
    app:layout_constraintTop_toTopOf="@+id/button1" />

<Button
    android:id="@+id/button3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:background="@android:color/holo_red_dark"
    android:text="View3"
    app:layout_constraintBottom_toBottomOf="@+id/button2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/button2"
    app:layout_constraintTop_toTopOf="@+id/button2" />

<Button
    android:id="@+id/animateButton"
    android:layout_width="88dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.88"
    app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

layout_2.xml:

<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<Button
    android:id="@+id/button1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="32dp"
    android:layout_marginEnd="8dp"
    android:background="@android:color/holo_red_dark"
    android:text="View1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:background="@android:color/holo_red_dark"
    android:text="View2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button1" />

<Button
    android:id="@+id/button3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:background="@android:color/holo_red_dark"
    android:text="View3"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button2" />


<Button
    android:id="@+id/animateButton"
    android:layout_width="88dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.88"
    app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

и в animateButton вы добавляете:

 private fun addAnimation() {
    var set = false
    val constraint1 = ConstraintSet()
    constraint1.clone(root)
    val constraint2 = ConstraintSet()
    constraint2.clone(this, R.layout.layout_2)

    findViewById<Button>(R.id.animateButton).setOnClickListener {
        TransitionManager.beginDelayedTransition(root)
        val constraint = if (set) constraint1 else constraint2
        constraint.applyTo(root)
        set = !set
    }
}

Когда мы применяем новый ConstraintSet к тому же макету, ConstraintLayout найдет изменения в ограничениях для элементов с тем же android: id и правильно анимирует.И, конечно, вы можете программно изменять ограничения ваших элементов, если не хотите дублировать файл макета.