使用AppBarLayout的重疊滾動視圖

Question

我想通過Material design滾動技術實現“具有重疊內容的靈活空間”模式，例如此視頻 ：

我的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才能做到這一點？

Answer 1

實際上，將滾動視圖與AppBarLayout疊加是Android設計支持庫的一項附帶功能：您可以在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"視圖，因為它是使用屬性的行為（不是通常使用屬性的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

Answer 2

除了接受的答案外 ，在CollapsingToolbarLayout上調用setTitleEnabled（false）以使標題保持固定在頂部，如示例所示。

像這樣：

CollapsingToolbarLayout.setTitleEnabled(false);

或通過像這樣在xml中添加它：

app:titleEnabled="false"

否則，標題可能會消失在重疊內容的后面，當然，除非您要這樣做。