如何让SlidingTabLayout自动高亮ViewPager2当前所在Fragment？

问题描述 #

我正在开发一款Android应用，使用AndroidX和ViewPager2，需要实现当前Fragment的高亮指示（黄色条）。应用有4个主页面，每个页面下包含多个Fragment，但切换Fragment时黄色高亮条不会同步移动。试过TabLayoutMediator但没效果，目前用SlidingTabLayout的setViewPager方法绑定页面，想知道能不能实现自动切换高亮，还是必须为每个Fragment手动写逻辑？

核心原因 #

SlidingTabLayout的setViewPager方法是为旧版ViewPager设计的，和ViewPager2不兼容。ViewPager2基于RecyclerView实现，页面监听接口从OnPageChangeListener改成了OnPageChangeCallback，旧的绑定方法无法监听到ViewPager2的页面切换事件，导致高亮条无法跟随更新。

解决方案 #

不需要为每个Fragment手动编写逻辑，只需让Tab容器正确监听ViewPager2的页面变化即可，以下是两种可行方案：

方案一：修改SlidingTabLayout适配ViewPager2

如果要继续使用现有SlidingTabLayout，需给它添加适配ViewPager2的绑定方法，手动监听页面切换并更新高亮条：

1. 在SlidingTabLayout中新增绑定ViewPager2的方法：

public void setViewPager2(ViewPager2 viewPager2) {
    this.viewPager2 = viewPager2;
    // 监听ViewPager2页面切换事件
    viewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
        @Override
        public void onPageSelected(int position) {
            // 更新选中Tab并移动高亮条
            updateSelectedTab(position);
        }

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            // 页面滑动时同步偏移高亮条
            scrollHighlightBar(position, positionOffset);
        }
    });
    // 从ViewPager2的Adapter加载Tab标题
    populateTabsFromPagerAdapter();
}

2. 补充Tab初始化和高亮条更新的逻辑：

private void populateTabsFromPagerAdapter() {
    removeAllTabs();
    FragmentStateAdapter adapter = (FragmentStateAdapter) viewPager2.getAdapter();
    if (adapter != null) {
        int count = adapter.getItemCount();
        for (int i = 0; i < count; i++) {
            addTab(newTab().setText(adapter.getPageTitle(i)), i == viewPager2.getCurrentItem());
        }
    }
}

private void updateSelectedTab(int position) {
    setSelectedTabIndicator(position);
    scrollToTab(position, 0); // 将选中Tab滚动到可视区域
}

private void scrollHighlightBar(int position, float offset) {
    View indicator = findViewById(R.id.sliding_tab_indicator); // 替换成你的高亮条ID
    if (indicator != null) {
        TabLayout.Tab currentTab = getTabAt(position);
        if (currentTab != null) {
            int tabWidth = currentTab.getWidth();
            int translationX = (int) (position * tabWidth + offset * tabWidth);
            indicator.setTranslationX(translationX);
        }
    }
}

3. 在onPostExecute中替换绑定代码：

@Override
protected void onPostExecute(Void params) {
    pager.setAdapter(adapter);
    // 改用适配ViewPager2的绑定方法
    tabs.setViewPager2(pager);
    
    if (adapter != null)
        adapter.notifyDataSetChanged();
    progressBar.setVisibility(View.GONE);
    drawerLayout.closeDrawers();
    cancel(true);
}

方案二：改用官方TabLayout + TabLayoutMediator（推荐）

如果之前使用TabLayoutMediator无效，大概率是用法错误，正确绑定方式如下：

1. 布局中使用官方TabLayout：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorColor="@color/yellow" <!-- 设置高亮条颜色 -->
    app:tabIndicatorHeight="4dp" /> <!-- 设置高亮条高度 -->

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

2. 代码中用TabLayoutMediator绑定：

@Override
protected void onPostExecute(Void params) {
    pager.setAdapter(adapter);
    // 正确绑定TabLayout与ViewPager2
    new TabLayoutMediator(tabs, pager, (tab, position) -> {
        // 从Adapter获取Tab标题
        tab.setText(adapter.getPageTitle(position));
    }).attach();
    
    if (adapter != null)
        adapter.notifyDataSetChanged();
    progressBar.setVisibility(View.GONE);
    drawerLayout.closeDrawers();
    cancel(true);
}

3. 确保PagerAdapter重写getPageTitle方法：

public class YourPagerAdapter extends FragmentStateAdapter {
    // ... 其他逻辑
    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        // 返回对应位置的Tab标题，比如从字符串数组读取
        return tabTitles[position];
    }
}

内容的提问来源于stack exchange，提问作者Eva D'hordain