Tablayout使用详解

最新推荐文章于 2025-09-30 17:34:03 发布

原创

最新推荐文章于 2025-09-30 17:34:03 发布 · 1.6k 阅读

11 ·

CC 4.0 BY-SA版权

本文详细介绍了如何灵活运用TabLayout，包括设置属性、去掉指示线、调整指示线长度、自定义图标和布局，以及应对超出屏幕的场景。通过实例演示和代码展示，帮助开发者应对产品经理的各种需求。

前言

Tablayout继承自HorizontalScrollView，用作页面切换指示器，因使用简便功能强大而广泛使用在App中。

但有的产品经理偏偏是个磨人的小妖精，真的猜不透啊，今天要这种效果，明天就指着另一款App说做成跟这个一样。对付这种产品经理我们有骨气的程序员该怎么办？怎么办？当然是屈服啊，不然去跳楼让他因内疚改需求？
所以，就在各种复杂的情况下打磨，渐渐地就变得圆润。这里，有Tablayout的各种使用场景，拿去指着产品经理说：你要哪个给你哪个。

github代码直通车

先上效果图：分别为设置tab属性、去掉指示线、设置指示线长度、设置图标tab、超出屏幕滚动tab
在这里插入图片描述

常用属性：

app:tabIndicatorColor ：指示线的颜色
app:tabIndicatorHeight ：指示线的高度
app:tabSelectedTextColor ： tab选中时的字体颜色
app:tabMode="scrollable" ： 默认是fixed，固定的；scrollable：可滚动的

各种使用场景：

1.默认使用样式，结合Viewpager使用：

效果图：
在这里插入图片描述

activity_main.xml布局：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.tablayoutusecase.defaultuse.MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@color/colorPrimaryDark">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="一般用法"
            android:textColor="#fff"
            android:textSize="16sp"/>

    </RelativeLayout>

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


    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

MainActivity使用：根据title长度，设置文字title，设置fragment，设置viewpager联动，使用的是Tablayout默认属性。

import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import com.example.tablayoutusecase.R;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
   
   
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private FmPagerAdapter pagerAdapter;
    private ArrayList<Fragment> fragments = new ArrayList<>();
    private String[] titles = new String[]{
   
   "最新","热门","我的"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
   
   
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        init();
    }

    private void init() {
   
   

        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        viewPager = (ViewPager) findViewById(R.id.viewpager);

        for(int i=0;i<titles.length;i++){
   
   
            fragments