使用选择器时选项卡之间的平滑动画 - Android

Question

我想让选项卡的背景平滑地动画到选定的位置（就像默认的tabIndicator 选项卡之间的动画一样）。

这是我的TabLayout 的样子

<android.support.design.widget.TabLayout
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tabLayout"
        app:tabBackground="@drawable/tab_selector"
        app:tabTextColor="@color/white"
        android:background="@drawable/tab_layout_bg"         
    app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
        app:tabIndicator="@null"
        app:tabRippleColor="@null">

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/tab1"/>

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/tab2"/>

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/tab3"/>

    </android.support.design.widget.TabLayout>

这里，Tab 3 被选中。如果我选择Tab 1，背景应该从Tab 3 动画到Tab 1。

我正在使用选择器来更改选项卡的背景。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_selected="true"
        android:drawable="@drawable/tab_layout_fg"/>
    <item
        android:drawable="@drawable/tab_layout_bg"/>
</selector>

我在这里附上示例动画。只看标签栏。

是否有可能用我遵循的方法来实现这种动画？如果没有，请建议我另一种方式。这两天我一直在做这个。还是想不通。

提前致谢。

Answer 1

检查@Maulik 的答案。这就是您要寻找的。
只是为了整合答案，没有自定义形状（在您的示例中您正在使用它），您可以使用：

 <com.google.android.material.tabs.TabLayout
      app:tabIndicatorGravity="stretch"
      app:tabIndicatorColor="@color/...."
      ..>

INDICATOR_GRAVITY_STRETCH 允许您在整个高度和宽度上拉伸选项卡选择指示器。这样你就可以只使用app:tabIndicatorColor而不使用drawable来设置使用的选定颜色。
默认提供动画。

Answer 2

我们使用 TabLayout 在我们的应用中实现了相同的效果。

平滑动画的诀窍是使用 tabIndicator attirbute 而不是 tabBackground！

您可以定义一个可绘制的形状（不是选择器）并通过以下方式将其分配给 TabLayout：

app:tabIndicator="@drawable/tab_layout_fg"

这将添加一个带有您想要实现的流畅动画的选项卡指示器。 如果您发现 tabIndicator 颜色没有按照可绘制文件中的定义反映，您可以使用 tabIndicatorColor 属性为 tabIndicator 着色。

注意：确保您使用的是最新的设计支持库 v28.0.0 或适用于 Android X 的材料组件库。