Android：在更改选项卡时更改 tabLayout 中选项卡的 customView

Question

切换选项卡时，我正在尝试更改 tabLayout 选项卡中图标的颜色。我正在使用setCustomView(view) 来设置这样的图标。

    View view = inflater.inflate(R.layout.layout_icon, null);
    view.findViewById(R.id.icon).setBackgroundResource(R.drawable.apple);

    TabLayout tabLayout = (TabLayout) rootView.findViewById(R.id.tab_layout);
    tabLayout.addTab(tabLayout.newTab().setCustomView(view));

当一个标签被选中时，我想改变它的图标颜色，但我不知道怎么做。如果我只是简单的在setCustomView(view)标签里面再onTabSelected标签里面出现两个不同颜色的图标，那就是原来的customView没有去掉。如何删除自定义视图？或者实现这一目标的方法是什么？有人可以帮忙吗。提前致谢！！

Answer 1

提醒所有人。

我在这个问题上花了很多时间，我希望这对某人有所帮助：

TabLayout.Tab.setCustomView(View) 方法的工作原理是向自定义视图添加更多引用，而不是顾名思义，通过为一个自定义视图设置单个引用。

你会认为如果你调用这个方法两次，第一个引用会被第二个覆盖。但是，相反，它会将另一个视图附加到旧视图上方的选项卡上。您将无法看到它，因为标签不够高，但它就在那里。

这个方法更贴切地命名为TabLayout.Tab.addCustomView(View)

在此布局中使用自定义视图时请记住这一点。如果由于某种原因您最终调用了该方法两次，那么当您调用 tab.getCustomView().findViewById(id) 时，您将收到与您期望的不同的引用。

Answer 2

刚刚解决了这个问题。您需要在 CustomView 中获取对 ImageView 的引用。然后我在 OnTabSelectedListener 中设置/取消设置颜色如下：

@Override
public void onTabSelected(TabLayout.Tab tab)
{
    int tabIconColor = ContextCompat.getColor(getContext(), R.color.colorAccent);
    ImageView imageView = (ImageView)tab.getCustomView().findViewById(R.id.tab_icon);
    imageView.getBackground().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
}

@Override
public void onTabUnselected(TabLayout.Tab tab)
{
    int tabIconColor = ContextCompat.getColor(getContext(), R.color.white_color);
    ImageView imageView = (ImageView)tab.getCustomView().findViewById(R.id.tab_icon);
    imageView.getBackground().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
}

Answer 3

如果你有两个不同颜色的不同图标，你可以这样做。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tab_background_selected" android:state_selected="true" />
    <item android:drawable="@drawable/tab_background_unselected" android:state_selected="false" android:state_focused="false" android:state_pressed="false" />
</selector>

Answer 4

用于在 Tablayout 中设置自定义视图 =>

注意：如果设置了.setCustomView(...)，那么之后就不能再改变了，所以如果你想改变customview里面的图标，你需要做以下事情=>

YourActvity.java 代码

    ...
    ...
    tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);

    tabLayout.getTabAt(0).setCustomView(R.layout.tabtitle);
    tabLayout.getTabAt(1).setCustomView(R.layout.tabtitle_sel);
    ...
    ...

tabtitle.xml（在layout/tabtitle.xml中创建）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
    android:id="@+id/title_image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/change_checked"/>
</LinearLayout>

change_checked.xml（在drawable/tabtitle.xml中创建）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_photo_selected" android:state_selected="true" />
<item android:drawable="@drawable/ic_photo_unselected" android:state_selected="false" 
android:state_focused="false" android:state_pressed="false" />
</selector>

ic_photo_selected & ic_photo_unselected 是drawable文件夹里面的图片。

=>工作：主要魔法在这个文件中change_checked.xml 在这个文件中，我们为选中状态和未选中状态编写代码，所以当标签被选中时，它会自动改变图标和未选中状态相同。