Android 动画 TabLayout 点

Question

我想为 TabLayout 点指示器设置动画以在选定状态下拉伸它。我使用默认动画来做到这一点，但它有问题，它不能通过仅动画宽度来采用默认形状。动画后它拉伸成矩形，我不明白为什么。

代码：

    val vg = tabLayout.getChildAt(0) as ViewGroup
    tabLayout.addOnTabSelectedListener(object: TabLayout.ViewPagerOnTabSelectedListener(viewPager){
        override fun onTabReselected(tab: TabLayout.Tab) {}
        override fun onTabUnselected(tab: TabLayout.Tab) {
            val tabDot = vg.getChildAt(tab.position)
            tabDot?.let { v->
                animateDotWidthDefault(v)
                animateDotColor(v, R.color.selected_blue, R.color.default_grey)
            }
        }
        override fun onTabSelected(tab: TabLayout.Tab) {
            val tabDot = vg.getChildAt(tab.position)
            tabDot?.let { v->
                animateDotWidthStretch(v)
                animateDotColor(v, R.color.default_grey, R.color.selected_blue)
            }
        }
    })

 private fun animateDotWidthDefault(tabDot: View){
        val widthAnimator = ValueAnimator.ofInt(stretchedWidth, defaultWidth)
        widthAnimator.duration = 500
        widthAnimator.interpolator = DecelerateInterpolator()
        widthAnimator.addUpdateListener { animation ->
            tabDot.layoutParams.width = animation.animatedValue as Int
            tabDot.requestLayout()
        }
        widthAnimator.start()
    }

    private fun animateDotWidthStretch(tabDot: View){
        val widthAnimator = ValueAnimator.ofInt(defaultWidth, stretchedWidth)
        widthAnimator.duration = 500
        widthAnimator.interpolator = AccelerateInterpolator()
        widthAnimator.apply {
            addUpdateListener { animation ->
                tabDot.layoutParams.width = animation.animatedValue as Int
                tabDot.requestLayout()
            }
        }
        widthAnimator.start()
    }

选项卡指示器：

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <item android:gravity="center">
        <shape
            android:shape="oval"
            android:useLevel="false">
            <solid android:color="@color/selected_blue" />
            <size
                android:width="8dp"
                android:height="8dp"/>
        </shape>
    </item>
</layer-list>

目标：

现实：

Answer 1

该错误肯定与

android:fillAfter="true"
android:fillEnabled="true"

XML 上的配置。您能否粘贴原始 XML 和容器，以便我们可以编辑我们的答案并为您的问题提供更准确的解决方案。

顺便说一句，很棒的组件，我在最后测试了它，它与这个 XML 配置完美配合：

<!-- For demonstration / testing purposes -->
    <com.google.android.material.tabs.TabLayout
            android:id="@+id/indicator3"
            android:layout_width="wrap_content"
            android:layout_height="36dp"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="14dp"
            android:layout_marginBottom="64dp"
            android:clipChildren="false"
            android:clipToPadding="false"
            app:tabBackground="@drawable/tablayout_unselected"
            app:tabGravity="center"
            app:tabIndicator="@drawable/tablayout_selected2"
            app:tabIndicatorAnimationDuration="250"
            app:tabIndicatorAnimationMode="elastic"
            app:tabIndicatorColor="@color/xxxRed"
            app:tabIndicatorFullWidth="false"
            app:tabIndicatorGravity="bottom"
            app:tabIndicatorHeight="6dp"
            app:tabMode="scrollable"
            android:fillAfter="true"
            android:fillEnabled="true"
            app:tabRippleColor="@color/carbon_red_a700"
            app:tabSelectedTextColor="@color/black"
            app:tabTextColor="@android:color/black"
            app:tabUnboundedRipple="true">

        <com.google.android.material.tabs.TabItem
                android:id="@+id/firstTab"
                android:layout_width="12dp"
                android:layout_height="wrap_content" />

        <com.google.android.material.tabs.TabItem
                android:id="@+id/secondTab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

        <com.google.android.material.tabs.TabItem
                android:id="@+id/thirdTab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

        <com.google.android.material.tabs.TabItem
                android:id="@+id/fourthTab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

        <com.google.android.material.tabs.TabItem
                android:id="@+id/fifthTab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
    </com.google.android.material.tabs.TabLayout>