android - 底部的元素使用 AppBarLayout 在导航栏后面绘制元素

Question

我正在尝试使用不同屏幕上的 fragment 进行导航。我们决定滚动时工具栏必须消失。使用 AppBarLayout 和 layout_scrollFlags“滚动”很容易。

所以我使用了一个包含 fragment 的 NestedScrollView。有些 fragment 只包含一个按钮，我希望将其放置在底部。其他是需要滚动的大菜单。

为此，我在 NestedScrollView 上使用了标志 fillViewPort。如果 fragment 很短，它将填满屏幕并且按钮将出现在底部。

问题是，如果我在 AppBarLayout 上使用标志“scroll”，如果 fragment 底部有一个按钮，它会被放置在导航栏后面，而如果我不使用标志“scroll”，NestedScrollView 会调整大小到适当的大小并且按钮可见。

测试很容易在 AndroidStudio 的布局预览中重现。

我是在尝试做一些奇怪的事情吗？我怎样才能使用带有“滚动”标志的协调器和 AppBarLayout 在某些(小) fragment 的底部有一个按钮？请注意，fitsSystemWindow 对此没有影响。

这只是没有使用 app:layout_scrollFlags="scroll"

这是使用 app:layout_scrollFlags="scroll"

这是简化布局的代码:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:fillViewport="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <include layout="@layout/content_main" />

    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

也是以防万一这是“content_main.xml”

    <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:backgroundTint="@android:color/red"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>

Answer 1

解决方案: 添加 <NestedScrollView>单独在 AppBarLayout 下方将避免屏幕的可见性，因为它需要屏幕的宽度和高度，但是 CoordinatorLayout默认情况下会将 View 移动到另一个下方。

因此，解决方法是包装 <NestedScrollView>在像<LinearLayout>这样的单独布局中如下图:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.v4.widget.NestedScrollView
            android:fillViewport="true"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <include layout="@layout/content_main" />

        </android.support.v4.widget.NestedScrollView>

    </LinearLayout>

</android.support.design.widget.CoordinatorLayout>

这将按预期工作，您将能够看到 View 并在滚动时隐藏工具栏。

其余代码保持不变。尝试一下，如果有任何问题，请发表评论。