动态更改TabLayout自定义视图的方式

Question

动态更改TabLayout自定义视图的方式

androidandroid-viewpagerandroid-tablayout

3

我在我的Android应用程序中有一个带有ViewPager的TabLayout。每个选项卡都有一个带有一些文本的图标。现在我想要做的是更改所选选项卡的颜色，使其更加突出。这些图标是灰色的，但我希望所选选项卡是绿色的。为此，我有一个单独的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>

- Krøllebølle

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Simone Leoni · Accepted Answer

你应该在每个选项卡中使用一个StateListDrawable来设置图片。

例如，在你的my_tablayout_tab_recipes中有一张刀叉图像。

你应该为该图像分配一个xml文件作为背景，在其中你可以决定图像的选中和未选中版本。参考没有必要自己更改所选和未选状态的背景图像; 安卓系统会为你处理。