与AppBarLayout重叠滚动视图

Question

与AppBarLayout重叠滚动视图

androidandroid-design-libraryandroid-collapsingtoolbarlayout

106

我想实现“具有重叠内容的灵活空间”设计模式，它来自于Material Design滚动技术，比如在这个视频中所示： Flexible Space with overlapping content 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>

是否有使用Design Library轻松实现这一点的方法？还是我必须构建自定义CoordinatorLayout.Behavior来完成这个任务？

- ianhanniballake

我正在寻找相反的效果，即CollapsingToolbarLayout内部的图像应该在工具栏下方和NestedScrollView之下以另一种颜色显示多几个dps！ - David

我之前使用了FrameLayout和RelativeLayout，但是碎片总是与操作栏重叠。将NestedScrollView作为所有碎片的父级是解决方案。谢谢！ - JCarlosR

2个回答

22

除了已接受的答案外，还可以在你的CollapsingToolbarLayout上调用setTitleEnabled（false）来使标题像示例中一样固定在顶部。

像这样：

CollapsingToolbarLayout.setTitleEnabled(false);

或者像这样在 XML 中添加：

app:titleEnabled="false"

否则，标题可能会被重叠的内容所覆盖，除非这正是您想要的行为方式。

- G.deWit

2

你可以在CollapsingToolbarLayout中设置足够大的expandedTitleMarginBottom，以避免标题在展开时重叠。 - WindRider

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ianhanniballake · Accepted Answer

事实上，使用AppBarLayout覆盖滚动视图是Android Design Support Library中包含的功能：可以在NestedScrollView（或任何使用ScrollingViewBehavior的视图）上使用app:behavior_overlapTop属性来设置重叠量。

<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（通常应用于 View 或 Parent ViewGroup 的属性不是这样），因此需要前缀 behavior_。

或通过 setOverlayTop() 在程序中进行设置。

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