如何使用ViewPager2更改TabLayout选定的标签图标

Question

我使用 FragmentStateAdapter、ViewPager2 和 com.google.android.material.tabs.TabLayout，为了设置选项卡图标，我使用 com.google.android.material.tabs.TabLayoutMediator

TabLayoutMediator(
    mTabActivity.tabLayout,
    mTabActivity.viewPager,
    TabLayoutMediator.TabConfigurationStrategy { tab, position ->
        when (mTabEnums[position]) {
            TabType.TAB_CONTACT -> tab.setIcon(R.drawable.ic_tab_contact)
            TabType.TAB_GROUPS -> tab.setIcon(R.drawable.ic_tab_groups)
            TabType.TAB_MESSAGES -> tab.setIcon(R.drawable.ic_tab_message)
            TabType.TAB_MAPS -> tab.setIcon(R.drawable.ic_tab_map)
            TabType.TAB_RECENTS -> tab.setIcon(R.drawable.ic_tab_recent)
            TabType.TAB_INCALL_LIST -> tab.setIcon(R.drawable.ic_tab_contact)
            TabType.TAB_INCALL_MAPS -> tab.setIcon(R.drawable.ic_tab_map)
        }
    }
).attach() 

但是我怎么改变选定选项卡的图标呢？

我尝试过这个方法，但是mViewPager是一个ViewPager2而不是ViewPager，代码无法编译。

mTabLayout.addOnTabSelectedListener(
      new TabLayout.ViewPagerOnTabSelectedListener(mViewPager) {

         @Override
         public void onTabSelected(TabLayout.Tab tab) {
            super.onTabSelected(tab);
            int tabIconColor = ContextCompat.getColor(
                    ActivityTab.this, R.color.colorPrimary);
            tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
         }

         @Override
         public void onTabUnselected(TabLayout.Tab tab) {
            super.onTabUnselected(tab);
            int tabIconColor = ContextCompat.getColor(
                    ActivityTab.this, R.color.colorAccent);
            tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
         }

         @Override
         public void onTabReselected(TabLayout.Tab tab) {
            super.onTabReselected(tab);
         }
      }
);

- the_prole

Answer 1

这个回调函数会返回所选标签的位置。

mTabLayout.setOnTabSelectedListener(new   TabLayout.BaseOnTabSelectedListener() {
     @Override
     public void onTabSelected(TabLayout.Tab tab) {
        Log.d(TAG,"selection "+tab.getPosition());
     }

     @Override
     public void onTabUnselected(TabLayout.Tab tab) {

     }

     @Override
     public void onTabReselected(TabLayout.Tab tab) {

     }
  });

或者在 Kotlin 中。

mTabActivity.tabLayout.addOnTabSelectedListener(object :
    TabLayout.OnTabSelectedListener {
    override fun onTabSelected(tab: TabLayout.Tab) {
        when (mTabEnums[tab.position])
        {
            TabType.TAB_CONTACT -> tab.icon =
                ContextCompat.getDrawable(mTabActivity,R.drawable.ic_tab_contact_green)
        }
    }

    override fun onTabUnselected(tab: TabLayout.Tab) {
        when (mTabEnums[tab.position])
        {
            TabType.TAB_CONTACT -> tab.icon =
                ContextCompat.getDrawable(mTabActivity,R.drawable.ic_tab_contact)
        }
    }

    override fun onTabReselected(tab: TabLayout.Tab) {

    }

})

- the_prole

---

这个答案是正确的，只需要使用tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener())，因为setOnTabSelectedListener已被弃用。 - Simon

Answer 2

TabLayout.setOnTabSelectedListener() 和 TabLayout.BaseOnTabSelectedListener 已经过时。 请改用以下内容。

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

    @Override
    public void onTabSelected(@NonNull TabLayout.Tab tab) {
        // change icon here
    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
    }
});

如果你只是想改变选项卡图标的颜色，请考虑使用这个方法，而不是设置颜色过滤器：

final int color = ContextCompat.getColor(context, R.color.myColor);
DrawableCompat.setTint(tab.getIcon(), color);

- muiz6

Answer 3

您可以在布局XML中添加app:tabIconColorTint：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="?attr/colorOnSurface" android:state_selected="true" />
    <item android:alpha="0.60" android:color="?attr/colorOnSurface" />
</selector>

- the_dani

---

你确定这是图标的颜色设定为选项卡，而不是选项卡指示器的颜色吗？我使用矢量来表示图标。 - the_prole

TabLayout 没有 app:tabIconColorTint 这个 xml 属性，请使用 app:tabIconTint，它可以正常工作。 - remain4life