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


175

我有以下布局:

<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>

我将Fragments 添加到中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"/>

我的问题是在列表上方绘制了工具栏。我试图通过包装的内容,以解决CoordinatorLayoutLinearLayout,即解决了透支,但这样的appbar滚动行为不再起作用。

任何帮助深表感谢!

Answers:


355

取属性

app:layout_behavior="@string/appbar_scrolling_view_behavior"

关闭RecyclerView并把它放在FrameLayout您尝试下显示Toolbar

我发现滚动视图行为要做的一件重要事情是将组件布置在工具栏下方。由于的FrameLayout后代会滚动(RecyclerView),因此CoordinatorLayout会获得用于移动的那些滚动事件Toolbar


需要注意的另一件事:布局行为将使FrameLayout高度的大小好像Toolbar已经滚动一样,并且在Toolbar完全显示的情况下,只需向下推整个视图,以使视图的底部位于底部的下方。CoordinatorLayout

这让我感到惊讶。我期望在工具栏上下滚动时可以动态调整视图的大小。因此,如果您的视图底部有一个带有固定组件的滚动组件,则在完全滚动之前不会看到该底部组件Toolbar

因此,当我想将按钮固定在UI的底部时,我通过将按钮放在CoordinatorLayoutandroid:layout_gravity="bottom")的底部并在工具栏下方的视图中添加了等于按钮高度的底部边距来解决此问题。


1
非常感谢,这确实有效!此后我的唯一问题是,如果工具栏被移出,则在用Fragment另一个列表替换包含后,它不会返回Fragment。我设法以这种方式手动显示工具栏。
2015年

哇。我一直以为Fragment自己的布局完全取代了FrameLayout的“占位符”,但是我发现事实并非如此。感谢您的回答!这对我帮助很大。
Aspiring Dev

@Surendar d请检查这一点,如果你能stackoverflow.com/questions/42968587/...
穆罕默德Rihan

真好 谢谢!
拉兹万

86

我设法通过添加以下内容来解决此问题:

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"
       />

9
而不是添加marginTop添加app:layout_behavior =“ @ string / appbar_scrolling_view_behavior”
Naveed Ahmad

3
@ string / appbar_scrolling_view_behavior不可用时的完美解决方案
Julius

请使用android:layout_marginTop="?android:attr/actionBarSize"
Martin Pfeffer,

6
这有点hacky,增加了可能的大小余量(假设您将始终拥有一个该大小的工具栏)在某个时候会中断
Kenny

0

从Android Studio 3.4开始,您需要将此行放入包含的Layout中RecyclerView

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

0

要使用折叠的顶部ToolBar或使用自己选择的ScrollFlags,我们可以这样做:从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>

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.