TabLayout 和 Viewpager - 用图像替换文本

Question

所以我想要一个 tablayout 和一个 viewpager 能够滑动浏览不同的片段。

 @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_home, container, false);


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

    viewPagerAdapter = new ViewPagerAdapter(getFragmentManager());
    viewPagerAdapter.addFragments(new AFragment(), "Test1", getContext());
    viewPagerAdapter.addFragments(new BFragment(), "Test2", getContext());
    viewPagerAdapter.addFragments(new CFragment(), "Test3", getContext());

    viewPager.setAdapter(viewPagerAdapter);
    tabLayout.setupWithViewPager(viewPager);

    return view;
}

我的 ViewPagerAdapter 类看起来像这样：

public class ViewPagerAdapter extends FragmentPagerAdapter {

ArrayList<Fragment> fragments = new ArrayList<>();
ArrayList<String> tabTitles = new ArrayList<>();
Context context;

public void addFragments(Fragment fragments, String titles, Context context) {
    this.fragments.add(fragments);
    this.tabTitles.add(titles);
    this.context = context;
}

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

@Override
public Fragment getItem(int position) {
    return fragments.get(position);
}

@Override
public int getCount() {
    return fragments.size();
}

@Override
public CharSequence getPageTitle(int position) {
           return tabTitles.get(position);
}
}

因此，我设置 viewPager 的适配器包含所有信息，例如我的 tabLayout 的标题和片段的数量。对吗？

所以我现在要做的是用某些图标替换我的 tabLayout 上的标题。 我应该删除 ViewPagerAdapter 构造函数中的 String 参数并删除我的 Arraylist 还是必须传递一个空字符串？

我需要向 ViewPageAdapter 类添加什么代码才能将图标而不是字符串添加到布局中？ 我在这里找到了一个可能的解决方案：How to add page title and icon in android FragmentPagerAdapter

所以我改变了我的方法：

@Override
public CharSequence getPageTitle(int position) {

    myDrawable = ContextCompat.getDrawable(context, R.drawable.ic_mail_outline_black_24dp);
    SpannableStringBuilder sb = new SpannableStringBuilder(" Page #"+ position); // space added before text for convenience

    myDrawable.setBounds(0, 0, myDrawable.getIntrinsicWidth(), myDrawable.getIntrinsicHeight());
    ImageSpan span = new ImageSpan(myDrawable, ImageSpan.ALIGN_BASELINE);
    sb.setSpan(span, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

    return sb;
}

这将我的标题更改为 PAGE #0 #1 ...但没有将图标添加到我的 TabLayout。 谢谢！

编辑：

这也有效。还是不知道自己做错了什么

tabLayout.getTabAt(i).setIcon();

Answer 1

请将此代码用于图标

     mTabLayout.setupWithViewPager(mViewPager);
      for (int i = 0; i < mTabLayout.getTabCount(); i++) {
mTabLayout.getTabAt(i).setIcon(R.drawable.your_icon);
  }

Answer 2

请替换此代码将起作用

@覆盖 public CharSequence getPageTitle(int position) {

    myDrawable = ContextCompat.getDrawable(context, R.drawable.ic_mail_outline_black_24dp);
    title = tabTitles.get(position);
    SpannableStringBuilder sb = new SpannableStringBuilder("   " + title); // space added before text for convenience
    try {
        myDrawable.setBounds(5, 5, myDrawable.getIntrinsicWidth(), myDrawable.getIntrinsicHeight());
        ImageSpan span = new ImageSpan(myDrawable, DynamicDrawableSpan.ALIGN_BASELINE);
        sb.setSpan(span, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    } catch (Exception e) {
        // TODO: handle exception
    }

tabTitles.set(位置,sb); 返回 tabTitles.get(position);

}