在 CoordinatorLayout 的工具栏下方添加视图

Question

我有以下布局：

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar">

        <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|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

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

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</android.support.design.widget.CoordinatorLayout>

我将 Fragment 添加到 FrameLayout 中，替换它们。我的 Fragment 之一是一个列表，其布局如下：

<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

我的问题是 工具栏被绘制在列表上 。我试图通过将 CoordinatorLayout 的内容包装到 LinearLayout 中来解决这个问题，这解决了透支问题，但这样应用栏滚动行为就不再起作用了。

非常感谢任何帮助！

Answer 1

取属性

app:layout_behavior="@string/appbar_scrolling_view_behavior"

关闭 RecyclerView 并将其放在 FrameLayout 上，您要在 Toolbar.

下显示

我发现滚动视图行为所做的一件重要事情是将组件布局在工具栏下方。因为 FrameLayout 有一个将滚动的后代 (RecyclerView)，所以 CoordinatorLayout 将获得用于移动 Toolbar.

的那些滚动事件

另一件需要注意的事情：该布局行为将导致 FrameLayout 高度调整 ，就好像 Toolbar 已经滚动了 ，在 Toolbar 完全显示的情况下，整个视图被简单地向下推，以便视图的底部低于 CoordinatorLayout.

的底部

这对我来说是个惊喜。我期待视图随着工具栏上下滚动而动态调整大小。因此，如果您的视图底部有一个滚动组件和一个固定组件，那么在完全滚动 Toolbar.

之前，您将看不到该底部组件

所以当我想在 UI 的底部锚定一个按钮时，我通过将按钮放在 CoordinatorLayout (android:layout_gravity="bottom") 的底部来解决这个问题，并且向工具栏下方的视图添加等于按钮高度的底部边距。

Answer 2

我设法通过添加解决了这个问题：

android:layout_marginTop="?android:attr/actionBarSize"

到 FrameLayout 像这样：

 <FrameLayout
        android:id="@+id/content"
        android:layout_marginTop="?android:attr/actionBarSize"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
       />

Answer 3

从 Android studio 3.4 开始，您需要将此行放在包含 RecyclerView.

的布局中

app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior"

Answer 4

使用折叠顶部工具栏或使用您自己选择的 ScrollFlags 我们可以这样做：From Material Design 去掉 FrameLayout

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleGravity="top"
            app:layout_scrollFlags="scroll|enterAlways">


        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin">

            <ImageView
                android:id="@+id/ic_back"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_arrow_back" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="back"
                android:textSize="16sp"
                android:textStyle="bold" />

        </androidx.appcompat.widget.Toolbar>


        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/post_details_recycler"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:padding="5dp"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

在 CoordinatorLayout 的工具栏下方添加视图

Add views below toolbar in CoordinatorLayout

android

android-toolbar

android-coordinatorlayout

androiddesignsupport