XML布局:
<android.support.design.widget.TabLayout
android:id="@+id/aftserop_tab"
android:layout_width="match_parent"
android:layout_height="60dp"
app:tabIndicatorColor="@android:color/holo_orange_light"
app:tabIndicatorHeight="2dp"
app:tabSelectedTextColor="@android:color/holo_blue_light"
app:tabTextAppearance="@style/TabTextSize"
app:tabTextColor="@android:color/black" />
<com.google.android.material.tabs.TabLayout
androidx的依赖包引入:com.google.android.material:material:1.0.0-rc01
app:tabIndicatorColor:标签下面移动的横线的颜色。
app:tabIndicatorHeight="0dp" 标签下面移动的横线的高度,如果不想要将它设置为0
app:tabTextColor:标签文字的颜色
app:tabSelectedTextColor :标签被选中后的文字颜色
app:tabTextAppearance="@style/TabTextSize" 字体大小
默认的Tab字体大小有点小,看起来不太舒服,当我们去修改字体大小时却发现,TabLayout居然没有提供跟TextSize相关的属性。
不过不用急,TabLayout其实提供了一个更灵活的属性app:tabTextAppearance ,它可以修改字体的样式,从而间接修改字体的大小。
我们在style.xml中自定义一个样式,继承于TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse ,
在属性android:textSize中设置我们想要的字体大小,这里我设为20sp。
<!--TabLayout的字体大小-->
<style name="TabTextSize" parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse">
<item name="android:textSize">20sp</item>
</style>
一种只是普通添加tabLayout的文字:
// tabLayout.addTab(tabLayout.newTab().setText("未审批"));
// tabLayout.addTab(tabLayout.newTab().setText("已审批"));
第二种TabLayout+ViewPage建立关联
public class AftSerOpActivity extends BaseActivity implements View.OnClickListener {
private TabLayout tabLayout;
private ViewPager vp;
private List<Fragment> fragments = new ArrayList<>();
private String[] tabs = {"未审批", "已审批"};
public static String approval = "approval";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_aft_ser_op);
baseapp.addActivity(this);
initView();
initTab();
}
private void initTab() {
tabLayout.setTabMode(TabLayout.MODE_FIXED);
TabLayout.MODE_FIXED :当Tab较少,且占满整个屏幕时可以使用这种模式;
TabLayout.MODE_SCROLLABLE :当Tab数量较多,屏幕宽度不够时使用该模式,整个TabLayout是可以左右滑动的。
/*如果tabLayout和viewpager绑定的,以下这种方式无法显示title.
这个原因是因为tablayout与viewpager建立关联关系的时候,已经把tab全部remove了
要在FragmentPagerAdapter中的getPageTitle设置*/
// tabLayout.addTab(tabLayout.newTab().setText("未审批"));
// tabLayout.addTab(tabLayout.newTab().setText("已审批"));
fragments.add(new AftSerOpFragment(false));
fragments.add(new AftSerOpFragment(true));
vp.setAdapter(new TabAdapter(getSupportFragmentManager()));
Bundle extras = getIntent().getExtras();
if (extras != null) {
vp.setCurrentItem(extras.getInt(approval));
}
tabLayout.setupWithViewPager(vp);
}
private void initView() {
findViewById(R.id.aftserop).setOnClickListener(this);
findViewById(R.id.aftserop_add).setOnClickListener(this);
tabLayout = (TabLayout) findViewById(R.id.aftserop_tab);
vp = (ViewPager) findViewById(R.id.aftserop_vp);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.aftserop:
baseapp.finishActivity();
break;
case R.id.aftserop_add:
SmallUtil.getActivity(AftSerOpActivity.this, OpNew.class);
break;
}
}
/*TabLayout改变状态的监听器*/
TabLayout.OnTabSelectedListener tabSelect = new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
vp.setCurrentItem(tab.getPosition());
Logs.v("滑动选择:" + tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
};
/* Fragment适配器*/
class TabAdapter extends FragmentPagerAdapter {
public TabAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
//显示标签上的文字
@Override
public CharSequence getPageTitle(int position) {
return tabs[position];
}
}
}
效果图