动态更改标签图标'使用PageChangeListener的颜色

时间:2017-12-23 13:24:06

标签: android tabs android-viewpager tint

我想更改标签图标'颜色像Facebook应用程序。

ViewPager的状态为SCROLL_STATE_DRAGGING时,请更改所有图标'另一方面,当ViewPager状态为SCROLL_STATE_SETTLINGSCROLL_STATE_IDLE时,颜色为未选定(灰色)颜色,然后将所选标签的图标更改为已选中(白色)。

我做了一个测试:将当前选定的片段滚动到其他片段,但仍保持SCROLL_STATE_DRAGGING状态。

这是一个奇怪的情况,我在模拟器上运行应用程序,它似乎工作得很好,但是当我在真实设备上运行应用程序时,它并没有将所选标签的颜色更改为白色当ViewPager州为SCROLL_STATE_IDLESCROLL_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绑定到TabLayoutpagerIcons是标签图标的抽屉,我为它们着色。

1 个答案:

答案 0 :(得分: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框架决定选择哪个选项卡,让它为您着色。