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

我想要实现这样的事情。 (不是FAB或Snackbar)。 我怎样才能创build一个布局,覆盖AppBarLayout? 喜欢这个! (例如)

AppBarLayout覆盖内容

像Play商店:

就像Play商店一样

我的AppBarLayout与CoordinateLayout和NestedScrollView与RelativeLayout作为内容如下所示:

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

如果有人能够帮助我,这将是非常棒的。 我在网上找不到任何东西

提前致谢!

Solutions Collecting From Web of "使用新的Material Design覆盖AppBarLayout上方的内容"

只要添加一些像

 app:behavior_overlapTop="64dp" 

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

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

 app:expandedTitleMarginBottom="70dp" 

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

这很简单,真的。 你可以通过使用ToolBarFrameLayout和你的内容视图(可以像你的第一个例子一样的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具有比ly_content更高的海拔值。 这是什么会给你想要的'覆盖工具栏'的效果。

最后但并非最不重要的一点是,你可能想在你的activity的onCreate()某处添加这一行:

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

该代码将做什么是将您的ToolBar标高设置为零; 移除默认给予ToolBars的预设阴影。 如果你不这样做,那么阴影会在你的ToolBarFrameLayout之间创build一个“缝隙”,从而打破了这两个相同的错觉。

ps ,让你的内容视图在每一边填充也是很重要的。 这样做,你的内容视图将不会覆盖整个屏幕的宽度(这将使这个效果无用)。


注意:我在这里看到一些很好的答案,提到没有FrameLayout ,而是使ToolBar高。 虽然在理论上它可能和我提出的解决scheme一样好,但是在尝试操纵滚动时可能会遇到问题。 通过这样做,您将无法分离ToolBar及其扩展名。 你将被迫使Toolbar静态或滚动所有的ToolBar (使滚动有点奇怪)。

除此之外,您无法轻松地将自定义绘图分配到Toolbar 。 因此很难遵循上面给出的Google Play示例。 而如果你正在使用我的解决scheme,所有你需要做的只是让你的Toolbar透明,而不是将drawable分配给FrameLayout

我曾尝试实现像你提到的效果, Card Toolbar in Android称为Card Toolbar in Android ,并且按照预期工作。 这是我的布局,看看它:

 <FrameLayout 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:background="@color/background_material_light" > <android.support.v7.widget.Toolbar android:layout_width="match_parent" android:layout_height="@dimen/toolbar_double_height" android:background="?attr/colorPrimary" /> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginLeft="@dimen/cardview_toolbar_spacer" android:layout_marginRight="@dimen/cardview_toolbar_spacer" android:layout_marginTop="?attr/actionBarSize" app:cardBackgroundColor="@android:color/white"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" /> <View android:layout_width="match_parent" android:layout_height="1dp" android:alpha="0.12" android:background="@android:color/black" /> </LinearLayout> </android.support.v7.widget.CardView> </FrameLayout> 

希望你会受到启发。

我有类似的要求,我达到了如下。

你的活动主题应该扩展Theme.AppCompat.Light.NoActionBar。 我创build了一个布局XML文件:

 <android.support.v7.widget.Toolbar android:id="@+id/toolbar_main" android:layout_width="match_parent" android:layout_height="@dimen/action_bar_size_x2" android:background="@color/colorPrimary" android:minHeight="?attr/actionBarSize" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginLeft="15dp" android:layout_marginRight="15dp" android:layout_marginTop="@dimen/action_bar_size" android:orientation="vertical" > <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="match_parent" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" android:text="@string/app_name" android:textSize="24sp" /> </LinearLayout> </android.support.v7.widget.CardView> </LinearLayout> 

活动应该是这样的:

 public class MainActivity extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar maintoolbar = (Toolbar) findViewById(R.id.toolbar_main); setSupportActionBar(maintoolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); } } 

我有这样的看法: 在这里输入图像说明