使用新材质设计覆盖AppBarLayout上方的内容

Question

我想实现类似的目的。 （不是FAB或Snackbar）。我如何创建布局，覆盖AppBarLayout？喜欢这个！ （举例来说）

像Play商店：

我AppBarLayout与CoordinatorLayout和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".....> 

这将是真棒如果有人可以帮助我。我在网上找不到任何东西...

在此先感谢！

Answer 1

这很简单，真的。您可以通过使用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); 

什么是码woud做的是你的ToolBar标高设置为零;移除默认给予ToolBars的预设阴影。如果你不这样做，那么影子会在你的ToolBar和你的FrameLayout之间产生一个“缝隙”，从而打破了这两者相同的错觉。

p.s.，让你的内容查看每一边的填充也很重要。这样做，你的内容视图将不会覆盖整个屏幕宽度（这会使这种效果无用）。

---

注：我在这里看到了一些很好的答案所提到的缺乏FrameLayout而是作出了ToolBar高。虽然在理论上它可能和我提出的解决方案一样好，但是在尝试操纵滚动时可能会遇到问题;通过这样做，您将无法分开ToolBar及其扩展名。你将不得不使静态的Toolbar或滚动所有ToolBar（使滚动有点奇怪）。

除此之外，您无法轻松将自定义绘图分配到Toolbar。因此很难遵循上面给出的Google Play示例。而如果您使用我的解决方案，则只需将Toolbar设置为透明，然后将可绘图分配给FrameLayout即可。

Answer 2

我确实试图实现像你所提到的那种叫做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> 

希望你会受到启发。

Answer 3

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

您的活动主题应扩展Theme.AppCompat.Light.NoActionBar。 我创建了一个布局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); 
    } 
} 

我得到了这样的观点：

Answer 4

Ju ST添加类似

app:behavior_overlapTop="64dp" 

您NestedScrollView，它会被放置在扩展工具栏上方。

此外，你应该像

app:expandedTitleMarginBottom="70dp" 

讲一下你的CollapsingToolbarLayout这样的称号并不在你的叠加滚动的内容出现。