TabLayout中间标签滚动卡顿问题求助（含代码与演示动图）

我之前也碰到过一模一样的问题！当TabLayout设置tabMode="scrollable"和tabGravity="center"后，切换ViewPager页面或者选中标签时，中间的标签会出现明显的卡顿回位现象——先偏移一下再突然跳回正确位置，动画特别不流畅。结合你提供的代码，我来分享下解决思路和具体方案：

现象复盘：切换页面时，选中的标签在滚动过程中会出现异常的回退，最终才定位到中心位置，视觉上有明显卡顿。

问题根源 #

这种情况主要是TabLayout的scrollable模式和center重力的默认逻辑冲突，再加上你自定义的wrapTabIndicatorToTitle方法直接修改了TabView的minimumWidth和padding/margin，破坏了TabLayout内部的测量和滚动计算逻辑，导致切换时滚动位置计算异常。

具体解决方案 #

1. 调整TabLayout的基础属性 #

先把XML里TabLayout的android:layout_width从wrap_content改成match_parent——scrollable模式下，TabLayout需要完整的父布局宽度来计算滚动范围，wrap_content会让滚动逻辑的计算出现误差：

<android.support.design.widget.TabLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/tab_layout"
    style="@style/MyCustomTabLayout"
    android:layout_width="match_parent" <!-- 这里改为match_parent -->
    android:layout_height="34.3dp"
    android:layout_below="@+id/iv_logo"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="5.5dp"
    app:tabBackground="@android:color/transparent"
    app:tabContentStart="0dp"
    app:tabIndicatorColor="@color/colorGreen"
    app:tabIndicatorHeight="1.4dp"
    app:tabSelectedTextColor="@color/colorGreen"
    app:tabTextColor="#e13d3833"
    app:tabMode="scrollable"
    app:tabGravity="center"/>

2. 替换自定义Tab样式的实现方式 #

你原来的wrapTabIndicatorToTitle方法直接修改TabView的内部参数，很容易干扰默认逻辑。建议换成自定义Tab布局的方式来控制标签的边距和样式：

第一步：创建自定义Tab布局文件（res/layout/custom_tab_item.xml）

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:gravity="center"
    android:paddingHorizontal="30dp" <!-- 这里控制标签左右边距 -->
    android:textSize="11.5sp"
    android:textAllCaps="true"/>

第二步：在代码中使用自定义Tab布局

修改你的setupTabs方法，添加Tab时使用自定义布局，同时注意避免setupWithViewPager的重复创建问题：

private void setupTabs(final List<Categories> list) {
    // 先清空原有Tab，防止setupWithViewPager重复添加
    tabLayout.removeAllTabs();

    // 添加"Popular"标签
    TabLayout.Tab popularTab = tabLayout.newTab();
    popularTab.setCustomView(R.layout.custom_tab_item);
    ((TextView) popularTab.getCustomView()).setText(Constant.POPULAR);
    tabLayout.addTab(popularTab);

    // 添加"Special"标签
    TabLayout.Tab specialTab = tabLayout.newTab();
    specialTab.setCustomView(R.layout.custom_tab_item);
    ((TextView) specialTab.getCustomView()).setText(Constant.SPECIAL);
    tabLayout.addTab(specialTab);

    // 添加分类标签
    for (Categories category : list) {
        TabLayout.Tab categoryTab = tabLayout.newTab();
        categoryTab.setCustomView(R.layout.custom_tab_item);
        ((TextView) categoryTab.getCustomView()).setText(category.getName());
        tabLayout.addTab(categoryTab);
    }

    // 初始化ViewPager适配器
    ViewPagerAdapter adapter = new ViewPagerAdapter(getFragmentManager(), getActivity());
    // 填充Popular页面
    Bundle popularBundle = new Bundle();
    popularBundle.putString("name", Constant.POPULAR);
    Fragment popularFrag = new Home();
    popularFrag.setArguments(popularBundle);
    adapter.addFrag(popularFrag, Constant.POPULAR);

    // 填充Special页面
    Bundle specialBundle = new Bundle();
    specialBundle.putString("name", Constant.SPECIAL);
    Fragment specialFrag = new Home();
    specialFrag.setArguments(specialBundle);
    adapter.addFrag(specialFrag, Constant.SPECIAL);

    // 填充分类页面
    for (int i = 0; i < list.size(); i++) {
        Bundle bundle = new Bundle();
        bundle.putString("name", list.get(i).getName());
        bundle.putSerializable("category", list.get(i));
        Fragment fragment = new Home();
        fragment.setArguments(bundle);
        adapter.addFrag(fragment, list.get(i).getName());
    }

    viewpager.setOffscreenPageLimit(3);
    viewpager.setAdapter(adapter);
    tabLayout.setupWithViewPager(viewpager);

    // 移除原来的wrapTabIndicatorToTitle方法调用
}

3. 手动控制Tab的滚动对齐 #

为了确保选中的Tab能平滑滚动到中心位置，我们可以监听Tab选中和ViewPager页面切换事件，手动控制滚动：

// 监听Tab选中事件
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        viewpager.setCurrentItem(tab.getPosition(), true);
        // 计算并滚动到中心位置
        int scrollPos = tab.getPosition() * tab.getWidth() - (tabLayout.getWidth() / 2) + (tab.getWidth() / 2);
        tabLayout.smoothScrollTo(scrollPos, 0);
    }

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

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

// 监听ViewPager页面切换事件
viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

    @Override
    public void onPageSelected(int position) {
        TabLayout.Tab tab = tabLayout.getTabAt(position);
        if (tab != null) {
            int scrollPos = position * tab.getWidth() - (tabLayout.getWidth() / 2) + (tab.getWidth() / 2);
            tabLayout.smoothScrollTo(scrollPos, 0);
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {}
});

效果说明 #

这样调整后，TabLayout在切换时会平滑滚动到选中标签的中心位置，不会再出现卡顿回位的现象。核心是避免修改TabLayout内部的View参数，同时给TabLayout足够的宽度来计算滚动范围，再通过手动控制滚动来保证对齐的准确性。

内容的提问来源于stack exchange，提问作者smpatel