在使用 Material Design 中的 CollapsingToolbarLayout 组件时，我们可能会遇到一个闪屏的问题，即在快速滑动页面时，背景图片会出现短暂的黑色闪屏现象。这个问题可以影响用户体验，因此我们需要找到一种解决方案来解决它。
问题分析
在使用 CollapsingToolbarLayout 时，当 Toolbar 折叠时，CollapsingToolbarLayout 中的 ImageView 会过渡到 Toolbar 的背景，并显示 Toolbar 的标题。但是，由于图片加载需要一定的时间，当用户快速向下滑动页面时，可能会导致图片尚未加载完成，从而造成短暂的黑色闪屏。
解决方案
要解决这个问题，我们需要在 CollapsingToolbarLayout 中添加一个覆盖层来保证背景颜色的连续性，并在图片加载完成后再将其删除。具体来说，我们可以使用一个半透明的 View 覆盖在 ImageView 上，当图片加载完成后，再将其删除，从而保证页面滑动时背景的连续性。
下面是代码示例：
-- -------------------- ---- -------
------------------------------------------------
----------------------------------------------------------
---------------------------------------------------
-----------------------------------
-------------------------------------
-------------------------------------------
-----------------------------------
-------------------------------------
------------------------------------------------------
------------------------------------
-----------------------------------
------------------------------------
-------------------------------------
---------------------------------------------------
----------
--------------------------
-----------------------------------
-----------------------------
------------------------------
------------------------------
------------------------------------
-----
-------------------------
-----------------------------------
-----------------------------
-----------------------------------------
---------------------
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
-------------------------------
--------------------------------------------------------
---------------------------------------------
-------------------------------------------
-----------------------------------
------------------------------------
-------------------------------------------------------------
---- ---- ---
---------------------------------------------
--------------------------------------------------在上面的代码中，我们通过添加一个半透明的黑色 View（id 为 overlay）覆盖在 ImageView 上，从而解决了闪屏的问题。然后我们可以在代码中加载图片，并在加载完成后移除覆盖层：
-- -------------------- ---- -------
----- ---- ------- - ---------------------------
----- --------- --------- - ----------------------------
-- ----
----------------
------------------------
------------- --------------------------- -
---------
------ ------- ---------------------- -------------- -- ------ ------ ---------------- ------- ------- ---------------- -
------ ------
-
---------
------ ------- ------------------------ --------- ------ ------ ---------------- ------- ---------- ----------- ------- ---------------- -
-- -----
---------------------------------
------ ------
-
--
-----------------在上面的代码中，我们使用了 Glide 来加载图片，并添加了一个监听器来监测图片加载完成的事件。当图片加载完成后，我们就可以移除覆盖层来解决闪屏的问题了。
总结
通过在 CollapsingToolbarLayout 中添加覆盖层来保证背景颜色的连续性，我们可以有效地解决 Material Design 中使用 CollapsingToolbarLayout 闪屏问题。此外，我们还可以使用 Glide 或其他图片加载库来加载图片，从而提高图片加载的速度和效率。这个解决方案不仅适用于 CollapsingToolbarLayout 组件，而且还可以应用于其他需要加载大量图片的应用场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c91a2968c7c53b0792526