TabLayout 仅在滚动时更改颜色文本，单击时不更改

Question

我的 tabLayout 有一个小问题。当我在不同的选项卡中滚动时，选项卡会更改图标和文本颜色。那很好用。

问题是当我尝试在选项卡中单击（而不是滚动）时。当我这样做时，我总是有两个带有相同颜色文本的选项卡。我只想让 select 选项卡具有正确的颜色文本。图标更改正确。

选项卡xml：

<android.support.design.widget.TabLayout
        android:id="@+id/profile_tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        app:tabMode="fixed"
        app:tabTextColor="@color/colorSecundary"
        app:tabSelectedTextColor="@color/colorPrimary"
        android:background="@color/white"
        app:tabGravity="fill"
        app:tabIndicatorHeight="0dp"
        app:tabIndicatorColor="@android:color/transparent"
        android:elevation="0dp"
        app:tabTextAppearance="@style/CustomTabText"
        />

<style name="CustomTabText" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">12sp</item>
    </style>

代码：

 private void initTabs(){
        pager = (ViewPager) getView().findViewById(R.id.profile_view_pager);
        pager.setAdapter(new ProfileFragment.ProfilePageAdapter(getFragmentManager()));


    tabLayout = (TabLayout) getView().findViewById(R.id.profile_tab_layout);
    tabLayout.setupWithViewPager(pager);
    tabLayout.addOnTabSelectedListener(this);

    pager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

    tabLayout.getTabAt(0).setIcon(ContextCompat.getDrawable(getActivity(), R.drawable.ico_activity_fill));
    tabLayout.getTabAt(1).setIcon(ContextCompat.getDrawable(getActivity(), R.drawable.ico_favourites_fill));
    tabLayout.getTabAt(2).setIcon(ContextCompat.getDrawable(getActivity(), R.drawable.ico_reputation));

    setTypeFace();

}

private void setTypeFace(){
    Typeface tfGothamRoundedMedium = Typeface.createFromAsset(ApplicationConfig.getAppContext().getAssets(), Comunes.TypeGothamRoundedMedium);

    ViewGroup tablayoutView = (ViewGroup) tabLayout.getChildAt(0);

    for(int x = 0;x<3;x++) {
        ViewGroup tabView = (ViewGroup) tablayoutView.getChildAt(x);

        for (int i = 0; i < tabView.getChildCount(); i++) {
            View child = tabView.getChildAt(i);
            if (child instanceof TextView) {
                ((TextView) child).setTypeface(tfGothamRoundedMedium);
            }
        }
    }
}

@Override
public void onTabSelected(TabLayout.Tab tab) {
    if(tab.getPosition() == 0) {
        tab.setIcon(ContextCompat.getDrawable(getActivity(), R.drawable.ico_activity_fill));

    } else if (tab.getPosition() == 1) {
        tab.setIcon(ContextCompat.getDrawable(getActivity(), R.drawable.ico_favourites));

    } else if (tab.getPosition() == 2) {
        tab.setIcon(ContextCompat.getDrawable(getActivity(), R.drawable.ico_reputation_fill));

    }
    pager.setCurrentItem(tab.getPosition(), Boolean.TRUE);
    setTypeFace();
}

@Override
public void onTabUnselected(TabLayout.Tab tab) {
    if(tab.getPosition() == 0) {
        tab.setIcon(ContextCompat.getDrawable(getActivity(), R.drawable.ico_activity));
    } else if (tab.getPosition() == 1) {
        tab.setIcon(ContextCompat.getDrawable(getActivity(), R.drawable.ico_favourites_fill));
    } else if (tab.getPosition() == 2) {
        tab.setIcon(ContextCompat.getDrawable(getActivity(), R.drawable.ico_reputation));
    }
    setTypeFace();
}

@Override
public void onTabReselected(TabLayout.Tab tab) {

}

Answer 1

尽管它工作正常，但这看起来不是更改选项卡图标的正确方法。不要覆盖 onTabSelected() 和 onTabUnselected() 方法，只需为可绘制文件夹中的图标创建选择器。像这样：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_pin_drop_white" android:state_selected="true"/>
<item android:drawable="@drawable/ic_pin_drop_light_grey"/> <!-- default -->
</selector>

然后这样设置： tabLayout.getTabAt(X).setIcon(R.drawable.your_tab_selector)

我相信您在单击选项卡时获得相同文本颜色的原因是您更改了选项卡的字体，因此 XML 中为 TabView 设置的颜色被覆盖。

Answer 2

您可以通过在视图寻呼机上使用 addOnPageChangeListener 来获得效果，并且在每个位置上也为 >21

设置 tabLayout 和状态栏颜色

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

                }

                @Override
                public void onPageSelected(int position) {
                    try {
                        type = position;
                        switch (position) {
                            case 0:
                                tabLayout.setBackgroundColor(ContextCompat.getColor(
                                        mContext, R.color.colorPrimary));
                                toolbar.setBackgroundColor(ContextCompat.getColor(
                                        mContext, R.color.colorPrimary));
                                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                                    Window window = getWindow();
                                    window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
                                    window.setStatusBarColor(ContextCompat.getColor(
                                            mContext.this, R.color.colorPrimaryDark));
                                }
                                break;
                            case 1:
                                -----
                                break;
                            case 2:
                                -----
                                break;
                            case 3:
                                -----
                                break;
                            default:
                                -----
                                break;
                        }

                        for (int i = 0; i < tabLayout.getTabCount(); i++) {
                            TabLayout.Tab tab = tabLayout.getTabAt(i);
                            if (i == position) {
                                tab.getIcon().setAlpha(255);
                            } else {
                                tab.getIcon().setAlpha(125);
                            }
                        }
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                }

                @Override
                public void onPageScrollStateChanged(int state) {

                }
            });

Answer 3

这是 android 的问题，他们说已经关闭，但我仍然遇到。

https://code.google.com/p/android/issues/detail?id=178650

我找到的解决方案是将文本视图的 'selected' 属性设置为 false。这是一个示例，我获取每个选项卡，如果位置 (x) 与我选择的选项卡不同，我将选择的属性设置为 false。

for(int x = 0;x<3;x++) {
            ViewGroup tabView = (ViewGroup) tablayoutView.getChildAt(x);

            for (int i = 0; i < tabView.getChildCount(); i++) {
                View child = tabView.getChildAt(i);
                if (child instanceof TextView) {
                    ((TextView) child).setTypeface(tfGothamRoundedMedium, Typeface.NORMAL);
                    if ( x != position  ) {
                        child.setSelected(false);
                    }
                }
            }
        }

TabLayout 仅在滚动时更改颜色文本，单击时不更改

TabLayout only change color text when do scroll, not when click

android

android-viewpager

android-tablayout