这是我参与「第四届青训营 」笔记创作活动的第5天。

背景

在我负责的模块中需要使用到TableLayout。第一次使用，遇到很多问题。在这里记录一下我在开发中的使用。

添加依赖

不能低于此版本

implementation 'com.google.android.material:material:1.5.0'

xml布局

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tablelayout_mine"
    android:layout_width="200dp"
    android:layout_height="50dp"
    android:layout_centerHorizontal="true">

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="match_parent"/>

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="match_parent"/>

</com.google.android.material.tabs.TabLayout>

因为需求里标签数量是固定的，所以这里使用静态的写法。

丰富TableLayout的效果

自定义指示器

app:tabIndicator="@drawable/tablayout_follow_indicator"

指示器切换动画延时

app:tabIndicatorAnimationDuration="1000"

指示器颜色（在自定义指示器中设置颜色是无效的，要在这里设置）

app:tabIndicatorColor="#1A1A1A"

隐藏自带的指示器（如果不设置，自定义指示器无法显示）

app:tabIndicatorHeight="0dp"

去掉点击背景

app:tabRippleColor="@android:color/transparent"

选中标签文字颜色

app:tabSelectedTextColor="#1A1A1A"

默认标签文字效果

app:tabTextAppearance="@style/unselected_tab_text"

自定义指示器

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="38dp"
        android:height="3dp"
        android:gravity="center">
        <shape />
    </item>
</layer-list>

标签文字效果

//后面用到
<style name="selected_tab_text" parent="TextAppearance.AppCompat.Subhead">
    <item name="android:textSize">16sp</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textAllCaps">false</item>
</style>

<style name="unselected_tab_text" parent="TextAppearance.AppCompat.Subhead">
    <item name="android:textSize">14sp</item>
    <item name="android:textStyle">normal</item>
    <item name="android:textAllCaps">false</item>
</style>

Java代码

将TableLayout与ViewPager2绑定

TabLayoutMediator mediator;
mediator = new TabLayoutMediator(tabLayout, viewPager, strategy);
mediator.attach();

如果静态写法里声明了标签文本，在mediator.attach()后文本消失，所以需要在strategy中设置

在strategy中设置标签文本

private TabLayoutMediator.TabConfigurationStrategy strategy = (tab, position) -> {
    TextView textView = new TextView(activity);
    textView.setWidth(ViewGroup.LayoutParams.WRAP_CONTENT);
    textView.setWidth(ViewGroup.LayoutParams.MATCH_PARENT);
    textView.setGravity(Gravity.CENTER_HORIZONTAL);
    switch (position) {
        case 0:
            textView.setText("tab1");
            break;
        case 1:
            textView.setText("tab2");
        default:
            break;
    }
    tab.setCustomView(textView);
};

添加TableLayout选中与未选中的文字效果

因为有TableLayout和ViewPager2，所以设置两个选择监听器。

TableLayout

private TabLayout.OnTabSelectedListener selectedListener = new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        if (tab.getCustomView() != null) {
            TextView textView = (TextView) tab.getCustomView();
            textView.setTextAppearance(activity, R.style.selected_tab_text);
        }
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        if (tab.getCustomView() != null) {
            TextView textView = (TextView) tab.getCustomView();
            textView.setTextAppearance(activity, R.style.unselected_tab_text);
        }
    }

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

    }
};

记得判空，防止空指针异常

ViewPager2

private ViewPager2.OnPageChangeCallback changeCallback = new ViewPager2.OnPageChangeCallback() {
    @Override
    public void onPageSelected(int position) {
        int tabCount = tabLayout.getTabCount();
        for (int i = 0; i < tabCount; i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            TextView textView = (TextView) tab.getCustomView();
            if (textView != null) {
                if (tab.getPosition() == position) {
                    textView.setTextAppearance(activity, R.style.selected_tab_text);
                } else {
                    textView.setTextAppearance(activity, R.style.unselected_tab_text);
                }
            }
        }
    }
};

设置监听器

viewPager.registerOnPageChangeCallback(changeCallback);
tabLayout.addOnTabSelectedListener(selectedListener);

这样我们成功实现了自定义指示器，与ViewPager2绑定，选中文本效果等功能的TableLayout。