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