添加图标到SlidingTabLayout而不是文本 [英] Add Icons to SlidingTabLayout instead of Text

问题描述

我在我的Andr​​oid应用程序中实现一个SlidingTabLayout。什么我的查询是，我想实现我的滑动标签，而不是文本的导航图标。我搜索了大量互联网上的任何此类教程或样品，但没有发现。我还搜查计算器一个previous问题：看过来 - SlidingTabLayout使用图标的。这是稍微言之有物，但并没有真正帮助我。

要明确。我要求我的选项卡包含的的图标只的。没有文字。

由于我是新来这个整个设置，我AP preciate如果你发布适当的code与解释。感谢您的时间和精力！

PS 我也听说了pagerslidingtabstrip通过Andreaz Stuetz并想知道这将是更适合的事情，我要为... 的

另外：这是我想我的滑片的样子。看看这个图像的顶部。

编辑：现在LOLLIPOP（与物料设计）已经出来了。我见过的应用程序有很多使用的是新的唯一的图标滑动TAB布局低于其工具栏（ANDROID 5.0​​ ACTION-BAR）。是他们的任何新的方式来实现这个？再次感谢！的

解决方案

这里的关键是要返回SpannableString，包含在ImageSpan你的图标，从PagerAdapter的getPageTitle（位置）方法：

 私人INT [] imageResId = {
        R.drawable.ic_tab_notifications，
        R.drawable.ic_tab_weather，
        R.drawable.ic_tab_calendar
};

@覆盖
公共CharSequence的getPageTitle（INT位置）{
    绘制的图像= getResources（）getDrawable（imageResId [位置]）。
    image.setBounds（0，0，image.getIntrinsicWidth（），image.getIntrinsicHeight（））;
    SpannableString SB =新SpannableString（）;
    ImageSpan imageSpan =新ImageSpan（图像，ImageSpan.ALIGN_BOTTOM）;
    sb.setSpan（imageSpan，0，1，Spannable.SPAN_EXCLUSIVE_EXCLUSIVE）;
    返回某人;
}
 

通常这是就足够了，但SlidingTabLayout创建的默认选项卡中进行调用以的TextView＃setAllCaps（真）有效地禁止所有ImageSpans，所以你会必须使用自定义选项卡视图，而不是：

RES /布局/ custom_tab.xml

 ＆LT; XML版本=1.0编码=UTF-8＆GT？;
＆LT; TextView中的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
    机器人：layout_width =WRAP_CONTENT
    机器人：layout_height =WRAP_CONTENT
    机器人：TEXTSIZE =12SP
    机器人：TEXTSTYLE =黑体
    机器人：背景=？机器人：selectableItemBackground
    机器人：填充=16DP
    /＆GT;
 

和在任何你安装/绑定到你的ViewPager：

  SlidingTabLayout slidingTabLayout =（SlidingTabLayout）view.findViewById（R.id.sliding_tabs）;
slidingTabLayout.setCustomTabView（R.layout.custom_tab，0）;
slidingTabLayout.setViewPager（viewPager）;
 

（请确保调用 setCustomTabView 在 setViewPager ）

I'm implementing a SlidingTabLayout in my android application. What my query is that I'd like to implement icons in my Sliding Tabs instead of texts for navigation. I searched heavily on the internet for any such tutorial or sample but found none. I also searched a previous question on stackoverflow: Over Here - SlidingTabLayout with Icons. It was slightly informative but didn't really help me out.

To be clear. I require my tabs to consist of icons only. No text.

As I am new to this whole setup, I'd appreciate if you'd post proper code with an explanation. Thank you for your time and effort!

P.S. I also heard about the pagerslidingtabstrip by Andreaz Stuetz and wondered if that would be more suitable for the type of thing I'm going for...

Also: Here is what I would like my sliding tabs to look like. Check out the top of this image.

EDIT : NOW THAT LOLLIPOP (WITH MATERIAL DESIGN) HAS COME OUT. I HAVE SEEN A LOT OF APPS USING A NEW "ONLY ICON" SLIDING-TAB-LAYOUT BELOW THEIR TOOLBAR (ANDROID 5.0 ACTION-BAR). IS THEIR ANY NEW WAY TO IMPLEMENT THIS?? THANKS ONCE AGAIN!

解决方案

The key to this is to return a SpannableString, containing your icon in an ImageSpan, from your PagerAdapter's getPageTitle(position) method:

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

Normally this be would be enough, but the default tab created by SlidingTabLayout makes a call to TextView#setAllCaps(true) which effectively disables all ImageSpans, so you'll have to use a custom tab view instead:

res/layout/custom_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="12sp"
    android:textStyle="bold"
    android:background="?android:selectableItemBackground"
    android:padding="16dp"
    />

and where ever you setup/bind to your ViewPager:

SlidingTabLayout slidingTabLayout = (SlidingTabLayout) view.findViewById(R.id.sliding_tabs);
slidingTabLayout.setCustomTabView(R.layout.custom_tab, 0);
slidingTabLayout.setViewPager(viewPager);

(make sure to call setCustomTabView before setViewPager)

这篇关于添加图标到SlidingTabLayout而不是文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！