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

刚刚解决了这个问题。您需要在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 2

对所有人保密。

我花了很多时间来解决这个问题，我希望这可以帮助别人：

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

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

此方法更恰当地命名为TabLayout.Tab.addCustomView(View)

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

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（在布局 /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（在可绘制对象 /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是可绘制文件夹中的图像。

=>工作：主要的魔力位于文件change_checked.xml内，在文件内，我们为选定状态和未选定状态编写代码，因此，在选择制表符时，它将自动更改图标，而对于未选定状态则相同。

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

4 个答案: