实现 Android TabLayout 替换下划线

1. 整体流程

首先，我们来看一下实现 Android TabLayout 替换下划线的整体流程。下面是一个流程图，展示了实现的步骤和顺序：

flowchart TD
    A(创建一个新的项目)
    B(在布局文件中添加TabLayout)
    C(创建自定义的TabIndicator类)
    D(在布局文件中引用自定义的TabIndicator)
    E(设置TabLayout的样式和属性)
    F(运行程序查看效果)

下面，我们将详细介绍每一步的具体操作和需要使用的代码。

2. 创建一个新的项目

首先，我们需要创建一个新的 Android 项目。可以使用 Android Studio 来创建项目，按照常规的方式创建一个空的项目即可。

3. 在布局文件中添加 TabLayout

在创建好的项目中，找到 activity_main.xml 布局文件，在其中添加一个 TabLayout。

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="top"
    android:background="@color/colorPrimary"
    app:tabIndicatorHeight="0dp"
    app:tabTextColor="@color/tab_text_color"
    app:tabSelectedTextColor="@color/tab_selected_text_color"
    app:tabBackground="@drawable/tab_background" />

在这段代码中，我们使用了 com.google.android.material.tabs.TabLayout 控件来创建一个 TabLayout。我们还设置了一些属性，如背景颜色、文本颜色等。

4. 创建自定义的 TabIndicator 类

接下来，我们需要创建一个自定义的 TabIndicator 类，用于替换默认的下划线效果。

public class CustomTabIndicator extends LinearLayout implements TabLayout.BaseOnTabSelectedListener {

    private View indicator;
    private int indicatorColor;

    public CustomTabIndicator(Context context) {
        this(context, null);
    }

    public CustomTabIndicator(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomTabIndicator(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setOrientation(HORIZONTAL);
        LayoutInflater.from(context).inflate(R.layout.layout_custom_tab_indicator, this, true);

        indicator = findViewById(R.id.indicator);
        
        // 设置默认的指示器颜色
        indicatorColor = getResources().getColor(R.color.tab_indicator_color);
    }

    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        int position = tab.getPosition();
        // 根据位置设置指示器的偏移量
        setIndicatorTranslationX(position);
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {
    }

    private void setIndicatorTranslationX(int position) {
        ViewPropertyAnimator animator = indicator.animate();
        animator.translationX(indicator.getWidth() * position);
        animator.setDuration(200);
        animator.start();
    }
}

在这段代码中，我们创建了一个名为 CustomTabIndicator 的自定义 View，继承自 LinearLayout，并实现了 TabLayout.BaseOnTabSelectedListener 接口。在构造函数中，我们进行了一些初始化操作，如设置布局、获取指示器的 View。

5. 在布局文件中引用自定义的 TabIndicator

接下来，我们需要在布局文件中引用自定义的 TabIndicator。在 activity_main.xml 文件中，添加以下代码：

<com.example.myapp.CustomTabIndicator
    android:id="@+id/customTabIndicator"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="top" />

在这段代码中，我们使用了自定义的 CustomTabIndicator 类来替换默认的 TabLayout。

6. 设置 TabLayout 的样式和属性

最后，我们需要设置 TabLayout 的样式和属性。在 MainActivity 中的 onCreate 方法中，添加以下代码：

TabLayout tabLayout = findViewById(R.id.tabLayout);
CustomTabIndicator customTabIndicator = findViewById(R.id.customTabIndicator);

// 设置 TabLayout 的模式为固定模式
tabLayout.setTabMode(TabLayout.MODE_FIXED);

// 设置 TabLayout 的指示器为自定义的 TabIndicator
tabLayout.setSelectedTabIndicator(customTabIndicator);

// 添加 Tab
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));