android - 选择时更改 TabLayout 中 Tab 上的图像

Question

我正在使用 Design TabLayout，

<android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabBackground="@color/ColorPrimary"
            app:tabIndicatorColor="@color/orange"
            app:tabIndicatorHeight="3dp"
            />

我已将自定义 View 添加到选项卡

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@null">

    <ImageView
        android:id="@+id/imgTab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/tab_image"
        android:layout_centerHorizontal="true"
        android:focusable="true"
        android:focusableInTouchMode="true"/>

    <TextView
        android:id="@+id/tabTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/imgTab"
        android:text="Home"
        android:background="@null"
        android:layout_centerHorizontal="true"
        android:textColor="@color/selector_tab_text"/>
</RelativeLayout>

tab.setCustomView(view);

我想在选择选项卡时更改自定义 View 中的图像。尝试在 imageview 上使用 Selector 它不起作用。我无法在运行时将 View 分配给 Tab，它只包含 setCustomView 方法。如何实现？

Answer 1

将 setOnTabSelectedListener 添加到 tabLayout 对象

i named mine navigation

navigation.setOnTabSelectedListener(
            new TabLayout.ViewPagerOnTabSelectedListener(mainView) {

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

                    // 1. get the custom View you've added
                    View tabView = tab.getCustomView();

                    // get inflated children Views the icon and the label by their id
                    TextView tab_label = (TextView) tabView.findViewById(R.id.nav_label);
                    ImageView tab_icon = (ImageView) tabView.findViewById(R.id.nav_icon);

                    // change the label color, by getting the color resource value
                    tab_label.setTextColor(getResources().getColor(R.color.active_color));
                    // change the image Resource
                    // i defined all icons in an array ordered in order of tabs appearances
                    // call tab.getPosition() to get active tab index.
                    tab_icon.setImageResource(navIconsActive[tab.getPosition()]);
                }

                // do as the above the opposite way to reset tab when state is changed 
                // as it not the active one any more
                @Override
                public void onTabUnselected(TabLayout.Tab tab) {
                    super.onTabUnselected(tab);
                    View tabView = tab.getCustomView();
                    TextView tab_label = (TextView) tabView.findViewById(R.id.nav_label);
                    ImageView tab_icon = (ImageView) tabView.findViewById(R.id.nav_icon);

                    // back to the black color
                    tab_label.setTextColor(getResources().getColor(R.color.dark_grey));
                    // and the icon resouce to the old black image 
                    // also via array that holds the icon resources in order 
                    // and get the one of this tab's position
                    tab_icon.setImageResource(navIcons[tab.getPosition()]);
                }

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

---

那将完美地完成工作，你可以像我自己一样垫在后面:D