如何使用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>