Tablayout只有图标

我正在使用devise支持来创build选项卡。 我也使用ViewPager作为swipable选项卡。

现在,我不知道如何使用图标,而不是标签中的文本。 我试图找出,但没有得到任何成功。

我的代码:

 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); } 

一种方法是在TabLayout.setupWithViewPager()方法之后设置图标。

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

下面的链接中显示的教程应该涵盖你想要的。 https://github.com/codepath/android_guides/wiki/Google-Play-Style-Tabs-using-TabLayout#add-icons-to-tablayout

我复制下面的相关部分。

将图标添加到TabLayout

目前,TabLayout类不提供一个干净的抽象模型,允许您的选项卡中的图标。 有很多发布的解决方法,其中之一是从您的​​PagerAdapter的getPageTitle(position)方法返回一个SpannableString(包含ImageSpan中的图标),如以下代码片段所示:

 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; } 

默认情况下,由TabLayout创build的选项卡将textAllCaps属性设置为true,从而防止呈现ImageSpans。 您可以通过更改tabTextAppearance属性来覆盖此行为。

  <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout"> <item name="tabTextAppearance">@style/MyCustomTextAppearance</item> </style> <style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab"> <item name="textAllCaps">false</item> </style> 

在新版本的TabLayout ,谷歌添加了TabItem ,它可以轻松地通过你的XML添加以下代码的图标:

 <android.support.design.widget.TabLayout app:tabTextColor="@color/gray" app:tabMode="fixed" app:tabBackground="@color/red" app:tabIndicatorHeight="4dp" app:tabIndicatorColor="@color/purple" app:tabPadding="2dp" app:tabSelectedTextColor="@color/white" app:tabMinWidth="64dp" android:layout_height="wrap_content" android:layout_width="match_parent"> <!--add height and width to TabItem --> <android.support.design.widget.TabItem android:text="@string/tab_text"/> <android.support.design.widget.TabItem android:icon="@drawable/ic_android"/> </android.support.design.widget.TabLayout> 

在这里看到更多。

尝试这个

  public class GlobalActivity extends AppCompatActivity { Toolbar toolbar; ViewPager viewPager; TabLayout tabLayout; ViewPagerAdapter adapter; private int[] tabIcons = { R.drawable.home_ic, R.drawable.biz_ic, R.drawable.network_ic, R.drawable.offers_ic, R.drawable.message_ic_b }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_global_hub); tab(); } public void tab(){ viewPager = (ViewPager) findViewById(R.id.viewpager); setupViewPager(viewPager); tabLayout = (TabLayout) findViewById(R.id.tablayout); tabLayout.setupWithViewPager(viewPager); setupTabIcons(); } private void setupTabIcons() { tabLayout.getTabAt(0).setIcon(tabIcons[0]); tabLayout.getTabAt(1).setIcon(tabIcons[1]); tabLayout.getTabAt(2).setIcon(tabIcons[2]); tabLayout.getTabAt(3).setIcon(tabIcons[3]); tabLayout.getTabAt(4).setIcon(tabIcons[4]); } public void setupViewPager(ViewPager viewPager){ adapter = new ViewPagerAdapter(getSupportFragmentManager()); adapter.addFrag(new GlHubFragment(),"HOME"); adapter.addFrag(new BizForumFragment(), "BIZ FORUM"); adapter.addFrag(new NetworkFragment(), "NETWORK"); adapter.addFrag(new MessagesFragment(), "MESSAGEs"); adapter.addFrag(new OfferFragmentActivity(), "OFFER"); viewPager.setAdapter(adapter); } public class ViewPagerAdapter extends FragmentPagerAdapter{ private final List<Fragment> mfragmentlist =new ArrayList<>(); private final List<String> mFragmentTitleList = new ArrayList<>(); public ViewPagerAdapter(FragmentManager fm) { super(fm); } @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){ return mFragmentTitleList.get(position); } } } 

我发现使用图标的最简单的方法是使用Tablayout.Tab.setIcon(drawable)。 这也使得突出显示所选图标变得容易。 如果您想要这样做,请按照下列步骤操作。

第1步。将您的图像添加到res.mipmap文件夹。 (mipmap-mdpi,hdpi等)通过其他答案来判断,这里也可以放在res.drawable文件夹中。

第2步。设置您的TabLayout和ViewPager后,在所有选项卡上调用setIcon。 我在我的AdapterTabs中做了这个,以保持活动整洁。 所以在你的活动中这样做:

  tablayout = (TabLayout) findViewById(R.id.tab_layout); viewPager = (ViewPager) findViewById(R.id.viewPager); adapterTabs = new AdapterTabs(this, getSupportFragmentManager(), fragments, tablayout, viewPager); viewPager.setAdapter(adapterTabs); tablayout.setupWithViewPager(viewPager); adapterTabs.setTabIcons(); 

