更新（解决方案）：

Question

我的Android应用中有一个TabLayout ViewPager。它的设置带有一个图标，每个标签下面都有一些文字。我现在要做的是改变所选标签的颜色，使其更加突出。图标为灰色，但我希望所选标签为绿色。为此，我为每种颜色都有一个单独的Drawable（png文件）。

它有点有用，但在每次选择/取消选择时都会向选项卡添加一个新的View，而不是更改它。这是有问题的代码（这是一个自定义Fragment类）：

private ViewPager           mViewPager;
private MyPagerAdapter      mAdapter;
private TabLayout           mTabLayout;
private int                 mCurrentItem = 0;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
    View view = inflater.inflate(R.layout.my_fragment, container, false);
    mViewPager = (ViewPager) view.findViewById(R.id.my_pager);
    mTabLayout = (TabLayout) view.findViewById(R.id.my_tablayout);
    return view;
}

@Override
public void onResume()
{
    super.onResume();
    final MyActivity myActivity = (MyActivity) getActivity();
    mCurrentItem = 0;

    mAdapter = new MyPagerAdapter(getChildFragmentManager(), myActivity);
    mViewPager.setAdapter(mAdapter);
    mViewPager.setCurrentItem(mCurrentItem);
    mTabLayout.setupWithViewPager(mViewPager);

    mTabLayout.removeAllTabs();
    mTabLayout.addTab(mTabLayout.newTab()
                .setTag(0)
                .setCustomView(R.layout.my_tablayout_tab_recipes_selected));
    mTabLayout.addTab(mTabLayout.newTab()
                .setTag(1)
                .setCustomView(R.layout.my_tablayout_tab_shopping_list));

    mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
    mTabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager){

        @Override
        public void onTabSelected(TabLayout.Tab tab)
        {
            super.onTabSelected(tab);
            if (tab.getTag() == null)
            {
                return;
            }

            switch ((TabConstants.TAGS) tab.getTag())
            {
                case 0:
                    tab.setCustomView(R.layout.my_tablayout_tab_recipes_selected);
                    break;

                case 1:
                    tab.setCustomView(R.layout.my_tablayout_tab_shopping_list_selected);
            }

            mViewPager.setCurrentItem(tab.getPosition());
            myActivity.supportInvalidateOptionsMenu(); // Invalidate Toolbar
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab)
        {
            super.onTabUnselected(tab);
            if (tab == null || tab.getTag() == null)
            {
                return;
            }

            switch ((TabConstants.TAGS) tab.getTag())
            {
                case 0:
                    tab.setCustomView(R.layout.my_tablayout_tab_recipes);
                    break;

                case 1:
                    tab.setCustomView(R.layout.my_tablayout_shopping_list);
                    break;
            }
        }
    });
}

以下是一些发生了什么的图片。右View每次都会被夸大，但已添加而不是替换之前的View。

最初：

第一个标签更改：

第二个标签更改：

更新（解决方案）：

以下是我最终用于标签的StateListDrawable示例。

绘项目：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!--  Active tab -->
    <item   android:state_selected="true"
            android:state_focused="false"
            android:state_pressed="false"
            android:drawable="@drawable/selected" />

    <!--  Inactive tab -->
    <item   android:state_selected="false"
            android:state_focused="false"
            android:state_pressed="false"
            android:drawable="@drawable/unselected" />

    <!-- Pressed tab -->
    <item   android:state_pressed="true"
            android:drawable="@drawable/selected" />

</selector>

文字颜色：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!--  Active tab -->
    <item   android:state_selected="true"
            android:state_focused="false"
            android:state_pressed="false"
            android:color="@color/my_selected_color" />

    <!--  Inactive tab -->
    <item   android:state_selected="false"
            android:state_focused="false"
            android:state_pressed="false"
            android:color="@color/my_unselected_color" />

    <!-- Pressed tab -->
    <item   android:state_pressed="true"
            android:color="@color/my_selected_color" />

</selector>

Answer 1

您应该在每个标签页中为您的图片使用StateListDrawable。

例如，假设您的my_tablayout_tab_recipes中有刀和勺图片。

您应该将xml文件指定为该图像的背景，您可以在其中决定图像的选定的和未选择的版本。

Reference

没有必要自己更改选定和未选中状态的背景图像; Android系统将为您处理。

动态更改TabLayout的自定义视图

更新（解决方案）：

1 个答案: