Question

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

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

Tab 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

这是android的一个问题，他们说已关闭，但仍然发生在我身上。

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

我发现的解决方案是将文本视图的“selected”属性设置为false。这里有一个例子，我得到每个标签，如果位置（x）与我选择的标签不同，我将selected属性设置为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);
                    }
                }
            }
        }

Answer 2

虽然它工作正常，但这似乎不是更改标签图标的正确方法。而不是覆盖 onTabSelected（）和 onTabUnselected（）方法，只需在drawable文件夹中为您的图标创建选择器。像那样：

<?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)

我相信当您单击选项卡时获得相同文本颜色的原因是您更改了选项卡的类型面，因此将覆盖用于TabView的XML中设置的颜色。

Answer 3

你可以通过在视图寻呼机上使用addOnPageChangeListener来获得效果，并且在每个位置设置tabLayout和状态栏颜色也是＆gt; 21

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) {

                }
            });

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

3 个答案: