NestedScrollview chồng chéo CollapsingToolbarLayout như ứng dụng gmusic

Question

Tôi muốn nhân rộng hành vi của ứng dụng android google play music. Trong ứng dụng đó khi bạn sử dụng tab album "Nhạc của tôi", danh sách các album sẽ bắt đầu Trên thanh tác vụ (phần màu cam) vì nó được "mở rộng". Khi bạn cuộn lên danh sách album, phần màu da cam đó cuộn lên nhưng chậm hơn danh sách. Khi bạn cuộn xuống danh sách "khối màu cam" cũng cuộn xuống. Hành vi này độc lập với thanh công cụ và các tab đang được cuộn.

Tôi đang cố tạo lại hành vi như vậy với thư viện thiết kế material design mới. Sử dụng như là một điểm khởi đầu xml hoạt động chi tiết từ Cheesquare:

<android.support.design.widget.CoordinatorLayout 
    android:id="@+id/main_content" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true"> 
    <android.support.design.widget.AppBarLayout 
     android:id="@+id/appbar" 
     android:layout_width="match_parent" 
     android:layout_height="@dimen/detail_backdrop_height" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
     android:fitsSystemWindows="true"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/collapsing_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent"  
       app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" 
      android:fitsSystemWindows="true" 
      app:contentScrim="?attr/colorPrimary" 
      app:expandedTitleMarginStart="48dp" 
      app:expandedTitleMarginEnd="64dp"> 

     <ImageView 
      android:id="@+id/backdrop" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:scaleType="centerCrop" 
      android:fitsSystemWindows="true" 
      app:layout_collapseMode="parallax" /> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
      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" 
      android:paddingTop="24dp"> 
     <....> 
     </LinearLayout> 
    </android.support.v4.widget.NestedScrollView> 
</android.support.design.widget.CoordinatorLayout> 

Tôi đã cố gắng sử dụng bối cảnh "ImageView" với một nền màu sắc, và cố gắng di chuyển nó cùng với nestedview. Nếu tôi đặt các hình ảnh bên trong CollapsingToolbarLayout với hiệu ứng thị sai, vấn đề là tôi không thể làm cho chiều cao của nó lớn hơn để được theo nestedscrollview. Nếu tôi đặt hình ảnh bên ngoài collapsingToolbarLayout nhưng bên trong NestedScrollView, tôi không thể thay đổi "vận tốc" của chế độ xemScrolling. Nếu tôi đặt hình ảnh bên ngoài NestedScrollview, nó sẽ được vẽ trên thanh công cụ ngay cả khi thanh công cụ được đặt. Trước khi thư viện thiết kế material design, tôi đã sử dụng khung nhìn và gọi lại cho scrollview để di chuyển nó lên và xuống, nhưng tôi muốn sử dụng thư viện mới vì nó rất sạch sẽ loại bỏ rất nhiều mã soạn sẵn.

Bất kỳ ý tưởng nào?

Answer 1

Trong thực tế, bao phủ quan điểm di chuyển với AppBarLayout không đòi hỏi bất kỳ điều đó: bạn có thể sử dụng thuộc tính app:behavior_overlayTop trên NestedScrollView của bạn để đặt số tiền 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_overlapTop chỉ hoạt động trên số lượt xem có số app:layout_behavior="@string/appbar_scrolling_view_behavior" vì đó là Hành vi sử dụng thuộc tính (không phải là Chế độ xem hoặc Nhóm đối tượng chính, như các thuộc tính thường áp dụng), do đó tiền tố behavior_.

Hoặc thiết lập nó lập trình qua setOverlayTop():

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