android - TabLayout 中的图标

Question

我有一个简单的 AppCompatActivity，带有一个简单的 Toolbar (android.support.v7.widget.Toolbar)，一个 Design-Library TabLayout和一个 ViewPager。

在这种情况下，现在我有 4 个 fragment ，它们位于 viewpager 内，可以从侧面滑动。那很好用。但是，一旦我使用 mTabLayout.setupWithViewPager(mViewPager);，图标就会消失，但我可以在空白处切换，效果很好。如果我删除该行，图标再次可见，“滑动”有效，但如果我选择一个图标，则没有任何反应。

我的代码

主 Activity

public class MainActivity extends AppCompatActivity {

    private Toolbar mToolbar;
    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private ViewPagerAdapter mAdapter;


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

        initToolbar();
        initTabLayout();
        initViewPager();

        mTabLayout.setupWithViewPager(mViewPager);//Here is the code from above
        mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));

    }

    private void initToolbar() {
        mToolbar = (Toolbar) findViewById(R.id.app_bar);
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(false);

    }

    private void initTabLayout() {
        mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
        mTabLayout.addTab(mTabLayout.newTab().setIcon(R.drawable.ic_fire_white));
        mTabLayout.addTab(mTabLayout.newTab().setIcon(R.drawable.ic_apps_white));
        mTabLayout.addTab(mTabLayout.newTab().setIcon(R.drawable.ic_account_plus_white));
        mTabLayout.addTab(mTabLayout.newTab().setIcon(R.drawable.ic_help_white));

    }

    private void initViewPager() {
        mAdapter = new ViewPagerAdapter(getSupportFragmentManager(), MainActivity.this);
        mViewPager = (ViewPager) findViewById(R.id.viewPager);
        mViewPager.setAdapter(mAdapter);

    }

    //MENUE STUFF

}

//ViewPagerAdapter
class ViewPagerAdapter extends FragmentStatePagerAdapter {

    public static final int TABS_COUNT = 4;
    private Context context;

    public ViewPagerAdapter(FragmentManager fm, Context context) {
        super(fm);
        this.context = context;
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0: return new HomeFragment1();
            case 1: return new HomeFragment2();
            case 2: return new HomeFragment3();
            case 3: return new HomeFragment4();
        }
        return null;
    }

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

}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <include
        android:id="@+id/app_bar"
        layout="@layout/app_bar" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/primary"
        app:tabGravity="fill"
        app:tabMode="fixed"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

Answer 1

setupWithViewPager() 实例化只有 ViewPager.Adapter 提供的标题的 Tab。当然，您可以将此方法重写为如下内容:

public class IconicTabLayout extends TabLayout {

    private TabViewProvider mTabViewProvider;

    public interface TabViewProvider {
        Tab newTabInstance(int tabPosition);
    }

    public IconicTabLayout(Context context) {
        super(context);
    }

    public IconicTabLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public IconicTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public void setTabProvider(TabViewProvider provider){
        mTabViewProvider = provider;
    }

    @Override
    public void setupWithViewPager(ViewPager viewPager) {
        PagerAdapter adapter = viewPager.getAdapter();
        if (adapter == null) {
            throw new IllegalArgumentException("ViewPager does not have a PagerAdapter set");
        } else {
            this.setTabsFromPagerAdapter(adapter);
            viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(this));
            this.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager));
        }

    }

    @Override
    public void setTabsFromPagerAdapter(PagerAdapter adapter) {
        removeAllTabs();
        mTabViewProvider = mTabViewProvider == null && adapter instanceof TabViewProvider? (TabViewProvider)adapter : null;
  if(mTabViewProvider == null){   
        super.setTabsFromPagerAdapter(adapter);
    }else{
        for (int i = 0, count = adapter.getCount(); i < count; ++i) {
            this.addTab(mTabViewProvider.newTabInstance(i));
        }

    }
   }
}

用法:

 mIconicTabLayout.setTabProvider(new TabViewProvider() {
        @Override
        public Tab newTabInstance(int tabPosition) {
            return mIconicTabLayout.newTab().setIcon(icons[position]);
        }
    });
    mIconicTabLayout.setupWithViewPager(mViewPager);

或者

class ViewPagerAdapter extends FragmentStatePagerAdapter implements TabViewProvider{

   public void setTabLayout(TabLayout t){
      mTabLayout = t;
   }
  //...

    @Override
    public Tab newTabInstance(int position) {
                return mTabLayout.newTab().setIcon(icons[position]);
            }

}

注意:确保您首先调用 setTabProvider 方法或您的 PagerAdapter 实现 TabViewProvider，否则它将调用默认实现。