android - CoordinatorLayout + ActionBar + fragment

Question

当我尝试使用 CoordinatorLayout + AppBarLayout 放置 fragment 时遇到问题。

我尝试使用属性 app:layout_behavior="@string/appbar_scrolling_view_behavior" 将不同的 fragment 加载到 ActionBar 下面的 RelativeLayout 内容中，但是当我加载底部有两个按钮的 fragment 时屏幕的这些被加载到屏幕之外。

fragments加载的内容在屏幕外，内容总是在底部。

这是我的 main_activity.xml 的代码:

<?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:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".views.activities.HomeActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        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:popupTheme="@style/AppTheme.PopupOverlay"
            app:layout_scrollFlags="scroll|enterAlways" /> <!-- Indica como afecta a los hijos de AppBar -->

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

    <!-- Fragment are loaded here -->
    <RelativeLayout
        android:id="@+id/containerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" > 
    </RelativeLayout>

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

这是内容在屏幕外的屏幕截图。

这是我遇到问题的 fragment 的截图:

这是在模拟器中加载 fragment 的屏幕截图。您可以看到底部按钮没有出现。它们被导航栏隐藏了:

我怎样才能避免这个问题？

编辑

<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:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".views.activities.HomeActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        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:popupTheme="@style/AppTheme.PopupOverlay"
            app:layout_scrollFlags="scroll|enterAlways" /> <!-- Indica como afecta a los hijos de AppBar -->

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

    <!-- Main content -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <FrameLayout
           android:id="@+id/containerLayout"
           android:layout_width="match_parent"
           android:layout_height="match_parent">

        </FrameLayout>

    </RelativeLayout>

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

编辑 2:我尝试将 ToolBar 放入 RelativeLayout，但它部分起作用。滚动到 recyclerView 时，现在不会在 actionBar 上运行动画

<?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:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".views.activities.HomeActivity">

    <!-- Main content -->
    <RelativeLayout

        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" > 

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

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:popupTheme="@style/AppTheme.PopupOverlay"
                app:layout_scrollFlags="scroll|enterAlways" /> <!-- Indica como afecta a los hijos de AppBar -->

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

        <FrameLayout
            android:id="@+id/containerLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/appBarLayout">

        </FrameLayout>

    </RelativeLayout>

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

Answer 1

我终于弄明白 CoordinatorLayout 发生的事情是 AppBarLayout 下面的 View 是根据高度调整大小的，就好像 Toolbar 已经滚开。然后，当工具栏 处于正常位置时， View 被简单地向下推。当 CoordinatorLayout 向上滚动所有内容时，它不会调整大小。

这意味着附加到该 View 底部的任何 View 都将被滚动到一边，并且不可见或部分可见。

那么如何解决这个问题呢？你需要做两件事:

1. 将 AppBarLayout 和 Toolbar 放入您的 fragment 中。该 fragment 可以在 Toolbar 上设置支持 ActionBar 并执行通常在 Activity 中完成的所有操作。所以现在您的 Activity 布局可以像这样简单:

   <FrameLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:id="@+id/containerLayout"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       tools:context=".views.activities.HomeActivity"/>
   

2. 将按钮附加到 CoordinatorLayout 的底部。 CoordinatorLayout 是 FrameLayout 的子类，因此您可以在 subview 上使用 layout_gravity="bottom"。所以现在您的 fragment XML 可能如下所示:

   <?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:id="@+id/coordinator"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       tools:context=".views.activities.HomeActivity">
   
       <android.support.design.widget.AppBarLayout
           android:id="@+id/appBarLayout"
           android:layout_height="wrap_content"
           android:layout_width="match_parent"
           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:popupTheme="@style/AppTheme.PopupOverlay"
               app:layout_scrollFlags="scroll|enterAlways" /> <!-- Indica como afecta a los hijos de AppBar -->
   
       </android.support.design.widget.AppBarLayout>
   
       <RelativeLayout
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           app:layout_behavior="@string/appbar_scrolling_view_behavior" > 
   
           <!-- 
             rest of your fragment layout goes here 
             it needs to have a scrolling component
             -->
   
           <!-- 
             you *might* need a spacer in order to see
             the bottom of your view over the top of
             the buttons
             -->
           <Space
               android:layout_width="match_parent"
               android:layout_height="48dp" />
           <!-- or you could put a bottom margin on your layout -->
   
       </RelativeLayout>
   
       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="48dp"
           android:layout_gravity="bottom">
   
           <!-- your buttons go here -->
   
       </LinearLayout>
   
   </android.support.design.widget.CoordinatorLayout>