使用AppBarLayout的重叠滚动视图


102

我想通过Material design滚动技术实现“具有重叠内容的灵活空间”模式,如本视频所示内容重叠的灵活空间GIF

我的XML布局现在看起来像:

<android.support.design.widget.CoordinatorLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

      <android.support.v7.widget.Toolbar
          android:layout_height="?attr/actionBarSize"
          android:layout_width="match_parent"
          app:layout_collapseMode="pin"/>
    </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"
      app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
      <....>
    </LinearLayout>
  </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

使用设计库是否有一种简单的方法来完成此任务?还是我必须构建自定义的CoordinatorLayout.Behavior才能做到这一点?


我正在寻找相反的对象,在CollapsingToolbarLayout内部的图像应该在工具栏之后和NestedScrollView下面以另一种颜色显示更多的dps!
大卫

我使用的是FrameLayout,RelativeLayout,但片段始终与actionBar重叠。解决方案是使用NestedScrollView作为所有片段的父级。谢谢!
JCarlosR

Answers:


147

实际上,使用AppBarLayout覆盖滚动视图是Android设计支持库的一项附带功能:您可以使用您的app:behavior_overlapTop属性NestedScrollView(或使用ScrollingViewBehavior的任何视图)来设置重叠量:

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    app:behavior_overlapTop="64dp">

请注意,app:behavior_overlapTop仅适用于具有app:layout_behavior="@string/appbar_scrolling_view_behavior"行为的视图,因为使用属性的是“行为”(不是属性通常应用于的“视图”或“父视图组”),因此是behavior_前缀。

或通过setOverlayTop()以编程方式设置它:

NestedScrollView scrollView = ...
CoordinatorLayout.LayoutParams params = 
    (CoordinatorLayout.LayoutParams) scrollView.getLayoutParams();
AppBarLayout.ScrollingViewBehavior behavior =
    (AppBarLayout.ScrollingViewBehavior) params.getBehavior();
behavior.setOverlayTop(128); // Note: in pixels

1
这几乎对我有用,除了我的RecyclerView(在其上设置了layout_behaviorbehavior_overlapTop)最终位于其同级AppBarLayout 后面。我尝试过在XML中切换顺序,但似乎没有任何效果。任何想法可能是什么问题?
Vicky Chijwani,2015年

1
当我禁用滚动(删除app:layout_scrollFlags属性)时,behavior_overlapTop不起作用-NestedScrollView在AppBarLayout下。你知道如何解决这个问题吗?
Pavel Biryukov

@PavelBiryukov您对API <21做了什么?
Vicky Chijwani

1
您好,它对我不起作用。我收到error no resource identifier found for attribute behavior_overlayTop
Jack Lynx

1
@Lynx-令人困惑的是,behavior_overlapTop但是setOverlayTop()-重叠还是重叠。确保您使用的是正确的!
ianhanniballake

20

除了接受的答案外,在CollapsingToolbarLayout上调用setTitleEnabled(false)以使标题保持固定在顶部,如示例所示。

像这样:

CollapsingToolbarLayout.setTitleEnabled(false);

或通过像这样在xml中添加它:

app:titleEnabled="false"

否则,标题可能会消失在重叠内容的后面,当然,除非您要这样做。


2
您可以将足够大的ExpandedTitleMarginBottom放在CollapsingToolbarLayout中,以避免在扩展时重叠标题。
WindRider 2015年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.