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

目录

效果：

依赖：

代码方式：

XML方式：

关联ViewPager：

常用属性：

所有属性：

高级用法：

设置图标

添加监听

默认选中或指定选中

文字样式

下划线宽度等同文字

下划线样式

Github：

效果：官网是这样介绍的：

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

依赖：代码语言：javascript复制implementation 'com.google.android.material:material:1.2.1'代码方式：代码语言：javascript复制TabLayout tabLayout = ...;

tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));

tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));

tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));XML方式：代码语言：javascript复制

android:layout_height="wrap_content"

android:layout_width="match_parent">

android:text="@string/tab_text"/>

android:icon="@drawable/ic_android"/>

关联ViewPager：代码语言：javascript复制

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:id="@+id/view_pager"

android:layout_width="match_parent"

android:layout_height="wrap_content"/>Java代码：

代码语言：javascript复制mTabLayout = (TabLayout) findViewById(R.id.tab_layout);

mViewPager = (ViewPager) findViewById(R.id.view_pager);代码语言：javascript复制//设置adapter

mViewPager.setAdapter(new SimpleFragmentPagerAdapter(getSupportFragmentManager()));

//关联viewpager

mTabLayout.setupWithViewPager(mViewPager);代码语言：javascript复制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 指示器的高度，去掉指示器的话直接设置0dpapp:tabMode="fixed" 显示的模式，fixed表示平分显示，scrollable滑动显示app:tabSelectedTextColor="@color/black" 选中文字颜色app:tabTextColor="@color/gray" 未选中文字颜色app:tabMinWidth="50dp" 最小宽度，可以控制tab的宽度，包括指示器的宽度app:tabMaxWidth="100dp" 最大宽度所有属性：高级用法：设置图标代码语言：javascript复制mTabLayout.getTabAt(0).setIcon(R.mipmap.ic_launcher);添加监听代码语言：javascript复制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) {

//再次选中

}

});

默认选中或指定选中代码语言：javascript复制mTabLayout.getTabAt(position).select();

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

代码语言：javascript复制mViewPager.setCurrentItem(position);文字大小、样式代码语言：javascript复制app:tabTextAppearance="@style/MyTabLayout"代码语言：javascript复制

代码语言：javascript复制textAllCaps 设置大小写下划线宽度等同文字代码语言：javascript复制app:tabIndicatorFullWidth="false"下划线样式代码语言：javascript复制app:tabIndicator="@drawable/shape_tab_indicator"代码语言：javascript复制

android:width="15dp"

android:height="5dp"

android:gravity="center">

宽度、高度、圆角等

Github：https://github.com/yechaoa/MaterialDesign