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

Question

我想让选项卡的背景平滑地动画到 selected 位置（就像选项卡之间默认的 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 是 selected。如果我 select Tab 1 背景应该从 Tab 3 到 Tab 1.

动画

我正在使用 select或更改选项卡的背景。

<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

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

流畅动画的诀窍是使用tabIndicator属性而不是tabBackground！

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

app:tabIndicator="@drawable/tab_layout_fg"

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

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

Answer 2

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

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

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

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

Smooth animation between tabs when using selector - Android

android

android-animation

android-tablayout

material-components

material-components-android