android - Tab.setCustomView() 添加新 View 而不是替换它们

Question

你好，我有一个 tabLayout，它试图通过这种方法为每次滚动刷新选项卡的自定义 View

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

Activity

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>

更新:

决定是: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 tabs的方法，只使用一次

 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图像的宽度和高度，并且图像尺寸彼此不匹配