TabLayout 中的图标

Question

我有一个简单的 AppCompatActivity 和一个简单的 Toolbar (android.support.v7.widget.Toolbar)，一个设计库 TabLayout 和一个 ViewPager.

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

我的代码

MainActivity

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() 实例化 Tab 只有 ViewPager.Adapter 提供的标题。当然，您可以将此方法重写为如下内容：

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，否则它将调用默认实现。

Answer 2

您应该启动并在 PagerAdapter 中添加图标。

private int[] imageResId = {
    R.drawable.ic_one,
    R.drawable.ic_two,
    R.drawable.ic_three
};

// ...

@Override
public CharSequence getPageTitle(int position) {
   // Generate title based on item position
 // return tabTitles[position];
Drawable image = context.getResources().getDrawable(imageResId[position]);
image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
SpannableString sb = new SpannableString(" ");
ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
return sb;
}

Source

Answer 3

另一种方法是不调用 setupWithViewPager()。相反，您可以按住 Tabs 的 List，并使用 PagerListener 到 select 右边的 Tab.

像这样：

private List<TabLayout.Tab> tabList;

private void initTabLayout() {
    tabList = new ArrayList<>();
    tabList.add(mTabLayout.newTab().setIcon(R.drawable.ic_fire_white));
    tabList.add(mTabLayout.newTab().setIcon(R.drawable.ic_apps_white));
    tabList.add(mTabLayout.newTab().setIcon(R.drawable.ic_account_plus_white));
    tabList.add(mTabLayout.newTab().setIcon(R.drawable.ic_help_white));
    for (TabLayout.Tab tab : tabList){
        mTabLayout.addTab(tab);
    }
    mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            tabList.get(position).select();
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

}

TabLayout 中的图标

Icons in TabLayout

android

android-tabs

android-design-library