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

问题描述

我想使选项卡的背景平滑移动到选定位置(就像在选项卡之间设置默认的 tabIndicator 动画一样).

I would like to get the background of the tab animated smoothly to the selected position (just like the default tabIndicator animates between tabs).

这是我的 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 .

Here, Tab 3 is selected. If i select Tab 1 the background should animate from Tab 3 to Tab 1.

我正在使用选择器来更改标签的背景.

I am using selector to change the background of the tabs.

<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>

在这里，我将附加示例动画.仅查看标签栏.

Here i am attaching the sample animation. See just the tab bar.

是否可以使用我遵循的方法来实现这种动画?如果不是，请建议我另一种方式.我已经从两天开始从事这项工作.仍然无法弄清楚.

Is it possible to achieve this kind of animation with approach i am following? If not please suggest me another way. I have been working on this from two days. Still can't figure it out.

谢谢.

推荐答案

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

We've achieved the same effect in our app using TabLayout.

平滑动画的技巧是使用tabIndicator服装而不是tabBackground！

The trick for smooth animation is to use tabIndicator attirbute instead of tabBackground!

您可以定义可绘制的形状(不是选择器)，并通过以下方式将其分配给TabLayout:

You can define a shape drawable (not selector) and assign it to TabLayout by:

app:tabIndicator="@drawable/tab_layout_fg"

这将添加一个带有想要实现的平滑动画的制表符指示器.如果您发现tabIndicator颜色没有反映可绘制文件中定义的颜色，则可以使用 tabIndicatorColor 属性为tabIndicator着色.

This will add a tab indicator with smooth animation that you want to achieve.If you find that tabIndicator color is not reflecting as defined in the drawable file, you can tint the tabIndicator using tabIndicatorColor attribute.

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

这篇关于使用选择器时，选项卡之间的动画平滑-Android的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！