水平 android:animateLayoutChanges="true" 动画不流畅。

Question

我有一个如下动画的布局：

使用android:animateLayoutChanges="true"，txt_billion会动态显示（以下是布局代码）。

请注意Hundred在跳动（实际上所有都在跳动，但Hundred更明显）。如何防止文本跳动？

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:animateLayoutChanges="true"
    android:orientation="horizontal">
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:padding="8dp"
        android:background="#9f9"
        android:text="Hundreds" />
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:padding="8dp"
        android:background="#f9f"
        android:text="Thousands" />
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:padding="8dp"
        android:background="#0ff"
        android:text="Millions" />
    <TextView
        android:id="@+id/txt_billion"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:padding="8dp"
        android:visibility="gone"
        android:background="#ff0"
        android:text="Billions" />
</LinearLayout>

您可以从https://github.com/elye/issue_horizontal_layout_animate获取代码进行测试。

- Elye

---

在哪个设备上？使用的是哪个Android版本？硬件加速是否已启用？ - Vladyslav Matviienko

任何设备。我在 Nexus 5 的 Android 模拟器上尝试过，使用的是 Nougat 版本。 - Elye

模拟器不是真实设备。请先在真实设备上尝试，效果会有很大的差别。 - Vladyslav Matviienko

它也会在实际设备上发生。因此，我创建了一个小的示例来证明这个问题。请尝试创建一个水平布局，文本重心居中，并启用animateLayouChange。你应该能看到这种情况发生。 - Elye

抱歉，无法复现，在我的一加手机上完全流畅运行。 - Vladyslav Matviienko

在 Nexus 6 Mashmallow 上进行了测试，问题得到复制。我提供了代码的 git 存储库 https://github.com/elye/issue_horizontal_layout_animate。请下载并运行。 - Elye

Answer 1

尝试使用支持转换（Support Transitions）代替animateLayoutChanges

首先，从你的XML文件中删除android:animateLayoutChanges="true"

然后，在你的应用依赖项中添加compile 'com.android.support:transition:25.4.0'。

接下来，在改变可见性之前添加这行代码（来自android.support.transition包的TransitionManager）

TransitionManager.beginDelayedTransition(parentOfAnimatedView);

针对您的代码

public void clickMe(View view) {
        TransitionManager.beginDelayedTransition((ViewGroup) billionText.getParent());
        if (billionText.getVisibility() == View.GONE) {
            billionText.setVisibility(View.VISIBLE);
        } else {
            billionText.setVisibility(View.GONE);
        }
    }

- princeparadoxes

---

不，它并没有解决问题。 "数百" 仍然会跳动。请尝试横向模式，跳动更明显。 - Elye

Answer 2

问题在于animateLayoutChanges仅影响ViewGroup的子类。 TextView无法对布局更改动画作出反应，因此文本会跳动。有两种方法可以解决它：

1）将每个TextView包装在FrameLayout中，并将重量放在FrameLayout上。您还必须为每个添加android:animateLayoutChanges ="true"，并在每个FrameLayout上调用getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING)。从布局方面来看，这有点恶心，但是它将允许您继续使用过渡动画。

2）使用ValueAnimator并动画（消失）出现项的重量。动画可能会有些卡顿，因为它需要每帧重新布置LinearLayout，但它仍应该可用。您还必须解决消失项的文本重新流动问题，例如通过首先使其淡出然后再动画重量变化。

- Jarett Millard