将图标添加到 SlidingTabLayout 而不是文本
Posted
技术标签:
【中文标题】将图标添加到 SlidingTabLayout 而不是文本【英文标题】：Add Icons to SlidingTabLayout instead of Text 【发布时间】：2014-06-21 18:31:19 【问题描述】：我正在我的 android 应用程序中实现一个 SlidingTabLayout。我的查询是我想在我的滑动选项卡中实现图标而不是导航文本。我在互联网上大量搜索任何此类教程或示例，但没有找到。我还在***上搜索了一个先前的问题：Over Here - SlidingTabLayout with Icons。它提供了一些信息，但并没有真正帮助我。
要清楚。我要求我的标签只包含图标。没有文字。
由于我是整个设置的新手，如果您能发布正确的代码并附上解释，我将不胜感激。感谢您的时间和精力！
PS 我还听说过 Andreaz Stuetz 的 pagerslidingtabstrip，想知道它是否更适合我想要的东西...... p>
另外：这是我希望滑动标签的外观。看看这张图片的顶部。
编辑：现在棒棒糖（带材料设计）已经问世了。我看到很多应用程序在他们的工具栏（Android 5.0 操作栏）下方使用了一个新的“唯一图标”SLIDING-TAB-LAYOUT。他们有什么新方法来实现这个吗？再次感谢！
【问题讨论】：
查看mkyong.com/android/android-tablayout-example ***.com/questions/28125794/… 我需要它，所以我稍微更改了 SlidingTabLayout 的代码，以使其易于使用标签图标github.com/kimkevin/SlidingIconTabLayout 【参考方案1】：关键是从 PagerAdapter 的 getPageTitle(position) 方法返回 SpannableString，其中包含 ImageSpan 中的图标：
private int[] imageResId =
R.drawable.ic_tab_notifications,
R.drawable.ic_tab_weather,
R.drawable.ic_tab_calendar
;
@Override
public CharSequence getPageTitle(int position)
Drawable image = 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;
通常这样就足够了，但由 SlidingTabLayout 创建的默认选项卡会调用TextView#setAllCaps(true)，这实际上会禁用所有 ImageSpan，因此您必须改用自定义选项卡视图：
res/layout/custom_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_
android:layout_
android:textSize="12sp"
android:textStyle="bold"
android:background="?android:selectableItemBackground"
android:padding="16dp"
/>
以及您在哪里设置/绑定到您的 ViewPager：
SlidingTabLayout slidingTabLayout = (SlidingTabLayout) view.findViewById(R.id.sliding_tabs);
slidingTabLayout.setCustomTabView(R.layout.custom_tab, 0);
slidingTabLayout.setViewPager(viewPager);
（确保在setViewPager之前调用setCustomTabView）
【讨论】：
我们可以制作SlidingTabLayout，它应该填充标签的宽度并使其相等吗？
@jeremy 如何为所选标签设置不同的图像？
@VikalpPatel 使用权重作为自定义标签的宽度应该可以解决问题：将 android:layout_width="wrap_content" 替换为 android:layout_width="0dp" 和 android:layout_weight="1"
@Divya 根据位置是否为当前选择的位置来调整从 getPageTitle 返回的内容。 ViewPager.getCurrentItem() 是找出选择了哪个位置的一种方法。
@CodeLord 如果自定义选项卡大于其内容，那么使用重力属性应该可以工作：android:gravity="center"（注意这不是android:layout_gravity 属性）【参考方案2】：
我解决了同样的问题，但也解决了在选定选项卡上更改可绘制对象的问题。
为标签创建可绘制对象，具有两种状态。 first_tab_drawable.xml、second_tab_drawable.xml、third_tab_drawable.xml：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_selected" android:state_selected="true"/>
<item android:drawable="@drawable/ic_normal"/>
</selector>
创建您自己的寻呼机适配器，从 PagerAdapter 扩展：
public class MyPagerAdapter extends PagerAdapter
private int[] drawablesIds =
R.drawable.first_tab_drawable,
R.drawable.second_tab_drawable,
R.drawable.third_tab_drawable
;
//Constructor and other standard funcs...
public int getDrawableId(int position)
//Here is only example for getting tab drawables
return drawablesIds[position];
//...
SlidingTabLayout的修改代码：
private void populateTabStrip()
//Here is no more standard PagerAdapter!
final MyPagerAdapter adapter = (MyPagerAdapter) mViewPager.getAdapter();
final View.OnClickListener tabClickListener = new TabClickListener();
for (int i = 0; i < adapter.getCount(); i++)
View tabView = null;
TextView tabTitleView = null;
if (mTabViewLayoutId != 0)
// If there is a custom tab view layout id set, try and inflate it
tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip,
false);
tabTitleView = (TextView) tabView.findViewById(mTabViewTextViewId);
if (tabView == null)
tabView = createDefaultTabView(getContext());
if (tabTitleView == null && TextView.class.isInstance(tabView))
tabTitleView = (TextView) tabView;
//Set icon, that can be changeable instead setting text.
//I think the text also can setting here from getPageTitle func.
//But we interesting only in icon
tabTitleView.setCompoundDrawablesWithIntrinsicBounds(adapter.getDrawableId(i), 0, 0, 0);
//Select tab if it is current
if (mViewPager.getCurrentItem() == i)
tabView.setSelected(true);
tabView.setOnClickListener(tabClickListener);
mTabStrip.addView(tabView);
并在 InternalViewPagerListener 的 SlidingTabLayout 中制作真正选定的 TextView 标题：
@Override
public void onPageSelected(int position)
//Clear old selection and make new
for(int i = 0; i < mTabStrip.getChildCount(); i ++)
mTabStrip.getChildAt(i).setSelected(false);
mTabStrip.getChildAt(position).setSelected(true);
if (mScrollState == ViewPager.SCROLL_STATE_IDLE)
mTabStrip.onViewPagerPageChanged(position, 0f);
scrollToTab(position, 0);
if (mViewPagerPageChangeListener != null)
mViewPagerPageChangeListener.onPageSelected(position);
希望对某人有所帮助。
【讨论】：
如果选项卡的宽度占 SlidingTabLayout 宽度的 50%，您将如何使图标居中。我需要创建自定义视图吗？ 我没有居中。在我的例子中，标签从左边开始，如果占 50%，它不会填满所有宽度。 @Daniel 尝试将 android:layout_weight="1" 添加到您的自定义标签布局中。 我已经解决了。 ***.com/questions/28125794/… 无论如何谢谢！ 嗨@v1k，你的代码很完美，但是，它有一个错误。第一次，当您在选项卡之间滑动时，第一个和第二个选项卡都显示选择状态。从第二个选项卡切换到第一个选项卡后，此行为会消失。这种行为的原因是您在populateTabStrip() 中使用了tabTitleView.setSelected(true);，这导致了这种行为。如果您将其更改为tabView.setSelected(true);，那么它可以正常工作。我正在编辑您的代码以反映这一点。【参考方案3】：
如需自定义SlidingTabLayout，只需要修改populateTabStrip()方法即可：
public void populateTabStrip()
final PagerAdapter adapter = mViewPager.getAdapter();
final View.OnClickListener tabClickListener = new TabClickListener();
for (int i = 0; i < adapter.getCount(); i++)
View tabView = null;
tabView = LayoutInflater.from(getContext()).inflate(R.layout.tab_layout, mTabStrip,
false);
ImageView iconImageView = (ImageView) tabView.findViewById(R.id.tab_layout_icon);
iconImageView.setImageDrawable(getContext().getResources().getDrawable(getIconResourceArray()[i]));
tabView.setOnClickListener(tabClickListener);
mTabStrip.addView(tabView);
你的布局可能是这样的：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_
android:paddingTop="15dp"
android:layout_
android:orientation="vertical">
<ImageView
android:id="@+id/tab_layout_icon"
android:layout_
android:layout_
android:layout_gravity="center" />
</LinearLayout>
实现 getResourceArray() 方法的方式取决于您。这是我的做法：
public class IconSlidingTabLayout extends HorizontalScrollView
private Integer[] mIconResourceArray;
...
public Integer[] getIconResourceArray()
return mIconResourceArray;
public void setIconResourceArray(Integer[] mIconResourceArray)
this.mIconResourceArray = mIconResourceArray;
在活动中：
mSlidingTabLayout = (IconSlidingTabLayout) findViewById(R.id.icon_sliding_tab_layout);
Integer[] iconResourceArray = R.drawable.news_tab_icon,
R.drawable.challenges_tab_icon, R.drawable.trophies_tab_icon,
R.drawable.leaderboard_tab_icon ;
mSlidingTabLayout.setIconResourceArray(iconResourceArray);
请注意，要访问 R.layout.tab_layout*，您必须导入 yourpackage.R 而不是 android.R，因为它在 SlidingTabStrip 中是默认的。
【讨论】：
【参考方案4】：好的.. 有很多方法可以实现此更改。这是最快速和最肮脏的一个，只是为了这个想法..
为此替换方法SlidingTabLayout.populateTabStrip()..
private void populateTabStrip()
final OnClickListener tabClickListener = new TabClickListener();
View tabView = LayoutInflater.from(getContext()).inflate(R.layout.tab_notif_icon_only, mTabStrip, false);
tabView.setOnClickListener(tabClickListener);
mTabStrip.addView(tabView);
tabView = LayoutInflater.from(getContext()).inflate(R.layout.tab_weather_icon_only, mTabStrip, false);
tabView.setOnClickListener(tabClickListener);
mTabStrip.addView(tabView);
tabView = LayoutInflater.from(getContext()).inflate(R.layout.tab_calendar_icon_only, mTabStrip, false);
tabView.setOnClickListener(tabClickListener);
mTabStrip.addView(tabView);
以这种方式创建每个布局 LinearLayout > ImageView 元素，src 指向图标..
【讨论】：
嗨。你能告诉我 mtabstrip 是什么，adapter 和 onclicklistener 是干什么用的吗？ SlidingTabLayout 的原始实现的一部分.. 监听器用于向选项卡添加 onclick 功能，不需要适配器，因为您不想在选项卡中设置页面标题跨度> 【参考方案5】：您的适配器应该实现PagerSlidingTabStrip.IconTabProvider。
然后在getPageIconResId你可以返回图片资源的id：
public class ViewPagerAdapter extends FragmentPagerAdapter implements
PagerSlidingTabStrip.IconTabProvider
private static final int[] icons = R.drawable.image1, R.drawable.image2, R.drawable.image3;
@Override
public int getPageIconResId(int i)
return icons[i];
请记住，只会显示图片，不会显示文字。
【讨论】：
【参考方案6】：我知道这个帖子已经很老了，但我还是想分享我对这个问题的解决方案，因为它可能对某些人有帮助。 它工作得非常好，即使对于不同的可绘制对象，取决于选定的状态。
首先我确实在SlidingTabLayout 类中定义了两个数组（这很容易外包给另一个类）：
private int[] imageResId =
R.drawable.multi_random,
R.drawable.single_random,
R.drawable.known_person,
;
private int[] imageResSelected =
R.drawable.multi_random_selected,
R.drawable.single_random_selected,
R.drawable.known_person_selected
;
private int mOldPosition = 0;
现在我们更改SlidingTabLayout 中的populateTabStrip() 方法：
for (int i = 0; i < adapter.getCount(); i++)
View tabView = null;
ImageView tabImageView = null;
if (mTabViewLayoutId != 0) // HAS TO BE SET FOR THE MOMENT!
// If there is a custom tab view layout id set, try and inflate it
tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip,
false);
tabImageView = (ImageView) tabView.findViewById(mTabViewTextViewId);
if (tabView == null)
tabView = createDefaultTabView(getContext());
if (tabImageView == null && ImageView.class.isInstance(tabView))
tabImageView = (ImageView) tabView;
int resourceId;
if (i == mViewPager.getCurrentItem())
resourceId = imageResSelected[i];
mOldPosition = i;
else
resourceId = imageResId[i];
tabImageView.setImageResource(resourceId);
tabView.setOnClickListener(tabClickListener);
mTabStrip.addView(tabView);
为了根据选择的选项卡更新图像，我们在onPageSelected 方法中添加了一些行
// This Method is called once the transition is finished
// Change the drawable of the old one..
ImageView view = (ImageView) mTabStrip.getChildAt(mOldPosition);
view.setImageResource(imageResId[mOldPosition]);
// And now change it of the current one
view = (ImageView) mTabStrip.getChildAt(position);
view.setImageResource(imageResSelected[position]);
mOldPosition = position;
最后我们需要添加一个自定义的 Tab View：
mSlidingTabLayout.setCustomTabView(R.layout.custom_tab, 0);
喜欢这个
<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_
android:layout_
android:padding="16dp"
android:layout_weight="1"
android:src="@drawable/multi_random"
/>
这个解决方案远非完美，但可以满足我的需求。也许我可以帮助别人。
【讨论】：
如何垂直添加两个textviews【参考方案7】：我最近实现了这个名为ViewPagerAddons 的库。它包括SlidingTabLayoutColors，这正是您所需要的。只需让您的寻呼机适配器实现SlidingTabLayouColors.ImageProvider 接口，覆盖getPageImage 方法并根据页面位置返回图像资源ID。简单的。
这是库的链接（包括设置说明）：https://bitbucket.org/enthusiast94/viewpageraddons/src
【讨论】：
【参考方案8】：我按照杰里米的回答和它的工作正常。 AFAIK 没有新的方法可以做到这一点。大多数应用程序现在完全删除工具栏并添加谷歌推荐的自定义滑动标签条。
如果您有任何具体问题，请告诉我。 iv 让我的应用看起来很像您发布的屏幕截图。我觉得这次材料设计更新更侧重于启用自定义动画和效果。
【讨论】：
【参考方案9】：只需从 getPageTitle() 方法返回 null 就可以了：
@Override
public CharSequence getPageTitle(int position)
return null;
【讨论】：
【参考方案10】：查看此解决方案链接androidhive about material design tabs /viewpager
一个非常好的关于 android 解决方案的网站。希望你能找到解决办法。
【讨论】：
【参考方案11】：从 FragmentActivity 扩展您的主要活动。在我们添加选项卡时也从 ActionBar.TabListener 实现这个类
// 用于添加标签
for (String tab_name : tabs)
actionBar.addTab(actionBar.newTab().setIcon(R.drawable.drawable_id)
.setTabListener(this));
检查here。
【讨论】：
以上是关于将图标添加到 SlidingTabLayout 而不是文本的主要内容，如果未能解决你的问题，请参考以下文章