Question

你好我有一个tabLayout，试图通过这种方法为每次滚动刷新Tabs的customViews

private void updateTabs() {
        for (int i = 0; i < 3; i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            ImageView image = new ImageView(this);
            image.setImageResource(
                    tab.isSelected() ? whiteTabIcons[i] : darkTabIcons[i]
            );
            tab.setCustomView(image);
        }
    }

但滚动时我有这个

当我使用setIcon而不是setCustomView时，这可以正常工作，但图标很小，所以我尝试使用setCustomView

活动

public class MainActivity extends AppCompatActivity {

private Toolbar mToolbar;
private TabLayout tabLayout;

private int[] darkTabIcons = {
        R.drawable.ic_tab_list_dark,
        R.drawable.ic_tab_balance_dark,
        R.drawable.ic_tab_add_dark };

private int[] whiteTabIcons = {
        R.drawable.ic_tab_list_white,
        R.drawable.ic_tab_balance_white,
        R.drawable.ic_tab_add_white };


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mToolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(mToolbar);

    SectionsPagerAdapter mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
    final AppBarLayout appBar = (AppBarLayout) findViewById(R.id.appbar);

    ViewPager viewPager = (ViewPager) findViewById(R.id.container);
    tabLayout = (TabLayout) findViewById(R.id.tab_layout);


    viewPager.setAdapter(mSectionsPagerAdapter);
    tabLayout.setupWithViewPager(viewPager);
    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            appBar.setExpanded(true, true);
            updateTabs();
        }

        @Override
        public void onPageScrollStateChanged(int state) {
        }
    });
}

public class SectionsPagerAdapter extends FragmentPagerAdapter {

    public SectionsPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        Fragment fragment = null;
        switch (position) {
            case 0 :
                fragment =  MoneyTransferListFragment.newInstance();
                break;
            case 1 :
                fragment =  MainFragment.newInstance();
                break;
            case 2 :
                fragment =  MoneyTransferFragment.newInstance();
                break;
        }
        return fragment;
    }

    @Override
    public int getCount() {
        return 3;
    }
}

private void updateTabs() {
    for (int i = 0; i < 3; i++) {
        TabLayout.Tab tab = tabLayout.getTabAt(i);
        ImageView image = new ImageView(this);
        image.setImageResource(
                tab.isSelected() ? whiteTabIcons[i] : darkTabIcons[i]
        );
        tab.setCustomView(image);
    }
}

XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.lol.mycash.activities.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay">
        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="@android:color/white"
            app:tabIndicatorHeight="2.5dp"/>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

UPD：

决定是： 1）我为每个图标制作了选择器

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

2）使用选择器制作数组：

private int[] tabSelectors = {
            R.drawable.ic_tab_list_selector,
            R.drawable.ic_tab_balance_selector,
            R.drawable.ic_tab_add_selector
    };

3）重新编写init标签的方法，只使用一次

 private void initTabs() {
        for (int i = 0; i < 3; i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            ImageView image = new ImageView(this);
            image.setImageResource(tabSelectors[i]);
            tab.setCustomView(image);
        }
    }

Answer 1

您应该使用onPageSelected()：

tabLayout.getTabAt(position).setIcon(R.drawable.my_selected_icon);

如果图标太小，因为您的字段在图像的宽度和高度都设置为wrap_content，并且图像尺寸彼此不匹配

Answer 2

尝试在

之后调用updateTabs

tabLayout = (TabLayout) findViewById(R.id.tab_layout)

因为在使用选项卡之前必须初始化图标。

并使用下一代码设置图标

private void updateTabs() {
    for (int i = 0; i < 3; i++) {
        TabLayout.Tab tab = tabLayout.getTabAt(i);
        tab.setIcon(
               tab.isSelected() ? whiteTabIcons[i] : darkTabIcons[i])
    }
}

但是对于下一个更有效的用户（为init调用一次）

    private void updateTabs() {
    for (int i = 0; i < 3; i++) {
        TabLayout.Tab tab = tabLayout.getTabAt(i);
        tab.setIcon(selectorTabIcons[i]);
    }
}

创建下一个选择器：可绘制文件夹中的ic_tab_list_selector，ic_tab_balance_selector，ic_tab_add_selector，内容如下：

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

对于其他图标也创建选择器。和init数组：

private int[] selectorTabIcons = {
    R.drawable.ic_tab_list_selector,
    R.drawable.ic_tab_balance_selector,
    R.drawable.ic_tab_add_selector };

Answer 3

因为您正在使用新的ImageView并将其设置为选项卡。

ImageView image = new ImageView(this);
        image.setImageResource(
                tab.isSelected() ? whiteTabIcons[i] : darkTabIcons[i]
        );

使用view.findViewById("Id of your image")获取原始ImageView并将新资源设置为此而不是创建新的ImageView（），其中视图是标签的视图。

试试这个：

private void updateTabs() {
    for (int i = 0; i < 3; i++) {
        TabLayout.Tab tab = tabLayout.getTabAt(i);
        ImageView image = (ImageView) tab.getCustomView().findViewById(R.id.icon); // Use the id from your custom tab layout
        image.setImageResource(
                tab.isSelected() ? whiteTabIcons[i] : darkTabIcons[i]
        );
        tab.setCustomView(image);
    }

}

Tab.setCustomView（）添加新视图而不是替换它们

3 个答案: