在坐标布局中将视图添加到工具栏下面

我有以下的布局:

<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中来解决这个问题,这样就解决了透支问题,但是这样应用程序的滚动行为就不再起作用了。

非常感谢您的帮助!

114166 次浏览

拿走属性

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") ,并添加一个底部边距等于按钮的高度到视图的工具栏。

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

? android: attr/actionBarSize”

框架布局如下:

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

从 Android 工作室3.4开始,你需要把这一行放到你的布局中,它保存着 RecyclerView

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

使用折叠顶部工具栏或使用自己选择的 ScrollFlags 我们可以这样做: 从材料设计去掉 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>