动态更改 TabLayout 的自定义视图

Question

我的 Android 应用程序中有一个 TabLayout 和一个 ViewPager。它设置有一个图标，每个选项卡下面都有一些文本。我现在要做的是更改所选选项卡的颜色，使其更加突出。图标是灰色的，但我希望选定的选项卡是绿色的。为此，我为每种颜色准备了一个单独的 Drawable（png 文件）。

它有点管用，但它添加一个新的 View 到每个 select/unselect 的选项卡而不是更改它。这是有问题的代码（这是自定义 Fragment class）：

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 的自定义视图

Dynamically change custom Views of TabLayout

android

android-viewpager

android-tablayout

更新（解决方案）：