Android 顶部TabLayout详解

介绍

Android中的TabLayout是一种常见的布局组件，用于实现顶部导航栏。它提供了一种方便的界面切换方式，可以在不同的选项卡之间切换，并且可以自定义选项卡的样式和行为。本文将介绍TabLayout的基本用法和常见的自定义操作。

TabLayout的基本用法

TabLayout是属于Android Design Support库的一部分，因此首先需要在项目的build.gradle文件中添加相关依赖。

dependencies {
    implementation 'com.google.android.material:material:1.2.1'
}

接下来，在布局文件中添加TabLayout和ViewPager组件。

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="fixed"
    app:tabGravity="fill" />

<androidx.viewpager.widget.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

在代码中，我们需要创建一个TabLayout对象并设置其关联的ViewPager。

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

viewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
tabLayout.setupWithViewPager(viewPager);

其中，MyPagerAdapter是一个继承自FragmentPagerAdapter的自定义适配器，用于管理ViewPager中的页面。

private class MyPagerAdapter extends FragmentPagerAdapter {

    private String[] titles = {"Tab1", "Tab2", "Tab3"};

    public MyPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return new MyFragment();
    }

    @Override
    public int getCount() {
        return titles.length;
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }
}

在MyPagerAdapter中，我们定义了三个选项卡，并返回同一个Fragment对象作为每个选项卡的内容。getPageTitle方法用于设置选项卡的标题。

至此，一个基本的TabLayout已经完成了。运行应用程序，你将看到顶部有三个选项卡，可以滑动或点击来切换页面。

TabLayout的自定义

TabLayout提供了很多自定义选项，可以通过代码或布局文件来实现。以下是一些常见的自定义操作。

自定义选项卡样式

TabLayout的选项卡样式可以通过代码进行自定义。我们可以设置选项卡的背景颜色、文本样式、图标等。

// 设置选项卡的文本样式
tabLayout.setTabTextColors(Color.WHITE, Color.RED);

// 设置选项卡的图标
tabLayout.getTabAt(0).setIcon(R.drawable.tab_icon1);
tabLayout.getTabAt(1).setIcon(R.drawable.tab_icon2);
tabLayout.getTabAt(2).setIcon(R.drawable.tab_icon3);

// 设置选项卡的背景颜色
tabLayout.setBackgroundColor(Color.BLUE);

自定义选项卡行为

TabLayout的选项卡行为也可以进行自定义。我们可以设置选项卡的点击事件、滑动模式等。

// 设置选项卡的点击事件
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        // 选项卡被选中时的操作
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        // 选项卡被取消选中时的操作
    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {
        // 选项卡被再次选中时的操作
    }
});

// 设置选项卡的滑动模式
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

自定义选项卡布局

TabLayout的选项卡布局也可以进行自定义。我们可以设置选项卡布局的样式、位置等。

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="fixed"
    app:tabGravity="fill"
    app:tabIndicatorHeight="2dp"
    app:tabIndicator