TabLayout.Tab设置文字+icon

TabLayout.Tab设置文字+icon

字数355  阅读537  评论0  喜欢0

---

TabLayout是Google新出的一个控件，可以通过以下方式添加TabLayout.Tab。

mTabLayout.addTab(mTabLayout.newTab().setText("Tab1"));
mTabLayout.addTab(mTabLayout.newTab().setText("Tab2"));

可如果Tab中既有文字，又有icon，且icon需要Tab的状态而改变，就比较麻烦了。我们可以使用SpannableString结合ImageSpan来实现。

    /**
     * 获取第三个tab的内容，其本质是把文字与icon结合在一起
     *
     * @param title 第三个tab栏需要显示的内容
     * @return
     */
    public CharSequence getThirdTabTitle(String title) {
        Drawable image = getResources().getDrawable(R.drawable.bg_down_arrow);
        image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
        // Replace blank spaces with image icon
        SpannableString sb = new SpannableString(title + "   ");
        ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
        sb.setSpan(imageSpan, title.length(), title.length() + 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        return sb;
    }

这样可以获取Tab需要显示的文本内容，进而通过setText (CharSequence text)方法设置显示内容。
或者根据不同的点击状态，直接设置Tab

    /**
     * 设置第三个tab的内容
     *
     * @param isTabSelected 第三个tab是否被点击
     */
    public void setThirdTab(boolean isTabSelected) {
        String title = "";
        //根据此时的tradingType来设置第三个tab栏的文字
        if (tradingType == -1) {
            title = "分类";
        } else {
            title = content[tradingType];
        }
        Drawable image;
        //根据第三个tab栏是否点击，设置不同的箭头方向
        if (isTabSelected) {
            image = getResources().getDrawable(R.drawable.down_arrow_press);
        } else {
            image = getResources().getDrawable(R.drawable.down_arrow_normal);
        }
        image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
        // Replace blank spaces with image icon
        SpannableString sb = new SpannableString(title + "   ");
        ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
        sb.setSpan(imageSpan, title.length(), title.length() + 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        mTabLayout.getTabAt(2).setText(sb);
    }