我想在Android的TabLayout中为我的标签添加图标。我尝试了图标数组和getTitle方法。我没有得到任何图标。制表符只保留标题文本,标题文本数组中的文本根本不使用。下面是我的代码:
import statements...
public class scatter extends FragmentActivity {
some variable declarations...
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_scatter);
sensorUID = getIntent().getStringExtra("sUID");
tankname = getIntent().getStringExtra("tNAME");
SCALE_C = (getIntent().getStringExtra("tSCALEC"));
SCALE_M = (getIntent().getStringExtra("tSCALEM"));
DPs = (getIntent().getStringExtra("tDP"));
UNITs = (getIntent().getStringExtra("tUNIT"));
numVar = Integer.parseInt(DPs);
final ViewPager pager = (ViewPager) findViewById(R.id.viewPager);
pager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setText("Graph"));
tabLayout.addTab(tabLayout.newTab().setText("Values"));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
pager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
pager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
private class MyPagerAdapter extends FragmentPagerAdapter {
public MyPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int pos) {
Fragment fragment;
Bundle args = new Bundle();
args.putString("senID", sensorUID);
args.putInt("numVar", numVar);
switch (pos) {
case 0:
fragment = FirstFragment.newInstance("FirstFragment, Instance 1");
break;
case 1:
fragment = SecondFragment.newInstance("SecondFragment, Instance 1");
break;
default:
fragment = FirstFragment.newInstance("FirstFragment, Instance 1");
break;
}
fragment.setArguments(args);
return fragment;
}
@Override
public int getCount() {
return 2;
}
}
}
TabLayout.Tab
有一个setIcon()
方法
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setText("Graph").setIcon(R.drawable.ic_graph));
tabLayout.addTab(tabLayout.newTab().setText("Values").setIcon(R.drawable.ic_values));
正如activesence所说,因为你可以使用自定义标签布局
在styles.xml中定义自定义样式,然后将该样式应用于TabLayout:
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">#0000FF</item>
</style>
你可以在你的TabLayout中重写这个样式:
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
style="@style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>
可以为TabLayout配置其他几个样式:
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabMaxWidth">@dimen/tab_max_width</item>
<item name="tabIndicatorColor">?attr/colorAccent</item>
<item name="tabIndicatorHeight">2dp</item>
<item name="tabPaddingStart">12dp</item>
<item name="tabPaddingEnd">12dp</item>
<item name="tabBackground">?attr/selectableItemBackground</item>
<item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item>
<item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>
<style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
<item name="android:textSize">14sp</item>
<item name="android:textColor">?android:textColorSecondary</item>
<item name="textAllCaps">true</item>
</style>
目前,TabLayout类并没有提供一个清晰的抽象模型来允许在选项卡中使用图标。有许多发布的解决方案,其中之一是返回一个SpannableString,包含你的图标在一个ImageSpan,从你的
PagerAdapter的getPageTitle(position)方法,如下面的代码片段所示:
private int[] imageResId = {
R.drawable.ic_one,
R.drawable.ic_two,
R.drawable.ic_three};
public CharSequence getPageTitle(int position) {
Drawable image = ContextCompat.getDrawable(context, 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;}
默认情况下,TabLayout创建的选项卡将textAllCaps属性设置为true,这将阻止ImageSpans被渲染。您可以通过更改tabTextAppearance属性来覆盖此行为。
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabTextAppearance">@style/MyCustomTextAppearance</item>
</style>
<style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab">
<item name="textAllCaps">false</item>
</style>
你可以添加图标和文本,如下所示@OverridegetPageTitle(int position) {//根据项目位置生成标题Drawable image = context.getResources().getDrawable(imageResId[position]);的形象。setBounds(0,0, image.getIntrinsicWidth(),
image.getIntrinsicHeight());
// Replace blank spaces with image icon
SpannableString sb = new SpannableString(" " + tabTitles[position]);
ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
return sb;
}