史上最详尽tablayout使用

最新推荐文章于 2024-09-25 15:58:02 发布

安卓飞

最新推荐文章于 2024-09-25 15:58:02 发布

阅读量503

点赞数 1

分类专栏： androidui 文章标签：布局

本文链接：https://blog.csdn.net/anwanfei/article/details/75670156

版权

androidui 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文详细介绍了TabLayout的使用，从基本概念到各种显示方式，包括布局设置、代码配置及属性调整，提供了全面的实践指导。

摘要由CSDN通过智能技术生成

史上最详尽tablayout使用

一、什么是tablayout？

源码中定义：

TabLayout provides a horizontal layout to display tabs.

翻译：tablayout展示tabs（标签）的水平布局。（继承horizontalScrollView）

二、tablayout基本使用方式

1、直接显示tablayout方式一

布局中：

<android.support.design.widget.TabLayout
          android:id="@+id/tabLayout"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"/>

代码中：

tabLayout= (TabLayout) findViewById(R.id.tabLayout);
tablayout.addTab(tablayout.newTab().setText("新闻"));
tablayout.addTab(tablayout.newTab().setText("历史"));
tablayout.addTab(tablayout.newTab().setText("美图"));

效果：这里写图片描述

2、直接显示tablayout使用方式二

布局中：

 <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="新闻" />

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="历史" />

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="美图" />
    </android.support.design.widget.TabLayout>

代码中不用任何代码，效果跟方式一一样

三、tablayout的基本属性

1、在布局中设置属性

<android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        app:tabBackground="@color/gallery_red"//改变整个tablayout的背景颜色
        app:tabContentStart="100dp"//tablayout开始位置的偏移量，相当于margin
        app:tabGravity="center"//内容显示模式，center和fill
        app:tabIndicatorColor="@color/black"//设置指示器的颜色
        app:tabIndicatorHeight="4dp"//设置指示器的高度
        app:tabMaxWidth="14dp"//设置最大的tab宽度
        app:tabMinWidth="10dp"//设置最小的宽度
        app:tabMode="fixed"//设置tab的模式，默认是fixed，标签被挤压不能滑动，scrollable可以滑动
        app:tabPadding="4dp"//设置tab内部子控件的padding
        app:tabSelectedTextColor="@color/black"//设置选中文字的颜色
        app:tabTextAppearance="@style/tablayuot_style"//设置文字的外貌
        app:tabTextColor="@color/gray" //设置未选中文字的颜色/>

注意：设置文字外貌有坑，只要设置了style必须有文字大小和颜色

2、在代码中设置属性

    //在代码中添加tab
    tablayout.addTab(tablayout.newTab().setText("美图"));

    //给tab设置图片
    tablayout.getTabAt(0).setIcon(R.drawable.ic_dashboard_black_24dp);

    //给tab设置监听
    tablayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
         @Override
         public void onTabSelected(TabLayout.Tab tab) {
             //选中了tab的逻辑

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

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

     //设置tab默认选中子控件
     tablayout.getTabAt(position).select();

     //最关键最常用的，与viewpager关联使用
     tablayout.setupWithViewPager(viewpager);