并在您的AdapterTabs,它应该扩展FragmentPagerAdapter,把你的setTabIcons()方法。

  public void setTabTitlesToIcons() { Drawable icon1 = context.getResources().getDrawable(R.mipmap.ic_1); Drawable icon2 = context.getResources().getDrawable(R.mipmap.ic_2); Drawable icon3 = context.getResources().getDrawable(R.mipmap.ic_3); Drawable icon1Hilighted = context.getResources().getDrawable(R.mipmap.ic_1_selected); Drawable icon2Hilighted = context.getResources().getDrawable(R.mipmap.ic_2_selected); Drawable icon3Hilighted = context.getResources().getDrawable(R.mipmap.ic_3_selected); icons.add(icon1); icons.add(icon2); icons.add(icon3); iconsHilighted.add(icon1Hilighted); iconsHilighted.add(icon2Hilighted); iconsHilighted.add(icon3Hilighted); for(int i = 0; i < icons.size(); i++) { if(i == 0) { //noinspection ConstantConditions tabLayout.getTabAt(i).setIcon(iconsSelected.get(i)); } else { //noinspection ConstantConditions tabLayout.getTabAt(i).setIcon(icons.get(i)); } } } 

确保存储对“图标”和“图标”两个列表的引用。 你以后需要他们。 还存储对从活动中传入的TabLayout和ViewPager的引用。

第3步。确保AdapterTabs.getPageTitle()返回null。 在这一点上,如果你运行它,你应该看到第一个图标被突出显示。

第4步。在AdapterTabs中实现ViewPager.OnPageChangeListener并将该侦听器添加到您的viewPager

  public AdapterTabs(Context context, FragmentManager fragmentManager, List<Fragment> fragments, TabLayout tabLayout, ViewPager viewPager) { super(fragmentManager); this.context = context; this.tabLayout = tabLayout; this.viewPager = viewPager; this.viewPager.addOnPageChangeListener(this); tabs.add(fragments.get(0)); tabs.add(fragments.get(1)); tabs.add(fragments.get(2)); } 

第5步。更新AdapterTabs中onPageSelectedcallback选项卡上的图标。

  @Override public void onPageSelected(int position) { for (int i = 0; i < tabs.size(); i++) { if(i == position) { //noinspection ConstantConditions tabLayout.getTabAt(i).setIcon(iconsSelected.get(i)); } else { //noinspection ConstantConditions tabLayout.getTabAt(i).setIcon(icons.get(i)); } } } 

现在,当您更改选项卡时,您应该看到正在更新的高亮图标。

TabLayout ,设置图标很简单:

getPageTitle(position)应该返回null (如果你不想显示标题)。

下一个 :

 tabLayout.getTabAt(0).setIcon(resId); tabLayout.getTabAt(1).setIcon(resId); ...... 

当使用TabLayout作为ViewPager“decor”场景时,这些方法都不是很好。 TabLayout文档这里是TabLayout和PagerAdapter的一个简单的扩展,它提供了一个简单的替代TabLayout,应该可以在任何一种情况下使用,而不需要在TabLayout类之外手动添加图标,并且可以使用PagerAdapter来获取标签信息。

 /** * Created by JDL on 1/18/2017. */ public class TabLayoutExt extends TabLayout { protected ViewPager mViewPager; public abstract static class TabLayoutViewPagerAdapter extends PagerAdapter { public TabLayoutViewPagerAdapter() { } /** * This method may be called by the TabLayout to obtain an icon drawable * to for the specified tab. This method may return null * indicating no tab icon for this page. The default implementation returns * null. * * @param position The position of the title requested * @return A drawable icon for the requested page */ public Drawable getPageIcon(Context context, int position) { return null; } } public TabLayoutExt(Context context) { super(context); } public TabLayoutExt(Context context, AttributeSet attrs) { super(context, attrs); } public TabLayoutExt(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override protected void onAttachedToWindow() { //Cover the implicit setup in TabLayout if (mViewPager == null) { final ViewParent vp = getParent(); if (vp instanceof ViewPager) { mViewPager = (ViewPager)vp; } } super.onAttachedToWindow(); } public void addTab(@NonNull Tab tab, int position, boolean setSelected) { if (mViewPager != null && mViewPager.getAdapter() instanceof TabLayoutViewPagerAdapter) { Drawable icon = ((TabLayoutViewPagerAdapter) mViewPager.getAdapter()).getPageIcon(getContext(),position); tab.setIcon(icon); } super.addTab(tab,position,setSelected); } @Override public void setupWithViewPager(@Nullable ViewPager viewPager, boolean autoRefresh) { mViewPager = viewPager; super.setupWithViewPager(viewPager, autoRefresh); } } 

所以需要做的就是扩展TabLayoutViewPagerAdapter而不是PageAdapter并且实现getPageIcon(Context,int)而不是标题。 将TabLayoutExt放在XML文件中,而不是正常的TabLayout 。 这可以扩展为进一步修改选项卡,或者用自定义视图,而不是别的。

这可能不是所有情况下的最佳答案,但我发现并没有解决我的问题。

看了一下tabLayout.setupWithViewPager(ViewPager pager) Android实现后,我想出了一个只使用监听器的解决scheme。

布局结构:

 | 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调用,以便在滚动时或多或less地移动指示符。

如果TabLayout的宽度没有设置为match_parent(或者必须是可滚动的),这可能不起作用。

问候