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

问题描述

我正在我的 android 应用程序中实现一个 SlidingTabLayout.我的查询是我想在我的滑动选项卡中实现图标而不是用于导航的文本.我在互联网上大量搜索任何此类教程或示例，但没有找到.我还在 stackoverflow 上搜索了上一个问题:Over Here - SlidingTabLayout with Icons.它提供了一些信息，但并没有真正帮助我.

要清楚.我要求我的标签只包含图标.没有文字.

由于我是整个设置的新手，如果您能发布带有解释的正确代码，我将不胜感激.感谢您的时间和精力！

PS 我也听说过 Andreaz Stuetz 的 pagerslidingtabstrip 并想知道它是否更适合我想要的类型......

另外:这是我希望我的滑动标签的外观.看看这张图片的顶部.

现在棒棒糖(带材料设计)已经出来了.我已经看到很多应用程序在其工具栏(Android 5.0 操作栏)下方使用新的唯一图标"SLIDING-TAB-LAYOUT.他们有什么新的实现方式吗??再次感谢！

解决方案

关键是从 PagerAdapter 的 getPageTitle(position) 方法返回一个 SpannableString，在 ImageSpan 中包含您的图标:

private int[] imageResId = {R.drawable.ic_tab_notifications，R.drawable.ic_tab_weather，R.drawable.ic_tab_calendar};@覆盖公共 CharSequence getPageTitle(int position) {可绘制图像 = 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);返回某人;}

通常这就足够了，但是由 SlidingTabLayout 创建的默认选项卡会调用 TextView#setAllCaps(true) 这有效地禁用所有 ImageSpans，因此您必须使用自定义选项卡改为查看:

res/layout/custom_tab.xml

以及您在何处设置/绑定到 ViewPager:

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

(确保在setViewPager之前调用setCustomTabView)

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屋！