android中tablayout中图标颜色设置的更改方法

Question

我正在尝试使用上面的文本和图标实现 tabslayout。 想要的output是这个

但我得到这个 output

所有这些图标都改变了颜色，我正在以编程方式设置标题和图标。 代码：

class HomePage : BaseActivity() {

private lateinit var binding: ActivityHomePageBinding
private lateinit var viewpager: ViewPager2

private val fragmentList = arrayListOf(FoodFragment(),ExerciseFragment(),MedicineFragment(),MoodFragment(),NotesFragment())
private val tabTitles = arrayListOf("Food","Exercise","Medicine","Mood","Notes")
private val tabIcons = arrayListOf(R.drawable.ic_food,R.drawable.ic_exercise,R.drawable.ic_medicine,R.drawable.ic_mood,R.drawable.ic_notes)

private lateinit var customPagerAdapter: CustomPagerAdapter
private lateinit var tablayout: TabLayout

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = DataBindingUtil.setContentView(this, R.layout.activity_home_page)
    initUI()
}

private fun initUI(){

    val bottomSheetDialog = BottomSheetDialog(this)
    val bottomSheetView = LayoutInflater.from(this).inflate(R.layout.bottom_modal_sheet,
        findViewById<ConstraintLayout>(R.id.BMS)
    )
    bottomSheetDialog.setContentView(bottomSheetView)

    viewpager = bottomSheetView.findViewById(R.id.BMS_viewpager)
    tablayout = bottomSheetView.findViewById(R.id.BMS_tab_layout)

    customPagerAdapter = CustomPagerAdapter(fragmentList,this)
    viewpager.adapter = customPagerAdapter

    TabLayoutMediator(tablayout, viewpager) { tab, position ->
        tab.text = tabTitles[position]
        tab.setIcon(tabIcons[position])
    }.attach()

    binding.AHPButton.setOnClickListener {
        bottomSheetDialog.show()
    }

}

如果有人帮助我获得即时设置图标的原始颜色，我将不胜感激。

另外如何更改图标大小？

编辑 1：该图标在 imageview 中运行良好，由于某种原因在 tabsitem 中显示为灰色。 这些图标是 svg 个文件。 这与我面临的问题有什么关系吗？ 添加图像以供参考。

Answer 1

好的，所以在 xml 文件的 tabslayout 中，我设置了app:tabIconTint="@null" ，它正确地显示了图标。

Answer 2

您可以使用tabSelectListener更改文本和图标。 在onTabSelected中，您将获得选定的选项卡，在onTabUnselected中，您将获得未选定的选项卡。 您可以有 2 个列表，一个包含选定 state 的可绘制对象，另一个包含未选定的 state。

private val tabIconsSelected = arrayListOf(R.drawable.ic_food_sel,R.drawable.ic_exercise_sel,R.drawable.ic_medicine_sel,R.drawable.ic_mood_sel,R.drawable.ic_notes_sel)
private val tabIconsUnselected = arrayListOf(R.drawable.ic_food_unsel,R.drawable.ic_exercise_unsel,R.drawable.ic_medicine_unsel,R.drawable.ic_mood_unsel,R.drawable.ic_notes_unsel)

 tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
                @Override
                public void onTabSelected(TabLayout.Tab tab) {
                    tab.setIcon(tabIconsSelected[tab.getPosition()]);
                }
    
                @Override
                public void onTabUnselected(TabLayout.Tab tab) {
                    tab.setIcon(tabIconsUnselected[tab.getPosition()]);
                }
    
                @Override
                public void onTabReselected(TabLayout.Tab tab) {
    
                }
            });

第二种方法可以通过在 xml 文件中声明selected和unselected的 state 来使用。 让我们将此 xml 命名为custom_food_selector.xml 。

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

添加自定义选项卡选择器可绘制作为 tabItem 的图标。

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/footer"
        app:tabIndicatorColor="@color/female_colour">

        <android.support.design.widget.TabItem
            android:id="@+id/tab_home"
            android:layout_width="@dimen/_25dp"
            android:layout_height="@dimen/_25dp"
            android:padding="@dimen/_4dp"
            android:icon="@drawable/custom_food_selector"
            />
 </android.support.design.widget.TabLayout>