ViewPager2页面切换闪烁问题排查与解决求助

问题背景 #

在现有项目中使用ViewPager2进行页面切换时出现异常闪烁效果，但将相同代码移植到新项目中时，页面切换十分流畅。

现有项目 #

效果表现 #

现有项目闪烁效果

Activity代码

class TestActivity : AppCompatActivity() {

    private val binding by lazy { ActivityTestBinding.inflate(layoutInflater) }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContentView(binding.root)

        setupTabLayout(binding.viewPager, binding.tabLayout, listOf(ProfileFragment(), ProfileFragment()), listOf("First", "First"))

    }

}

布局XML

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>

    </data>

    <LinearLayout
        android:id="@+id/main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:orientation="vertical">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:contentDescription="@string/app_name"
            app:tabIndicatorColor="@color/black"
            app:tabIndicatorFullWidth="true"
            app:tabMode="fixed"
            app:tabRippleColor="@color/transparent"
            app:tabSelectedTextColor="@color/black"
            app:tabTextColor="@color/text_grey" />

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />

    </LinearLayout>
</layout>

Pager适配器与设置函数

class PagerAdapter(activity: FragmentActivity, private val items: List<Fragment>) : FragmentStateAdapter(activity) {

    override fun getItemCount() = items.size

    override fun createFragment(position: Int) = items[position]

}

fun Activity.setupTabLayout(
    viewPager2: ViewPager2,
    tabLayout: TabLayout,
    fragments: List<Fragment>,
    titles: List<String>
) {
    viewPager2.adapter = PagerAdapter(this as AppCompatActivity, fragments)

    TabLayoutMediator(tabLayout, viewPager2) { tab, position ->
        tab.text = titles[position]
    }.attach()
}

新项目 #

效果表现 #

新项目无闪烁效果

Activity代码

class MainActivity : AppCompatActivity() {

    private val binding by lazy { ActivityMainBinding.inflate(layoutInflater) }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContentView(binding.root)

        setupTabLayout(binding.viewPager, binding.tabLayout, listOf(FirstFragment(), FirstFragment()), listOf("First", "First"))

    }

}

布局XML

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

    </data>

    <LinearLayout
        android:id="@+id/main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:orientation="vertical"
        tools:context=".MainActivity">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:contentDescription="@string/app_name"
            app:layout_constraintTop_toTopOf="parent"
            app:tabIndicatorColor="@color/black"
            app:tabIndicatorFullWidth="true"
            app:tabMode="fixed"
            app:tabRippleColor="@color/transparent"
            app:tabSelectedTextColor="@color/black"
            app:tabTextColor="@color/grey" />

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />

    </LinearLayout>
</layout>

Pager适配器与设置函数

class PagerAdapter(fa: FragmentActivity, private val fragments: List<Fragment>) : FragmentStateAdapter(fa) {

    override fun getItemCount() = fragments.size

    override fun createFragment(position: Int) = fragments[position]

}

fun Activity.setupTabLayout(
    viewPager2: ViewPager2,
    tabLayout: TabLayout,
    fragments: List<Fragment>,
    titles: List<String>
) {
    viewPager2.adapter = PagerAdapter(this as AppCompatActivity, fragments)

    TabLayoutMediator(tabLayout, viewPager2) { tab, position ->
        tab.text = titles[position]
    }.attach()
}

求助问题 #

1. 现有项目中出现闪烁效果的原因是什么？是人为失误、依赖不兼容还是IDE问题？
2. 如何解决该问题，实现与新项目一样的流畅页面切换？

内容的提问来源于stack exchange，提问作者Faishal Mukhammad Syarief