TabLayout 使用详解（修改文字大小、下划线样式等）

yechaoa

发布于 2022-06-10 12:20:17

4.3K00

代码可运行

文章被收录于专栏：移动开发专栏移动开发专栏

运行总次数：0

代码可运行

效果：

官网是这样介绍的：

TabLayout provides a horizontal layout to display tabs. （水平方向的选项卡）

依赖：

implementation 'com.google.android.material:material:1.2.1'

代码方式：

TabLayout tabLayout = ...;
 tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
 tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
 tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

XML方式：

 <android.support.design.widget.TabLayout
         android:layout_height="wrap_content"
         android:layout_width="match_parent">

     <android.support.design.widget.TabItem
             android:text="@string/tab_text"/>

     <android.support.design.widget.TabItem
             android:icon="@drawable/ic_android"/>

 </android.support.design.widget.TabLayout>

关联ViewPager：

<android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        app:tabIndicatorColor="@color/red"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/black"
        app:tabTextColor="@color/gray"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

Java代码：

mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
        mViewPager = (ViewPager) findViewById(R.id.view_pager);

//设置adapter
        mViewPager.setAdapter(new SimpleFragmentPagerAdapter(getSupportFragmentManager()));
        //关联viewpager
        mTabLayout.setupWithViewPager(mViewPager);

private class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {

        private String tabTitles[] = new String[]{"tab1", "tab2", "tab3"};
        private Fragment[] mFragment = new Fragment[]{new Fragment1(), new Fragment2(), new Fragment3()};

        private SimpleFragmentPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragment[position];
        }

        @Override
        public int getCount() {
            return mFragment.length;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return tabTitles[position];
        }

    }

这样基本能实现大部分需求了

常用属性：

app:tabIndicatorColor="@color/red" 指示器的颜色
app:tabIndicatorHeight 指示器的高度，去掉指示器的话直接设置0dp
app:tabMode="fixed" 显示的模式，fixed表示平分显示，scrollable滑动显示
app:tabSelectedTextColor="@color/black" 选中文字颜色
app:tabTextColor="@color/gray" 未选中文字颜色
app:tabMinWidth="50dp" 最小宽度，可以控制tab的宽度，包括指示器的宽度
app:tabMaxWidth="100dp" 最大宽度

所有属性：

高级用法：

设置图标

mTabLayout.getTabAt(0).setIcon(R.mipmap.ic_launcher);

添加监听

mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //选中
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                //未选中
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                //再次选中
            }
        });

默认选中或指定选中

mTabLayout.getTabAt(position).select();

关联ViewPager的话选中Viewpager也是一样的

mViewPager.setCurrentItem(position);

文字大小、样式

app:tabTextAppearance="@style/MyTabLayout"

    <!--TabLayout字体大小-->
    <style name="MyTabLayout">
        <item name="android:textSize">20sp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textAllCaps">false</item>
    </style>

textAllCaps 设置大小写

下划线宽度等同文字

app:tabIndicatorFullWidth="false"

下划线样式

app:tabIndicator="@drawable/shape_tab_indicator"

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="15dp"
        android:height="5dp"
        android:gravity="center">
        <shape>
            <corners android:radius="5dp" />
            <!--color无效，源码用tabIndicatorColor-->
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>
</layer-list>

宽度、高度、圆角等