Question

有什么方法可以将渐变而不是颜色应用于Android中的TabLayout指示器？如果没有直接的方法可以做到这一点，那么有什么技巧甚至库可以实现吗？

<android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:tabIndicator="@drawable/drawable_shape_home_tab_indicator"
        app:tabIndicatorColor="@color/colorGradiantEnd"
        app:tabIndicatorFullWidth="true"
        app:tabIndicatorGravity="top">

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/drawable_selector_home_tab_dashboard" />

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/drawable_selector_home_tab_surveys" />


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

Answer 1

您可以创建一个自定义视图，并在TabLayout的顶部绘制渐变作为指标。就我而言，我使用视图寻呼机来获取滚动值以动画化指示器的运动。这是我编写的article中的代码段。

TabLayout mTabs;
View mIndicator;
ViewPager mViewPager;

private int indicatorWidth;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    //..
    //Assign view references and set up view pager
    //..

    mViewPager.setAdapter(adapter);
    mTabs.setupWithViewPager(mViewPager);

    //Determine indicator width at runtime
    mTabs.post(new Runnable() {
        @Override
        public void run() {
            indicatorWidth = mTabs.getWidth() / mTabs.getTabCount();

            //Assign new width
            FrameLayout.LayoutParams indicatorParams = (FrameLayout.LayoutParams) mIndicator.getLayoutParams();
            indicatorParams.width = indicatorWidth;
            mIndicator.setLayoutParams(indicatorParams);
        }
    });

    mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

        //To move the indicator as the user scroll, we will need the scroll offset values
        //positionOffset is a value from [0..1] which represents how far the page has been scrolled
        //see https://developer.android.com/reference/android/support/v4/view/ViewPager.OnPageChangeListener
        @Override
        public void onPageScrolled(int i, float positionOffset, int positionOffsetPx) {
            FrameLayout.LayoutParams params = (FrameLayout.LayoutParams)mIndicator.getLayoutParams();

            //Multiply positionOffset with indicatorWidth to get translation
            float translationOffset =  (positionOffset+i) * indicatorWidth ;
            params.leftMargin = (int) translationOffset;
            mIndicator.setLayoutParams(params);
        }

        @Override
        public void onPageSelected(int i) {

        }

        @Override
        public void onPageScrollStateChanged(int i) {

        }
    });

}

如何将渐变而不是颜色应用于TabLayout指示器

1 个答案: