有人可以解释 AppBarLayout 和 CollapsingToolbarLayout 的工作原理吗？

Question

我正在尝试制作类似于发布的图像的内容，但假设 viewpager 可以使用 recyclerView 滚动，标题是简单的线性/相对布局，这将是静态的，fab 相同（不可滚动）但不工作。

我在下面发布了我的布局

<android.support.design.widget.CoordinatorLayout
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:fitsSystemWindows="true">

<include layout="@layout/layout_view_pager"
    app:layout_collapseMode="parallax"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

<android.support.v7.widget.RecyclerView
    android:id="@+id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="true"
    android:saveEnabled="false"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <RelativeLayout
                android:id="@+id/header_labels"
                android:layout_width="match_parent"
                android:layout_height="@dimen/header_height"
                android:background="@color/brand_green"
                app:layout_collapseMode="pin"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/actionbar_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:textColor="@android:color/white"
                    android:textSize="43sp"/>

                <TextView
                    android:id="@+id/actionbar_balance_label"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:layout_marginTop="5dp"          android:textSize="13sp"/>
            </RelativeLayout>

        <android.support.v7.widget.Toolbar
                    android:id="@+id/my_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"
                    app:contentInsetStart="0dp">

                    <TextView
                        android:id="@+id/chime_sign"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:gravity="center"
                        app:iconFontColor="@android:color/white"
                        app:iconFontSize="26sp"/>

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

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

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

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:clickable="true"
    android:src="@drawable/fab_icon_mm"
    app:elevation="6dp"
    app:fabSize="normal"
    app:rippleColor="@color/brand_dark_green"
    app:pressedTranslationZ="12dp"
    app:layout_anchor="@id/header_labels"
    app:layout_anchorGravity="bottom|right|end"/>

Answer 1

首先，您已将RelativeLayout 和Toolbar 的app:layout_collapseMode 设置为pin，这不会显示任何效果。将 app:layout_collapseMode 设置为任何视图的 pin 都不会在发生滚动时更改视图的高度。要在滚动发生时更改视图的高度，您需要将app:layout_collapseMode 设置为parallax。

其次，为您的AppBarLayout 设置一个指定的高度。设置WRAP_CONTENT 将无法正常工作。您需要设置特定的尺寸，例如 180dp。

第三，根据您的问题，您希望 Viewpager 可以使用 RecyclerView 滚动。您的代码无法按您预期的方式工作。如果您希望ViewPager 可以使用RecyclerView 滚动，那么您需要从xml 代码中删除RecyclerView 并将其添加到单独的xml 代码文件中。然后您需要创建一个或两个Fragment（根据您的需要），在ViewPager 中添加Fragment 并在其中实例化RecyclerView。这个Fragment 还将负责在RecyclerView 中膨胀数据。