前言
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" 属性，如下所示：
-------------------------------------------
----------------------------
-----------------------------------
------------------------------------
----------------------------------------------
---
--这样就可以解决重影问题了。
方法二：使用 TabLayoutMediator 类
使用 TabLayoutMediator 类可以更简单地实现绑定 TabLayout 和 ViewPager，并且在使用时不会出现重影问题。具体来说，我们需要在代码中使用 TabLayoutMediator 类进行绑定，如下所示：
--- ---------- --------- - -----------------------------
--- ---------- ---------- - -----------------------------
---------------------------- ---------- ----- -------- --
-- -----------
----------在这里，我们通过 TabLayoutMediator 类将 tabLayout 和 viewPager 控件进行了绑定，并同时处理了标签页和页面位置之间的绑定关系。使用 attach() 方法即可完成绑定，并且不会出现重影问题。
总结
本文在介绍 Material Design 中的 CollapsingToolbarLayout 和 TabLayout 控件时，详细讲解了他们在使用过程中可能出现的重影问题及其原因，同时提供了两种解决方法：一种是使用 app:tabBackground 属性，另一种是使用 TabLayoutMediator 类。通过本文的介绍，相信读者们已经了解了如何解决这一问题，并在实际项目中运用起来。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65220ed595b1f8cacd96cb2f