Material Design:如何处理 AppBarLayout 隐藏后空白问题?

阅读时长 9 分钟读完

在 Android 开发中,AppBarLayout 是一个非常常用的控件,它可以帮助我们实现 Material Design 风格的应用栏。但是在使用 AppBarLayout 的时候,我们可能会遇到一个问题,就是当 AppBarLayout 隐藏的时候,会留下一片空白区域。本文将详细介绍这个问题的原因以及如何解决它。

问题的原因

在使用 AppBarLayout 的时候,我们通常会将它和一个 RecyclerView 或者 NestedScrollView 等滚动控件一起使用,以实现滚动时应用栏的动态变化效果。这时候,我们可能会使用一个 CoordinatorLayout 来包裹这些控件,并使用 app:layout_behavior 属性来指定 AppBarLayout 的行为。例如:

-- -------------------- ---- -------
------------------------------------------------
    -----------------------------------
    -------------------------------------

    -------------------------------------------
        -----------------------------------
        ------------------------------------
        -------------------------------------------------------------

        ---- ------ ---

    ---------------------------------------------

    ---------------------------------------
        -----------------------------------
        ------------------------------------
        --------------------------------------------------------------

--------------------------------------------------

这样做的效果是,当 RecyclerView 滚动的时候,AppBarLayout 会根据滚动的距离动态改变高度和透明度,以实现 Material Design 风格的应用栏效果。

但是,当 AppBarLayout 隐藏的时候,就会出现问题。具体来说,当 AppBarLayout 隐藏的时候,它的高度会变成 0,但是它在 CoordinatorLayout 中仍然占据了一定的空间,这就导致了下方的 RecyclerView 或者 NestedScrollView 等滚动控件出现了一片空白区域。

解决方案

要解决这个问题,我们需要对布局进行一些调整。具体来说,我们需要在 AppBarLayout 的下方添加一个 View,它的高度应该和 AppBarLayout 的高度相同。这样做的效果是,当 AppBarLayout 隐藏的时候,这个 View 会自动填补 AppBarLayout 的空白区域,确保下方的 RecyclerView 或者 NestedScrollView 等滚动控件不会出现空白区域。

下面是一个示例代码:

-- -------------------- ---- -------
------------------------------------------------
    -----------------------------------
    -------------------------------------

    -------------------------------------------
        -----------------------------------
        ------------------------------------
        -------------------------------------------------------------

        ---- ------ ---

    ---------------------------------------------

    -----
        ------------------------------------
        -----------------------------------
        ---------------------------
        --------------------------------

    ---------------------------------------
        -----------------------------------
        ------------------------------------
        --------------------------------------------------------------

--------------------------------------------------

这里我们添加了一个高度为 0 的 View,并将它的可见性设置为 invisible,以确保它不会对布局产生影响。当 AppBarLayout 隐藏的时候,我们可以通过代码将这个 View 的高度设置为 AppBarLayout 的高度,以确保它能够填补 AppBarLayout 的空白区域。示例代码如下:

-- -------------------- ---- -------
----- ---- ----------------- - --------------------------------------
----- ------------ ------------ - ---------------------------------
------------------------------------------- -------------------------------------- -
    ---------
    ------ ---- ---------------------------- ------------- --- --------------- -
        --- ------------ - -------------------------
        --- ------------------- - ------------ - ---------------
        ------------------------------------------ - --------------------
        ----------------------------------
    -
---

这样做的效果是,当 AppBarLayout 隐藏的时候,这个 View 会自动填补 AppBarLayout 的空白区域,确保下方的 RecyclerView 或者 NestedScrollView 等滚动控件不会出现空白区域。

总结

在使用 AppBarLayout 的时候,我们可能会遇到一个问题,就是当 AppBarLayout 隐藏的时候,会留下一片空白区域。这个问题的原因是,当 AppBarLayout 隐藏的时候,它的高度会变成 0,但是它在 CoordinatorLayout 中仍然占据了一定的空间。为了解决这个问题,我们需要在 AppBarLayout 的下方添加一个高度与之相同的 View,以确保下方的 RecyclerView 或者 NestedScrollView 等滚动控件不会出现空白区域。示例代码如下:

-- -------------------- ---- -------
------------------------------------------------
    -----------------------------------
    -------------------------------------

    -------------------------------------------
        -----------------------------------
        ------------------------------------
        -------------------------------------------------------------

        ---- ------ ---

    ---------------------------------------------

    -----
        ------------------------------------
        -----------------------------------
        ---------------------------
        --------------------------------

    ---------------------------------------
        -----------------------------------
        ------------------------------------
        --------------------------------------------------------------

--------------------------------------------------
-- -------------------- ---- -------
----- ---- ----------------- - --------------------------------------
----- ------------ ------------ - ---------------------------------
------------------------------------------- -------------------------------------- -
    ---------
    ------ ---- ---------------------------- ------------- --- --------------- -
        --- ------------ - -------------------------
        --- ------------------- - ------------ - ---------------
        ------------------------------------------ - --------------------
        ----------------------------------
    -
---

希望本文能够帮助大家解决 AppBarLayout 隐藏后空白问题,让大家能够更好地使用 Material Design 风格的应用栏。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/660bc307d10417a222bfb592

纠错
反馈