Chế độ xem cuộn chồng chéo với AppBarLayout

Tôi muốn triển khai mẫu 'Không gian linh hoạt với nội dung chồng chéo' từ kỹ thuật cuộn Material design , chẳng hạn như trong video này :

Bố cục XML của tôi bây giờ trông giống như sau:

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

Có cách nào dễ dàng để thực hiện việc này bằng Thư viện thiết kế không? Hay tôi phải xây dựng một CoordinatorLayout.Behavior tùy chỉnh để thực hiện việc này?

Trên thực tế, lớp phủ chế độ xem cuộn với AppBarLayout là một tính năng được bao gồm của Thư viện hỗ trợ thiết kế Android : bạn có thể sử dụng app:behavior_overlapTopthuộc tính trên NestedScrollView(hoặc bất kỳ Chế độ xem nào sử dụng ScrollingViewBehavior ) để đặt số lượng chồng chéo:

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

Lưu ý rằng app:behavior_overlapTopchỉ hoạt động trên các chế độ xem có app:layout_behavior="@string/appbar_scrolling_view_behavior"giống như Hành vi đang sử dụng thuộc tính (không phải Chế độ xem hoặc Nhóm xem chính, như các thuộc tính thường áp dụng), do đó có behavior_tiền tố.

Hoặc đặt nó theo chương trình thông qua setOverlayTop () :

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

Ngoài câu trả lời được chấp nhận , hãy gọi setTitleEnabled (false) trên CollapsingToolbarLayout của bạn để làm cho tiêu đề luôn cố định ở trên cùng như trong ví dụ.

Như thế này:

CollapsingToolbarLayout.setTitleEnabled(false);

hoặc bằng cách thêm nó vào xml như thế này:

app:titleEnabled="false"

Nếu không, tiêu đề có thể biến mất sau nội dung chồng chéo, trừ khi tất nhiên, đó là hành vi bạn muốn.