1 导入包
29以前：
implementation 'com.android.support:design:28.0.0'
29及以后(使用androidx)：
implementation 'com.google.android.material:material:1.0.0'
2 常用的布局属性
2.1 tabIndicatorFullWidth
tabIndicatorFullWidth表示Tab指示器的宽度是否满宽度，即与Tab布局一样宽度。
//指示器不与Tab的宽度相同，其宽度由Tab中的文字宽度决定
app:tabIndicatorFullWidth="false"
//指示器与Tab的宽度相同，其宽度由Tab的宽度决定，默认为true
app:tabIndicatorFullWidth="true"
app:tabIndicatorFullWidth="false"如图所示：
指示器宽度
app:tabIndicatorFullWidth="true"如图所示：
指示器宽度
2.2 其它属性
| 属性 | 描述 |
|---|---|
| tabIndicatorColor | 设置tab指示器(tab的下划线)的颜色。 |
| tabIndicatorHeight | 设置tab指示器(tab的下划线)的高度。 |
| tabBackground | 设置的背景。 |
| tabContentStart | 相对起始位置tab的Y轴偏移量。 |
| tabGravity | tab的布局方式，两个值GRAVITY_CENTER （内容中心显示） 和 GRAVITY_FILL （内容尽可能充满TabLayout）。 |
| tabMaxWidth | 设置tab选项卡的最大宽度。 |
| tabMinWidth | 设置tab选项卡的最小宽度。 |
| tabMode | 设置布局中tab选项卡的行为模式，两个常量MODE_FIXED （固定的tab）和 MODE_SCROLLABLE（滑动的tab）。 |
| tabPadding | 设置tab的内边距（上下左右）。 |
| tabPaddingTop | 设置tab的上方内边距。 |
| tabPaddingBottom | 设置tab的底部内边距。 |
| tabPaddingStart | 设置tab的左侧内边距。 |
| tabPaddingEnd | 设置tab的右侧内边距。 |
| tabSelectedTextColor | 设置tab被选中时的文字颜色。 |
| tabTextColor | 设置tab默认的文字颜色。 |
| tabRippleColor | 设置水波纹背景颜色，如果设置为透明则可达到去掉水波纹的效果 |
3 TabLayout方法介绍
| 方法 | 描述 |
|---|---|
| addOnTabSelectedListener（TabLayout.OnTabSelectedListener listener） | 添加一个TabLayout.OnTabSelectedListener监听事件，当tab选择更改时，它将被调用。 |
| addTab（TabLayout.Tab tab，boolean setSelected） | 向此布局添加选项卡，并设置是否被选中 |
| addTab（TabLayout.Tab tab，int position） | 向此布局添加选项卡，并设置位置 |
| addTab（TabLayout.Tab tab） | 向此布局添加选项卡。 |
| addTab（TabLayout.Tab tab，int position，boolean setSelected） | 向此布局添加选项卡，设置位置并是否被选中 |
| addView（View child，int index） | 添加子视图到指定位置。 |
| addView（View child） | 添加子视图。 |
| addView（View child，ViewGroup.LayoutParams params） | 添加具有指定布局参数的子视图。 |
| addView（View child，int index，ViewGroup.LayoutParams params） | 添加具有指定布局参数的子视图。 |
| clearOnTabSelectedListeners（） | 删除所有以前添加的TabLayout.OnTabSelectedListeners。 |
| generateLayoutParams（AttributeSet attrs） | 根据提供的属性集返回一组新的布局参数。 |
| getSelectedTabPosition（） | 返回当前所选标签的位置。 |
| TabLayout.Tab getTabAt（int index） | 返回指定位置的tab。 |
| getTabCount（） | 返回当前在操作栏中注册的选项卡数。 |
| getTabGravity（） | 返回当前的标签tab的布局方式，GRAVITY_CENTER （内容中心显示） 和 GRAVITY_FILL （内容尽可能充满TabLayout）。 |
| getTabMode（） | 返回tab选项卡的行为模式,MODE_FIXED* （固定的tab）和 MODE_SCROLLABLE（滑动的tab）。 |
| getTabTextColors（） | 获取用于选项卡的不同状态（正常，已选择）的文本颜色。 |
| newTab () | 创建并返回一个新的TabLayout.Tab。 |
| removeAllTabs（） | 从操作栏中删除所有选项卡，并取消选择当前选项卡。 |
| removeOnTabSelectedListener（TabLayout.OnTabSelectedListener listener） | 删除以前通过addOnTabSelectedListener（OnTabSelectedListener）添加的给定TabLayout.OnTabSelectedListener，tab选中监听器。 |
| removeTab（TabLayout.Tab tab） | 从布局中删除选项卡。 |
| removeTabAt（int position） | 从布局中删除指定位置的选项卡。 |
| setOnTabSelectedListener（TabLayout.OnTabSelectedListener listener） | API方法24.0.0中已弃用此方法。使用addOnTabSelectedListener（OnTabSelectedListener）和removeOnTabSelectedListener（OnTabSelectedListener）。 |
| setScrollPosition（int position，float positionOffset，boolean updateSelectedText） | 设置选项卡的滚动位置，当标签tab显示为滚动容器（如ViewPager）的一部分时，此功能非常有用。位置int：当前滚动位置positionOffset float：表示从位置偏移的[0, 1)的值。updateSelectedText boolean：是否更新文本的选择状态。 |
| setSelectedTabIndicatorColor（int color） | 设置选中的tab的指示器（下划线）颜色。 |
| setSelectedTabIndicatorHeight（int height） | 设置选中的tab的指示器的高度。 |
| setTabGravity（int gravity） | 设置TabLayout的布局方式，GRAVITY_CENTER （内容中心显示） 和 GRAVITY_FILL （内容尽可能充满TabLayout）。 |
| setTabMode（int mode） | 设置tab选项卡的行为模式,MODE_FIXED* （固定的tab）和 MODE_SCROLLABLE（滑动的tab）。 |
| setTabTextColors（int normalColor，int selectedColor） | 设置用于选项卡的不同状态（常规，选定）的文字颜色。 |
| setTabTextColors（ColorStateList textColor） | 设置用于选项卡的不同状态（常规，选定）的文字颜色。 |
| setTabsFromPagerAdapter（PagerAdapter adapter） | API方法23.2.0中已弃用此方法。使用setupWithViewPager（ViewPager）将TabLayout与ViewPager链接在一起。当使用该方法时，当更改PagerAdapter时，TabLayout将自动更新。 |
| setupWithViewPager（ViewPager viewPager，boolean autoRefresh） | 将TabLayout与ViewPager链接在一起，当更改PagerAdapter时，TabLayout是否更新由autoRefresh决定。 |
| setupWithViewPager（ViewPager viewPager） | 将TabLayout与ViewPager链接在一起。 |
| shouldDelayChildPressedState（） | 如果此ViewGroup的子代或子孙后代按下的状态应该被延迟，则返回true。 一般来说，应该对可以滚动的容器（如List）进行此操作。 这防止当用户实际上尝试滚动内容时出现按压状态。 由于兼容性原因，默认实现返回true。 不滚动的子类通常会覆盖此方法并返回false。 |
4 两种添加Tab的方式
4.1 使用代码动态添加Tab
xml布局如下
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.google.android.material.tabs.TabLayout
android:id="@+id/dynamic_tablayout"
android:layout_width="match_parent"
android:layout_height="50dp"
app:layout_constraintTop_toTopOf="parent"
app:tabIndicatorFullWidth="false"
app:tabIndicatorColor="#1B67DB"
app:tabIndicatorHeight="5dp"
app:tabContentStart="10dp"
app:tabGravity="fill"
>
</com.google.android.material.tabs.TabLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
使用代码动态添加Tab如下：
public class DynamicTabLayoutActivity extends Activity {
private TabLayout mTabLayout;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_dynamic);
initView();
}
private void initView() {
mTabLayout = findViewById(R.id.dynamic_tablayout);
mTabLayout.addTab(mTabLayout.newTab().setText("TAB1"));
mTabLayout.addTab(mTabLayout.newTab().setText("TAB2TAB2TAB2"));
mTabLayout.addTab(mTabLayout.newTab().setText("TAB3"));
mTabLayout.addTab(mTabLayout.newTab().setText("TAB4"));
}
}
4.2 静态添加Tab
xml布局：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.tabs.TabLayout
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabIndicatorFullWidth="false"
app:tabIndicatorColor="#1B67DB"
app:tabIndicatorHeight="5dp"
app:tabContentStart="10dp"
app:tabRippleColor="#C52C2C"
app:tabGravity="fill">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab1"/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab2Tab2Tab2"/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab1"/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab1"/>
</com.google.android.material.tabs.TabLayout>
</LinearLayout>
网友评论