android - CollapsingToolbarLayout 问题 : overlapping UI with ToolBar

Question

我目前在尝试在 CollapsingToolbarLayout 中放置一些按钮和微调器时遇到问题。

这是我目前得到的结果:

如您所见，由于某种超出我所知的原因，微调器很好地消失在工具栏下方，但 ToggleButton 却没有。

我是否遗漏了什么，或者我是否滥用了 CollapsingToobarLayout？

这是我的布局 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"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">

<RelativeLayout
    android:id="@+id/loading_panel_view"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:indeterminate="true" />
</RelativeLayout>

<android.support.v7.widget.RecyclerView
    android:id="@+id/list_view"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<TextView
    android:id="@+id/list_view_no_listing_label"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:visibility="gone"
    android:gravity="center_vertical|center_horizontal"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:text="@string/empty_list" />

<android.support.design.widget.AppBarLayout
    android:id="@+id/collapse_app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapse_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:titleEnabled="false">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_weight="1"
            android:background="?attr/colorPrimary"
            app:layout_collapseMode="pin" >

        </android.support.v7.widget.Toolbar>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:orientation="vertical"
            app:layout_collapseMode="pin" >

            <LinearLayout
                android:id="@+id/list_view_header_radio_buttons_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_marginBottom="80dp"
                android:layout_margin="5dp"
                android:orientation="horizontal"
                android:layout_weight="1" >

                <ToggleButton
                    android:id="@+id/list_view_header_all_radio_button"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:checked="true"
                    android:textOff="All"
                    android:textOn="All"
                    android:theme="@style/AppTheme.ToggleButton" />

                <ToggleButton
                    android:id="@+id/list_view_header_new_radio_button"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:textOff="New"
                    android:textOn="New"
                    android:theme="@style/AppTheme.ToggleButton" />

                <ToggleButton
                    android:id="@+id/list_view_header_used_radio_button"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:textOff="Used"
                    android:textOn="Used"
                    android:theme="@style/AppTheme.ToggleButton" />
            </LinearLayout>

            <Spinner
                android:id="@+id/filter_one_spinner"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                app:layout_collapseMode="pin" />

            <Spinner
                android:id="@+id/filter_two_spinner"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                app:layout_collapseMode="pin" />

            <Spinner
                android:id="@+id/filter_three_spinner"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                app:layout_collapseMode="pin" />

        </LinearLayout>

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

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

这是 AppTheme.ToggleButton 样式(不确定这是否重要):

<style name="AppTheme.ToggleButton" parent="Widget.AppCompat.Button.Colored">
    <item name="colorControlHighlight">@color/colorPrimary</item>
    <item name="colorButtonNormal">@color/cardview_light_background</item>
    <item name="android:textColor">@color/colorPrimary</item>
</style>

Answer 1

您的 collapsingToolbar 布局应遵循以下层次结构:

<android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapse_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:titleEnabled="false">

     <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:orientation="vertical"
            app:layout_collapseMode="pin">

         // Your UI components that you want to collapse

      </LinearLayout>

      <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_weight="1"
            android:background="?attr/colorPrimary"
            app:layout_collapseMode="pin"/>

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