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（或者必须是可滚动的），这可能不起作用。
问候
