为更改布局高度添加动画

Question

我有一个小view，一开始只有一个loading indicator，所以比较小。但是，当加载实际内容时，我想显示它而不是加载指示器，为此我添加了 2 个文本字段和一个 ImageView。目前我只是通过隐藏 ProgressBar 并显示我刚才提到的元素来做到这一点，但这种方式在两种状态之间存在硬切换。我想改变这个，以便首先在短时间内调整视图的高度，然后显示内容（可能淡入，但我更关心改变高度）。

总的来说我已经有了一些想法如何做到这一点，但我不知道如何计算新的高度？有没有办法计算它，甚至直接来自 Android 的函数可以解决我的问题？

已经谢谢了:)^

这是片段的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="@+id/home_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".viewables.fragments.home.HomeFragment">

    <ListView
        android:id="@+id/home_vertretungsplan_preview"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:listitem="@layout/vertretungsplan_list_item"/>

    <include
        android:animateLayoutChanges="true"
        android:layout_weight="0"
        android:id="@+id/home_article_preview"
        layout="@layout/thomsline_main_recyclerview_article"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp" />
</LinearLayout>

这是包含的布局

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:animateLayoutChanges="true"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:clickable="true"
    android:focusable="true"
    app:cardElevation="10dp"
    app:cardCornerRadius="20dp"
    app:cardPreventCornerOverlap="false">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


        <ImageView
            android:id="@+id/thomsline_post_image"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_margin="0dp"
            android:adjustViewBounds="true"
            android:padding="0dp"
            android:scaleType="centerCrop"
            android:src="@drawable/img_thomsline_article_image_default"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="20dp"
            android:id="@+id/container1"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/thomsline_post_image"
            app:layout_constraintLeft_toLeftOf="parent">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="19sp"
                android:id="@+id/thomsline_post_title"
                tools:text="Article Title"/>


            <TextView
                android:id="@+id/thomsline_post_excerpt"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:textAllCaps="false"
                android:textSize="12.5sp"
                tools:text="Post Excerpt" />

        </LinearLayout>

        <ProgressBar
            android:id="@+id/thomsline_post_loading_indicator"
            style="?android:attr/progressBarStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:visibility="gone"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

</com.google.android.material.card.MaterialCardView>

Answer 1

您可以尝试在父布局中使用 animateLayoutChanges 属性。

将此行添加到 activity 布局的根元素中：

android:animateLayoutChanges="true"

或者您可以使用 TransitionManager 实现平滑过渡。 (API 19+)

将此代码添加到您的文件中，就在您设置内容的行之前：

TransitionManager.beginDelayedTransition(cardView); //Default transition

您可以像这样将您的首选转换传递给此函数：

Transition transition = new ChangeBounds(); 
TransitionManager.beginDelayedTransition(cardView,transition);

您可以选择任何转换：

ChangeBounds
爆炸
幻灯片
淡入淡出
自动过渡
过渡集

如果您想了解有关 android 中动画的更多信息，我建议您阅读以下内容：Simple Animations in Android

为更改布局高度添加动画

Add animation for Changing Height of Layout

animation

android

kotlin