解决在 Material Design 中使用 CollapsingToolbarLayout 和 TabLayout 出现重影问题

前言

Material Design 是 Google 推出的一种全新的设计语言，具有鲜明的时代感和现代感，是 Android 前端开发中使用最广泛的设计规范之一。CollapsingToolbarLayout 和 TabLayout 是 Material Design 中很常用的控件，用来实现折叠布局和标签页切换效果。但是，当他们同时使用时，有可能会出现重影问题（collapsing image flickering），这会严重影响用户体验。本文将详细介绍如何解决这一问题。

问题描述

在使用 Material Design 中的 CollapsingToolbarLayout 和 TabLayout 控件时，当 CollapsingToolbarLayout 折叠时，在顶部的标签页栏部分会出现重影问题，具体表现为标签页栏的阴影会在底部消失并重新出现，如下图所示：

这个问题在多个 Android 版本上都出现过，尤其是在 Android 7.0 等系统版本上出现的几率更大。

问题原因

经过分析，出现重影问题的原因是由于 CollapsingToolbarLayout 和 TabLayout 没有配合很好地使用，导致在滑动时出现重绘问题，最终导致重影问题的出现。

具体地，当 CollapsingToolbarLayout 折叠时，TabLayout 的背景不透明度逐渐减小，逐渐变为透明。在这个过程中，TabLayout 背景的透明度达到一定程度时，由于 Android 平台的某个特性，系统会自动执行一次重绘操作，从而导致界面上出现闪烁的重影效果。

解决方法

针对上述问题，我们可以使用下面两种方法进行解决。

方法一：使用 app:tabBackground 属性

通过设置 TabLayout 的 app:tabBackground 属性为透明色，即可解决重影问题。具体来说，我们需要在 TabLayout 控件的 XML 布局文件中加入 app:tabBackground="@android:color/transparent" 属性，如下所示：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabBackground="@android:color/transparent"
    ...
    />

这样就可以解决重影问题了。

方法二：使用 TabLayoutMediator 类

使用 TabLayoutMediator 类可以更简单地实现绑定 TabLayout 和 ViewPager，并且在使用时不会出现重影问题。具体来说，我们需要在代码中使用 TabLayoutMediator 类进行绑定，如下所示：

val tabLayout: TabLayout = findViewById(R.id.tab_layout)
val viewPager: ViewPager2 = findViewById(R.id.view_pager)

TabLayoutMediator(tabLayout, viewPager) {tab, position ->
    // 标签页和位置的绑定关系
}.attach()

在这里，我们通过 TabLayoutMediator 类将 tabLayout 和 viewPager 控件进行了绑定，并同时处理了标签页和页面位置之间的绑定关系。使用 attach() 方法即可完成绑定，并且不会出现重影问题。

总结

本文在介绍 Material Design 中的 CollapsingToolbarLayout 和 TabLayout 控件时，详细讲解了他们在使用过程中可能出现的重影问题及其原因，同时提供了两种解决方法：一种是使用 app:tabBackground 属性，另一种是使用 TabLayoutMediator 类。通过本文的介绍，相信读者们已经了解了如何解决这一问题，并在实际项目中运用起来。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65220ed595b1f8cacd96cb2f