android TabLayout 属性说明

2,686 阅读1分钟
 <com.google.android.material.tabs.TabLayout
       android:id="@+id/tab_assets"
        android:layout_width="wrap_content"
        android:layout_height="@dimen/d50"
        android:background="@color/_fff_to_131"
        app:tabIndicatorColor="@color/color_176"
        app:tabIndicatorFullWidth="false"
        app:tabSelectedTextColor="@color/_333_to_fff"
        app:tabIndicatorHeight="@dimen/d2"
        app:abRippleColor="@android:color/transparent"
        app:tabTextAppearance="@style/TabTextStyle15"
        app:tabTextColor="@color/_888_to_667" />

属性说明

app:tabRippleColor="@android:color/transparent" //点击时的背景
app:tabIndicatorFullWidth="false" //属性为false(指示器线条的宽度和文字得宽度一致),默认为true (指示器的整个宽度是充满屏幕) 
app:tabMode="fixed" //用于设置tab是否可以横向滚动,可选的值有fixed(默认)、auto、scrollable(滑动)
app:tabIndicatorColor="Color"//这是属性设置指示器线条的颜色,没什么好讲的
app:tabIndicatorHeight="Height"//这个属性设置指示器的高度,如果我们不需要显示指示器,则可以通过设置tabIndicatorHeight等于0来实现
app:tabIndicatorGravity-"bottom"//这个属性可以设置指示器的显示位置,可选值有bottom(默认)、center、top、stretch。
bottom
所有的tab字体加粗并放大字号
<style name="TabLayoutStyle">
        <item name="android:textSize">15sp</item>
        <item name="android:textStyle">bold</item>
</style>

<com.google.android.material.tabs.TabLayout
        ...
        app:tabTextAppearance="@style/TabLayoutStyle"
        >

选中的tab文字字体 通过选中状态的改变来动态的设置tab样式

创建一个tab_text_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:gravity="center"
    />
   
然后在styles.xml中新建选中和未选中的style
<style name="TabLayoutTextSelected">
        <item name="android:textSize">15sp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">@color/colorAccent</item>
</style>

 <style name="TabLayoutTextUnSelected">
        <item name="android:textSize">14sp</item>
        <item name="android:textStyle">normal</item>
        <item name="android:textColor">@color/grey</item>
</style>
最后给TabLayout添加监听事件
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
	@Override
    public void onTabSelected(TabLayout.Tab tab) {
       View customView = tab.getCustomView();
         if (customView == null) {
             tab.setCustomView(R.layout.tab_text_layout);
         }
         TextView textView = tab.getCustomView().findViewById(android.R.id.text1);
         textView.setTextAppearance(TabActivity.this, R.style.TabLayoutTextSelected);
     }

     @Override
     public void onTabUnselected(TabLayout.Tab tab) {
         View customView = tab.getCustomView();
         if (customView == null) {
             tab.setCustomView(R.layout.tab_text_layout);
         }
         TextView textView = tab.getCustomView().findViewById(android.R.id.text1);
         textView.setTextAppearance(TabActivity.this, R.style.TabLayoutTextUnSelected);
     }

     @Override
     public void onTabReselected(TabLayout.Tab tab) {
     }
});