仅带有图标的Tablayout

Question

仅带有图标的Tablayout

70

我正在使用设计支持来创建选项卡，同时也在使用ViewPager用于实现可滑动的选项卡。

现在，我不知道如何在选项卡中仅使用图标而不是文本。我尝试了解但没有成功。

我的代码：

Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    viewPager = (ViewPager) findViewById(R.id.pager);
    setupViewPager(viewPager);
    setupTablayout();
}

private void setupTablayout() {
    tabLayout = (TabLayout) findViewById(R.id.tabLayout);
    tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
    tabLayout.setupWithViewPager(viewPager);
}

class MyPagerAdapter extends FragmentPagerAdapter {

    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();

    public MyPagerAdapter(FragmentManager manager) {
        super(manager);
    }

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

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

    public void addFrag(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        mFragmentTitleList.get(position)
    }
}

private void setupViewPager(ViewPager viewPager) {
    MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
    adapter.addFrag(new frag(), "CAT");
    adapter.addFrag(new frag(), "DOG");
    adapter.addFrag(new frag(), "BIRD");
    viewPager.setAdapter(adapter);
}

- androGuy

尝试使用可扩展文本。在这里尝试我的答案（https://dev59.com/IYnda4cB1Zd3GeqPAISS#29535378）。如果有帮助，请投赞成票。 - Harin

13个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kamal Bunkar · Answer 1

最简单的方法是通过在TabLayout上设置图标来创建新表。下面的代码将创建两个仅带图标的选项卡。将此代码用于onCreate()方法。

 tablayout = (TabLayout) findViewById(R.id.order_tablayout);
 tablayout.addTab( tablayout.newTab().setIcon(getResources().getDrawable(R.mipmap.ic_shopping_cart_white_24dp)) );
 tablayout.addTab( tablayout.newTab().setIcon(getResources().getDrawable(R.mipmap.ic_like2_fille_white_24dp)) );

- AndrWeisR · Answer 2

使用ViewPager。这是我如何拥有一个仅带图标而没有文本的选项卡。

TabLayout tabs...

TabLayout.Tab tab = tabs.getTabAt(0);
tab.setText("");
tab.setIcon(R.drawable.yourIcon);

- michiruf · Answer 3

这可能不是所有情况下的最佳答案，但我发现它尚未解决我的问题。

在查看Android的tabLayout.setupWithViewPager（ViewPager pager）实现后，我想到了一种仅使用监听器的解决方案。

布局结构：

| LinearLayout (vertical)
|-- TabLayout (width: match_parent)
|---- TabItem (without text, just icons)
|---- TabItem
|---- ...
|-- ViewPager

两个监听器的代码：

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        pager.setCurrentItem(tab.getPosition());
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {
    }
});
pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        tabLayout.setScrollPosition(position, positionOffset, false);
    }

    @Override
    public void onPageSelected(int position) {
        TabLayout.Tab tab = tabLayout.getTabAt(position);
        if (tab != null) {
            tab.select();
        }
    }

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

请查看OnPageChangeListener.onPageScrolled内的tabLayout.setScrollPosition调用，以获得在滚动时更或少良好移动指示器的效果。

如果TabLayout的宽度未设置为match_parent（或必须可以滚动），则可能无法正常工作。