如何使用CoordinateLayout.Behaviour實現視差效果？

Question

我想在本視頻中實現工具欄圓形圖像的視差效果，如 https://www.youtube.com/watch?v=sCP-b0a1x5Y 。但我希望通過使用CoordinateLayout.Behaviour類。有關自定義行爲的幫助？

這裏是我的xml：

<?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/coordinator" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true" 
    tools:context="com.vats.vatishs.materialdesignlayouts.ScrollingActivity"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/app_bar" 
     android:layout_width="match_parent" 
     android:layout_height="@dimen/app_bar_height" 
     android:fitsSystemWindows="true" 
     android:theme="@style/AppTheme.AppBarOverlay"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/toolbar_layout" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:fitsSystemWindows="true" 
      app:contentScrim="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       app:layout_collapseMode="pin" 
       app:popupTheme="@style/AppTheme.PopupOverlay"> 

      </android.support.v7.widget.Toolbar> 
     </android.support.design.widget.CollapsingToolbarLayout> 
    </android.support.design.widget.AppBarLayout> 

    <android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_margin="@dimen/text_margin" 
      android:text="@string/large_text" /> 
    </android.support.v4.widget.NestedScrollView> 

    <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:src="@android:drawable/ic_dialog_email" 
     android:layout_margin="10dp" 
     app:layout_behavior="com.vats.vatishs.materialdesignlayouts.ImageViewBehaviour" /> 

</android.support.design.widget.CoordinatorLayout> 

這裏是我的代碼：

public class ImageViewBehaviour extends CoordinatorLayout.Behavior<ImageView> { 

public ImageViewBehaviour(Context context, AttributeSet attrs) { 
} 

@Override 
public boolean layoutDependsOn(CoordinatorLayout parent, ImageView child, View dependency) { 
    return dependency instanceof AppBarLayout; 
} 

@Override 
public boolean onDependentViewChanged(CoordinatorLayout parent, ImageView child, View dependency) { 
    /* What should i do here so that the image (that is displayed on the start of toolbar) will be moved along with toolbar expanded and fit on the center of appbar when toolbar is fully expanded? */ 
    return true; 
} 
} 

Answer 1

把ImageView的CollapsingToolbarLayout內，並給它layout_collapseMode="parallax"。請注意，ImageView是第一個孩子，因此它將被繪製在Toolbar之後。請使用固定尺寸代替wrap_content，或者您可以使用match_parent，因爲您的AppBarLayout已指定固定高度。

<android.support.design.widget.CollapsingToolbarLayout ... > 
    <ImageView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_collapseMode="parallax" 
     ... /> 

    <android.support.v7.widget.Toolbar 
     android:layout_width="match_parent" 
     android:layout_height="?attr/actionBarSize" 
     app:layout_collapseMode="pin" 
     ... /> 

</android.support.design.widget.CollapsingToolbarLayout>