将图标添加到SlidingTabLayout而不是Text

Question

我正在我的Android应用程序中实现SlidingTabLayout.我的疑问是,我想在我的滑动标签中实现图标而不是导航文本.我在互联网上搜索任何这样的教程或样本,但没有找到.我还在stackoverflow上搜索了上一个问题:Over Here - SlidingTabLayout with Icons.它提供了一些信息,但并没有真正帮助我.

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

由于我是这个整个设置的新手,如果您发布正确的代码并附上解释,我将不胜感激.感谢您的时间和精力!

PS 我也听说过Andreaz Stuetz的pagerslidingtabstrip,并想知道这是否更适合我想要的东西......

另外:这是我希望我的滑动标签看起来像.查看此图片的顶部.

编辑:现在LOLLIPOP(与材料设计)已经出来.我使用了一个新的"只有图标"在SLIDING-TAB-LAYOUT他们的工具栏下面看到了很多应用程序(ANDROID 5.0 ACTION-BAR).是他们实现这个的新方法吗？再次感谢!

Answer 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)它来有效地禁用所有ImageSpans,因此您必须使用自定义选项卡视图:

RES /布局/ 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"
    />

以及在哪里设置/绑定到ViewPager:

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

(请确保调用setCustomTabView之前setViewPager)

Answer 2

我解决了同样的问题,但也改变了所选标签上的drawable.

使用两种状态为标签创建drawable.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);
        }
    }

希望它对某人有所帮助.

Answer 3

从 FragmentActivity 扩展您的主要活动。当我们添加选项卡时，还要从 ActionBar.TabListener 实现此类

// 用于添加选项卡

for (String tab_name : tabs) {
actionBar.addTab(actionBar.newTab().setIcon(R.drawable.drawable_id)
.setTabListener(this));
}

检查这里。