Android修行手册 - TabLayout全解析-监听和示例

👉关于作者

众所周知，人生是一个漫长的流程，不断克服困难，不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考，于是我决定将自己的思考，经验和故事全部分享出来，以此寻找共鸣！！！

专注于Android/Unity和各种游戏开发技巧，以及各种资源分享（网站、工具、素材、源码、游戏等）

欢迎关注公众号【空名先生】获取更多资源和交流！

👉前提

这是小空坚持写的Android新手向系列，欢迎品尝。

新手（√√√）

大佬（√）

👉实践过程

我们接着昨天的讲哈

😜设置监听

idTabLayoutOne.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
    override fun onTabSelected(tab: TabLayout.Tab?) {
        //添加选中Tab的逻辑
    }
 
    override fun onTabUnselected(tab: TabLayout.Tab?) {
        //添加未选中Tab的逻辑
    }
 
    override fun onTabReselected(tab: TabLayout.Tab?) {
        //再次选中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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".TabLayoutActivity">
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/idTabLayoutOne"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabBackground="@color/color_00ff00"
        app:tabIndicatorColor="#0000ff"
        app:tabIndicatorFullWidth="false"
        app:tabIndicatorHeight="5dp"
 
        app:tabSelectedTextColor="#ff0000"
        app:tabTextColor="#99ff0000">
 
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="导航组件" />
 
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="芝麻粒儿" />
 
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="空名先生" />
    </com.google.android.material.tabs.TabLayout>
 
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/idTabLayoutTwo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorAnimationDuration="2000"
        app:tabIndicatorAnimationMode="elastic"
        app:tabIndicatorColor="#0000ff"
        app:tabIndicatorGravity="center"
        app:tabIndicatorHeight="5dp"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="#ff0000"
        app:tabTextColor="#99ff0000">
 
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@mipmap/icon_xin_yes"
            android:text="当标签过多" />
 
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="过多" />
 
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@mipmap/icon_xin_yes"
            android:text="的时候会显示" />
 
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@mipmap/icon_xin_yes"
            android:text="会显示的很拥挤" />
 
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@mipmap/icon_xin_yes"
            android:text="而scrollable属性可以滑动" />
 
    </com.google.android.material.tabs.TabLayout>
 
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/idTabLayoutThree"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        app:tabContentStart="300dp"
        app:tabIconTint="#00ff00"
        app:tabIconTintMode="screen"
        app:tabIndicatorAnimationDuration="300"
        app:tabIndicatorAnimationMode="linear"
        app:tabIndicatorFullWidth="false"
        app:tabIndicatorGravity="top"
        app:tabMaxWidth="100dp"
        app:tabMinWidth="40dp"
        app:tabPadding="20dp">
 
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@mipmap/study_one"
            android:text="导航组件组件" />
 
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@mipmap/icon_xin_no"
            android:text="芝" />
 
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="空名先生" />
    </com.google.android.material.tabs.TabLayout>
 
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/idTabLayoutFour"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        app:tabRippleColor="@color/color_00ff00"
        app:tabUnboundedRipple="true"
        app:tabInlineLabel="true">
 
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@mipmap/icon_xin_no"
            android:text="导航组件组件" />
 
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@mipmap/icon_xin_no"
            android:text="芝" />
 
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="空名先生" />
    </com.google.android.material.tabs.TabLayout>
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/idTabLayoutFive"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        app:tabRippleColor="@color/color_00ff00"
        app:tabUnboundedRipple="true"
        app:tabInlineLabel="true">
    </com.google.android.material.tabs.TabLayout>
</LinearLayout>

一般我们在xml中使用都是基本能确定该导航组件个数固定（如应用底部栏），否则都是动态添加（如上部导航栏）：

idTabLayoutFive.addTab(idTabLayoutFive.newTab().setText(“这是”))

idTabLayoutFive.addTab(idTabLayoutFive.newTab().setText(“进行”).setIcon(R.mipmap.icon_xin_no))

idTabLayoutFive.addTab(idTabLayoutFive.newTab().setText(“动态”))

idTabLayoutFive.addTab(idTabLayoutFive.newTab().setText(“添加”).setIcon(R.mipmap.icon_xin_no))

如果xml布局中有了部分，还想要进行动态添加也是完全可以的。

👉其他

📢作者：小空和小芝中的小空

📢转载说明-务必注明来源：芝麻粒儿 的个人主页 - 专栏 - 掘金 (juejin.cn)

📢这位道友请留步☁️，我观你气度不凡，谈吐间隐隐有王者霸气💚，日后定有一番大作为📝！！！旁边有点赞👍收藏🌟今日传你，点了吧，未来你成功☀️，我分文不取，若不成功⚡️，也好回来找我。