使用新的Material Design覆盖AppBarLayout上方的内容

Question

我希望实现这样的目标.(不是FAB或Snackbar).如何创建布局,覆盖AppBarLayout？像这样!(例如)

喜欢Play商店:

我的带有CoordinatorLayout的AppBarLayout和带有RelativeLayout的NestedScrollView作为内容如下所示:

<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/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="@dimen/_118sdp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsingToolbarLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentScrim="@color/mpc_pink"
        app:expandedTitleMarginStart="@dimen/_40sdp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <de.mypostcardstore.widgets.ItemImageView
            android:id="@+id/header"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@color/mpc_pink"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.7" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/article_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:minHeight="?attr/actionBarSize"
            app:contentScrim="@color/mpc_pink"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />


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

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

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?android:colorBackground"
    android:fillViewport="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <RelativeLayout
        android:layout_width="match_parent".....>

如果有人可以帮助我,那将是非常棒的.我在互联网上找不到任何东西......

提前致谢!

Answer 1

只需添加类似的东西

app:behavior_overlapTop="64dp"

到您的NestedScrollView,它将被放置在展开的工具栏上方.

另外,你应该添加类似的东西

app:expandedTitleMarginBottom="70dp"

到您的CollapsingToolbarLayout,所以标题不会出现在您的重叠滚动内容下.

Answer 2

真的很简单.你可以做到这一点通过使用的组合ToolBar,FrameLayout和你的内容视图(可能是ListView喜欢你的第一个例子,或任何东西).

这个想法是让你FrameLayout拥有与你相同的颜色ToolBar,给人一种ToolBar比它大得多的错觉.然后剩下要做的就是让你的内容视图成为最后一个(或者在API 21及以上版本中:拥有最高elevation属性),这样它就好像浮在上面的那个上面FrameLayout.

见下图:

现在您已经掌握了一个重要的想法,下面是一些用于执行此类操作的真实XML片段.(我实际上在我的一个应用程序中使用此布局):

<!-- Somewhere in your layout.xml -->

....

    <android.support.v7.widget.Toolbar
        android:id="@+id/tb_toolbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/abc_action_bar_default_height_material"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:contentInsetStart="72dp"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <!-- This is the 'faux' ToolBar I've been telling you about. This is the part that will be overlaid by the content view below. -->
    <FrameLayout
        android:id="@+id/v_toolbar_extension"
        android:layout_width="match_parent"
        android:layout_height="64dp"
        android:layout_below="@+id/tb_toolbar"
        android:background="?attr/colorPrimary"
        android:elevation="2dp"/>

    <!-- Normally, I use this FrameLayout as a base for inflating my fragments. You could just use put your content view here. -->
    <FrameLayout
        android:id="@+id/ly_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/tb_toolbar"
        android:elevation="3dp"/>

....

请注意,我的ly_content海拔值高于v_toolbar_extension.这将为您提供所需的"重叠工具栏"效果.

最后但同样重要的是,您可能希望在活动的某处添加此行onCreate():

/* Assuming mToolbar exists as a reference to your ToolBar in XML. */
setSupportActionBar(mTbToolbar);
getSupportActionBar().setElevation(0);

这个代码的作用是将你的ToolBar高程设置为零; 删除作为ToolBars默认设置的预设阴影.如果你不这样做,说影子会在你ToolBar和你之间形成一个"缝隙" FrameLayout,从而打破了两者相同的错觉.

ps,为内容视图提供每边填充也很重要.这样做,您的内容视图将不会覆盖屏幕的整个宽度(这会使此效果无效).

注意:我在这里看到了一些很好的答案,提到缺少FrameLayout而不是ToolBar更高.虽然理论上它可能与我提出的解决方案一样好,但在尝试操作滚动时可能会遇到问题; 通过这样做,您将无法分离ToolBar和扩展.您将被迫制作Toolbar静态或ToolBar完全滚动所有(使滚动有点奇怪).

除此之外,您无法轻松将自定义drawable分配到Toolbar.因此,很难按照上面给出的Google Play示例进行操作.如果您正在使用我的解决方案,那么您只需要使您的Toolbar透明化并将可绘制分配给它FrameLayout.