使用PageChangeListener动态更改选项卡图标的颜色

Question

我想像Facebook应用程序一样更改选项卡图标的颜色。

当ViewPager的状态为SCROLL_STATE_DRAGGING时，将所有图标的颜色更改为未选择的（灰色）颜色，另一方面，当ViewPager的状态为SCROLL_STATE_SETTLING和SCROLL_STATE_IDLE时，然后将所选标签的图标更改为选定的（白色）颜色。

我做了一个测试：将当前选中的片段滚动到其他片段，但仍然保持SCROLL_STATE_DRAGGING状态。

这是一个奇怪的情况，我在模拟器上运行应用程序，它似乎工作得很好，但是当我在真实设备上运行应用程序时，当ViewPager状态为SCROLL_STATE_IDLE或SCROLL_STATE_SETTLING时，它没有将所选选项卡的颜色更改为白色。

我在addOnPageChangeListener添加了一个ViewPager，并改变了不同状态的颜色。

有小费吗？

这是我的代码：

void setupViews() {
        mViewPager = (ViewPager) findViewById(R.id.container);
        tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        colorSelected = ContextCompat.getColor(ctx, R.color.itemSelected);//white
        colorUnselected = ContextCompat.getColor(ctx, R.color.itemUnselected);//gray

        pagerIcons = new Drawable[2];
        pagerIcons[0] = DrawableCompat.wrap(VectorDrawableCompat.create(ctx.getResources(), R.drawable.ic_list_black_24dp, null));
        pagerIcons[1] = DrawableCompat.wrap(VectorDrawableCompat.create(ctx.getResources(), R.drawable.ic_shopping_cart_black_24dp, null));

        ViewPagerHelper.TabOption option = new ViewPagerHelper.TabOption(true, true);
        helper = new ViewPagerHelper(getSupportFragmentManager(), mViewPager, tabLayout, option);
        helper.bindViewPager();

        helper.addFragmentWithTabIcon(new ExpenseIncomeFragment(), pagerIcons[0], ExpenseIncomeFragment.TAG);
        helper.addFragmentWithTabIcon(new FragmentWishList(), pagerIcons[1], FragmentWishList.TAG);

        mViewPager.setScrollbarFadingEnabled(true);
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                //if (positionOffset>0)DrawableCompat.setTint(pagerIcons[mViewPager.getCurrentItem()], colorUnselected);
                Log.e("MainActivity","position="+position+" 
positionOffset="+positionOffset+" positionOffsetPixels="+positionOffsetPixels);
            }

            @Override
            public void onPageSelected(int position) {
                Log.e("MainActivity","position="+position);

pagerIcons[mViewPager.getCurrentItem()].setColorFilter(colorSelected, PorterDuff.Mode.SRC_IN);
        }

            @Override
            public void onPageScrollStateChanged(int state) {
                int pos = mViewPager.getCurrentItem();
                switch (state) {
                    case ViewPager.SCROLL_STATE_IDLE:
                        Log.e("MainActivity","SCROLL_STATE_IDLE" + " getCurrentItem="+pos);

                        pagerIcons[pos].setColorFilter(colorSelected, PorterDuff.Mode.SRC_IN);
                        break;
                    case ViewPager.SCROLL_STATE_DRAGGING:
                        Log.e("MainActivity","SCROLL_STATE_DRAGGING" + " getCurrentItem="+pos);
                        pagerIcons[pos].setColorFilter(colorUnselected, PorterDuff.Mode.SRC_IN);
                        break;
                    case ViewPager.SCROLL_STATE_SETTLING:
                        Log.e("MainActivity","SCROLL_STATE_SETTLING" + " getCurrentItem="+pos);
                        pagerIcons[pos].setColorFilter(colorSelected, PorterDuff.Mode.SRC_IN);
                        break;
                }

            }
        });
        helper.update();

        mViewPager.setCurrentItem(0);
        int len = pagerIcons.length;
        for (int i = 0; i < len; i++) {
            pagerIcons[i].setColorFilter(colorUnselected,
            PorterDuff.Mode.SRC_IN);
        }
        pagerIcons[0].setColorFilter(colorSelected,PorterDuff.Mode.SRC_IN);

    });
}

类ViewPagerHelper用于将ViewPager绑定到TabLayout。 pagerIcons是标签图标的绘图，我给它们着色。

Answer 1

由于您正在使用矢量绘图，因此可以以不同的方式解决此问题。你可以摆脱整个OnPageChangeListener并让自己留下这样：

void setupViews() {
    mViewPager = (ViewPager) findViewById(R.id.container);
    tabLayout = (TabLayout) findViewById(R.id.tabLayout);

    pagerIcons = new Drawable[2];
    pagerIcons[0] = VectorDrawableCompat.create(ctx.getResources(), R.drawable.ic_list_black_24dp, null);
    pagerIcons[1] = VectorDrawableCompat.create(ctx.getResources(), R.drawable.ic_shopping_cart_black_24dp, null);

    ViewPagerHelper.TabOption option = new ViewPagerHelper.TabOption(true, true);
    helper = new ViewPagerHelper(getSupportFragmentManager(), mViewPager, tabLayout, option);
    helper.bindViewPager();

    helper.addFragmentWithTabIcon(new ExpenseIncomeFragment(), pagerIcons[0], ExpenseIncomeFragment.TAG);
    helper.addFragmentWithTabIcon(new FragmentWishList(), pagerIcons[1], FragmentWishList.TAG);

    mViewPager.setScrollbarFadingEnabled(true);
    helper.update();

    mViewPager.setCurrentItem(0);
}

您可以通过在<vector> drawables中管理它们来让系统为您完成，而不是试图管理Java中图标的颜色。首先，在res/color/目录中创建一个颜色选择器文件：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/itemSelected" android:state_selected="true"/>
    <item android:color="@color/itemUnselected"/>
</selector>

然后在矢量文件中使用此颜色：

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="@color/my_color_selector"
        android:pathData="M3,13h2v-2L3,11v2zM3,17h2v-2L3,15v2zM3,9h2L5,7L3,7v2zM7,13h14v-2L7,11v2zM7,17h14v-2L7,15v2zM7,7v2h14L21,7L7,7z"/>
</vector>

如果您需要支持低于21的API级别，则不能直接在向量中使用颜色选择器。相反，为每个矢量drawable创建两个副本，一个具有所选颜色，另一个具有未选择颜色。然后在Java中构建一个StateListDrawable并将其分配给你的pagerIcons数组：

Drawable selected0 = ContextCompat.getDrawable(this, R.drawable.ic_list_black_24dp_selected);
Drawable unselected0 = ContextCompat.getDrawable(this, R.drawable.ic_list_black_24dp_unselected);

StateListDrawable statelist0 = new StateListDrawable();
statelist0.addState(new int[]{android.R.attr.state_selected}, selected0);
statelist0.addState(StateSet.WILD_CARD, unselected0);

pagerIcons[0] = statelist0;

无论您是在XML中使用颜色选择器还是必须在Java中构建StateListDrawable，根概念都是相同的：让Android框架决定选择哪个选项卡，并让它为您着色。