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

时间:2016-05-16 02:50:33

标签: android android-design-library android-collapsingtoolbarlayout android-appbarlayout

我正在尝试制作像张贴的图像,但是假设viewpager可以使用recyclerView滚动,标题是一个简单的线性/相对布局,这将是静态的,同样的(不可滚动)但是不工作。

我在

下面发布了我的布局

enter image description here

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

1 个答案:

答案 0 :(得分:0)

首先,您为app:layout_collapseModepin设置了RelativeLayoutToolbar,但不会显示任何效果。在进行滚动时,将app:layout_collapseMode设置为固定任何视图都不会更改视图的高度。要在滚动时更改视图的高度,您需要将app:layout_collapseMode设置为parallax

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

第三,根据您的问题,您希望Viewpager可以使用RecyclerView滚动。您的代码无法按预期方式运行。如果您希望ViewPager可以使用RecyclerView滚动,则需要从xml代码中删除RecyclerView并将其添加到单独的xml代码文件中。然后,您需要创建一个Fragment或两个(根据您的需要),在Fragment中添加ViewPager并在其中实例化RecyclerView。此Fragment还将负责对RecyclerView中的数据进行通货膨胀。