TabLayout基本属性全解

野性酷女 2022-03-10 08:49 406阅读 0赞

> 代码地址如下：  
> [http://www.demodashi.com/demo/14659.html][http_www.demodashi.com_demo_14659.html]

\#\#\#\#前言  
之前讲过一篇TabLayout实现顶部导航的文章，这篇文章，来详细介绍下TabLayout的一些基本使用，让大家以后更加方便的使用。

这篇文章涉及的内容有：

1.  控件库的导入
2.  TabLayout导航UI的快速实现
3.  TabLayout均分显示的问题
4.  和ViewPager的联动
5.  加入Padding
6.  Tab的宽度限制
7.  Tab的“Margin”
8.  设置TabLayout选中和没选中时字体颜色
9.  改变指示器下标的颜色
10. 改变整个TabLayout的颜色
11. 改变TabLayout内部字体大小
12. 改变指示器下标的高度
13. 添加图标
14. 默认选中某项
15. 监听事件
16. TabLayout点击事件
17. 项目截图及效果图  
    \#\#\#\#\#一.控件库的导入  
    TabLayout属于android的Design库中的控件，所以需要在使用之前在项目的app对应的buildle.gradle中导入该库：

//TabLayout
        implementation 'com.android.support:design:27.1.1'
        implementation 'com.android.support:support-v4:27.1.1'

\#\#\#\#\#二.TabLayout导航UI的快速实现  
TabLayout导航ui的实现有两种方式，xml的实现和代码的实现。  
\#\#\#\#\#\#1.1 xml实现TabLayout导航栏  
直接在TabLayout内部加入TabItem即可，

<?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.android.testdemo.main.MainActivity">
    
        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent">
    
            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab1"/>
            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab2"/>
            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab3"/>
            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab4"/>
        </android.support.design.widget.TabLayout>
    </android.support.constraint.ConstraintLayout>

\#\#\#\#\#\#1.2 代码实现TabLayout导航栏  
先声明一个导航 代码实现如下：

@BindView(R.id.tablayout)
        TabLayout mTabLayout;
    
        private String mTitles[] = {
                "上海", "头条推荐", "生活", "娱乐八卦", "体育",
                "段子", "美食", "电影", "科技", "搞笑",
                "社会", "财经", "时尚", "汽车", "军事",
                "小说", "育儿", "职场", "萌宠", "游戏",
                "健康", "动漫", "互联网"};
    
            //TabLayout的基本使用
            for(int i=0;i<4;i++){
                TabLayout.Tab tab=mTabLayout.newTab();
                tab.setTag(i);
                tab.setText(mTitles[i]);
                mTabLayout.addTab(tab);
            ｝

这两种方法的区别是xml添加的只能是固定的几个item，若item的个数超过一屏宽度则不能使用这种方式布局，而代码布局则能实现item的个数超过一屏宽度的布局。  
下面给出效果图  
![ZiSFms1IVg4eifzfYrR.gif][]

\#\#\#\#\#三.TabLayout均分显示的问题  
当导航过多的时候，使用app:tabMode="scrollable"属性，能实现滑动均分，当导航不足一屏的时候,去掉app:tabMode="scrollable"才能实现均分展示.  
xml中显示如下：

代码如下：

for(int i=0;i<4;i++){
                TabLayout.Tab tab=mTabLayout.newTab();
                tab.setTag(i);
                tab.setText(mTitles[i]);
                mTabLayout.addTab(tab);
            ｝

效果图：  
![jcZnTZ9NUishUp4vUJd.gif][]  
当item个数很多的时候，xml代码如下：

代码如下：

//TabLayout的基本使用
            for(int i=0;i<mTitles.length;i++){
                TabLayout.Tab tab=mTabLayout.newTab();
                tab.setTag(i);
                tab.setText(mTitles[i]);
                mTabLayout.addTab(tab);
            }

效果图如下：  
![oalNaDVAnHcldmkVDBh.gif][]  
\#\#\#\#\#四.和ViewPager的联动  
之前已经讲过TabLayout和ViewPager联动的知识了，有兴趣的可以了解下[TabLayout实现顶部导航(一)][TabLayout]这篇文章，这里就不做详细讲解了。

\#\#\#\#\#五.加入Padding  
设置Tab内部的子控件的Padding：

app:tabPadding="xxdp"
    app:tabPaddingTop="xxdp"
    app:tabPaddingStart="xxdp"
    app:tabPaddingEnd="xxdp"
    app:tabPaddingBottom="xxdp"

设置整个TabLayout的Padding：

app:paddingEnd="xxdp"
    app:paddingStart="xxdp"

\#\#\#\#\#六.Tab的宽度限制  
设置最大的tab宽度：

app:tabMaxWidth="xxdp"

设置最小的tab宽度：

app:tabMinWidth="xxdp"

\#\#\#\#\#七.Tab的“Margin”  
TabLayout开始位置的偏移量：

app:tabContentStart="50dp"

\#\#\#\#\#八.设置TabLayout选中和没选中时字体颜色  
设置选中和没选中的颜色可以在xml中设置，也可以在代码中设置  
\#\#\#\#\#\#8.1xml中设置

\#\#\#\#\#\#8.2代码中设置  
代码中设置的时候，xml不需要做相关设置：

代码设置如下：

//设置tab文本的没有选中（第一个参数）和选中（第二个参数）的颜色
          mTabLayout.setTabTextColors(Color.GREEN, Color.RED);

效果图如下：  
![mGS6h6wNHPwywJcZqp5.gif][]  
由于篇幅原因，后面几个知识点就不做详细介绍了，文末会给出相关知识点的效果图，具体的大家可以看demo中的介绍，这里我主要强调几点：

1.  在"12.改变指示器下标的高度"中需要注意的是：  
    当设置指示器的高度为0dp,或者设置指示器颜色透明，即可实现没有下标指示器的效果。
2.  在"15. 监听事件"中需要注意的是：  
    初始化进入的时候，监听事件的三个方法都不会执行，假设此时你的item选中的是index=0，当你点击index=1的那项时，onTabUnselected(TabLayout.Tab tab)执行的是index=0的tab，onTabSelected(TabLayout.Tab tab)会执行index=1的Tab，此时onTabReselected(TabLayout.Tab tab)不会执行。当item已经选中的是index=1的时候，你再点击这个index=1的item的时候，onTabSelected(TabLayout.Tab tab)和onTabUnselected(TabLayout.Tab tab)不会执行，onTabReselected(TabLayout.Tab tab)会执行，tab为你当前点击的tab。
3.  在""中需要注意的是：  
    其中switch-case中即是你要处理的点击事件的逻辑，这里需要注意的是

if(!mTabLayout.getTabAt(position).isSelected()){
                                return;
                            }

这段代码即表示只有当前item被选中的情况下，点击事件才生效。这个方法可以用来处理TabLayout和ViewPager联动的情况下，仍需要在item上添加处理事件的情况。

\#\#\#\#\#十七.项目截图及效果图  
\#\#\#\#\#\#17.1 项目截图  
![yS2xrS7vGogyC7bNyrt.png][]  
\#\#\#\#\#\#17.2 改变指示器下标的颜色效果图  
![Y2ZPYPqsplB4u6CsLgI.gif][]  
\#\#\#\#\#\#17.3 改变整个TabLayout的颜色效果图  
![gLtNICUtRYava19HRBZ.png][]  
\#\#\#\#\#\#17.4 改变TabLayout内部字体大小效果图  
![4sLR9rRs4deoiKHdxy2.png][]  
\#\#\#\#\#\#17.5 改变指示器下标的高度效果图  
![YcExmk5g6naJsWKrR36.png][]  
![vJO2SNxOzajl7nqXDQt.png][]  
\#\#\#\#\#\#17.6 添加图标效果图  
![Vy531nAOZGRBB9RNGqO.png][]  
\#\#\#\#\#\#17.7 TabLayout点击事件效果图  
![mTkFbCs9GJvsGKkzSAK.gif][]  
ok，今天关于TabLayout相关知识就讲到这里了。

TabLayout基本属性全解

> 代码地址如下：  
> [http://www.demodashi.com/demo/14659.html][http_www.demodashi.com_demo_14659.html]

> 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

[http_www.demodashi.com_demo_14659.html]: http://www.demodashi.com/demo/14659.html
[ZiSFms1IVg4eifzfYrR.gif]: /images/20220310/b6b7b5647ff343799a09f5d4283ca172.png
[jcZnTZ9NUishUp4vUJd.gif]: /images/20220310/5deb0fb4ebc04996a4732e3786b76e22.png
[oalNaDVAnHcldmkVDBh.gif]: /images/20220310/1689d6ff2f9047c48aa94c25f6bc1063.png
[TabLayout]: http://www.demodashi.com/demo/14552.html
[mGS6h6wNHPwywJcZqp5.gif]: /images/20220310/6adb6a241b45473a907fb02be4e40bdf.png
[yS2xrS7vGogyC7bNyrt.png]: /images/20220310/862eef0bf04b43669892a30cd40ab9c8.png
[Y2ZPYPqsplB4u6CsLgI.gif]: /images/20220310/14fc65372171455eaa60cbb913938a00.png
[gLtNICUtRYava19HRBZ.png]: /images/20220310/f6431110063c4beab7fbdf07d9c9f879.png
[4sLR9rRs4deoiKHdxy2.png]: /images/20220310/3a321bde945b4f1cb54055c569b70e5b.png
[YcExmk5g6naJsWKrR36.png]: /images/20220310/e47be53b10d34256898998f4ea8ccef8.png
[vJO2SNxOzajl7nqXDQt.png]: /images/20220310/9944c199f6eb4ca2ba3ac5beb14836ca.png
[Vy531nAOZGRBB9RNGqO.png]: /images/20220310/49eb5cf673bc496c8241c879e7f9c94c.png
[mTkFbCs9GJvsGKkzSAK.gif]: /images/20220310/8f3d1d19ef2045a2b8c9f959999716a6.png